Video dưới đây là 10 phong cách animation mình làm từ đúng 1 cảnh: tên lửa phóng lên giữa thành phố. Mình không mở After Effects hay CapCut. Claude viết code vẽ bằng canvas, mỗi lần đổi phong cách chỉ cần dán 1 đoạn prompt, rồi xuất ra video dọc 9:16 cho TikTok.
Bài này chia sẻ cách làm, prompt dựng cảnh gốc, 3 prompt phong cách dùng ngay và bản đầy đủ 10 prompt để bạn copy về làm cho kênh của mình.
Mục lục
Cách làm hoạt động thế nào?
Claude viết 1 file HTML chạy thẳng trên trình duyệt, không cần cài gì. File chia làm 2 phần tách biệt:
- Phần chuyển động: hàm render(t) quyết định tên lửa rung lúc nào, bay lên nhanh dần ra sao, lửa dài bao nhiêu. Phần này viết 1 lần và giữ nguyên.
- Phần vẽ hình: hàm drawScene(ctx, p, t) quyết định mọi thứ trông như thế nào. Mỗi prompt phong cách chỉ viết lại đúng hàm này.
- Nút tải video: ghi canvas 4 giây ra file .webm để bạn đăng hoặc ghép vào clip dài.
Nhờ tách 2 phần, 10 phong cách có chung nhịp chuyển động. Ghép lại thành 1 clip liệt kê như video trên, nhịp cắt khớp nhau mà không phải canh từng khung.
4 bước dùng bộ prompt
- Mở Claude tại claude.ai (bản miễn phí cũng chạy được), bật tính năng artifact trong phần cài đặt.
- Dán prompt dựng cảnh gốc bên dưới, chờ Claude trả về file HTML. Bấm xem trước để chắc tên lửa bay đúng.
- Trong cùng cuộc trò chuyện, dán 1 prompt phong cách. Muốn kiểu khác thì dán prompt khác.
- Bấm nút tải video trong file để lấy file .webm dài 4 giây, ghép vào CapCut hoặc đăng thẳng lên TikTok.
Prompt dựng cảnh gốc (dán 1 lần trước)
Tạo cho mình 1 file HTML duy nhất, khung 1080×1920 (dọc 9:16), vẽ bằng canvas 2D, không dùng thư viện ngoài.
1. Cảnh: 1 tên lửa đứng trên bệ phóng ở giữa khung, 3 tòa nhà cao thấp khác nhau bên trái và 3 tòa bên phải, mặt đất nằm ở 80% chiều cao khung.
2. Tên lửa gồm: thân hình chữ nhật bo góc, mũi nhọn, 2 cánh tam giác 2 bên đuôi, 1 cửa sổ tròn ở 1/3 thân trên.
3. Animation dài 4 giây, lặp vô hạn: từ 0 đến 0,5 giây tên lửa rung nhẹ ±2px, khói tròn bắt đầu tỏa sang 2 bên bệ phóng.
4. Từ 0,5 đến 4 giây tên lửa bay thẳng lên với gia tốc tăng dần (easeIn bậc 3), lửa dưới đuôi dài ra theo thời gian và nhấp nháy theo hàm sin.
5. Viết toàn bộ chuyển động trong 1 hàm render(t) với t tính bằng giây. Không dùng CSS animation hay setInterval, chỉ requestAnimationFrame gọi render(t).
6. Tách phần vẽ hình thành 1 hàm drawScene(ctx, p, t) riêng (p là tiến độ từ 0 đến 1) để mình đổi phong cách mà không phải sửa chuyển động.
7. Thêm 1 nút “tải video”: dùng MediaRecorder ghi canvas đúng 4 giây ra file .webm.
Lưu ý: muốn đổi chủ thể (xe, máy bay, ly cà phê), chỉ sửa câu 1 và 2. Các prompt phong cách vẫn dùng được vì chúng chỉ sửa hàm drawScene.
3 prompt phong cách dùng ngay
2. Bảng phấn
Nét phấn rung như vẽ tay, kèm mũi tên giải thích lực, hợp clip giáo dục.
Giữ nguyên cảnh và chuyển động, chỉ viết lại drawScene theo phong cách vẽ phấn trên bảng đen:
1. Khung gỗ nâu #8A5A34 dày 16px, mặt bảng xanh #2B4636, phủ vignette tối dần ra 4 góc.
2. Mọi nét vẽ màu trắng ngà rgba(245,245,235,0.9), dày 3px, đầu nét bo tròn.
3. Mỗi nét vẽ 2 lần, mỗi điểm lệch ngẫu nhiên ±1,5px. Đổi seed ngẫu nhiên 10 lần mỗi giây để nét phấn rung như vẽ tay.
4. Chỉ vẽ đường viền: mặt đất, 6 tòa nhà, tên lửa, cửa sổ, khói tròn. Lửa vẽ bằng phấn vàng cam.
5. Góc trên trái viết chữ nghiêng “phóng tên lửa 101” và gạch chân bằng phấn.
6. Từ giây thứ 1: hiện mũi tên vàng hướng lên bên phải tên lửa ghi “lực đẩy”, mũi tên hồng hướng xuống bên trái ghi “trọng lực”, rồi dòng “lực đẩy > trọng lực ✓” dưới tiêu đề. Mũi tên bay theo tên lửa.
7. Đáy bảng có khay phấn gỗ với 2 viên phấn trắng và vàng.
6. Bản vẽ kỹ thuật
Nét trắng trên giấy blueprint, có đường kích thước và khung tên như bản vẽ thật.
Giữ nguyên cảnh và chuyển động, chỉ viết lại drawScene theo phong cách bản vẽ kỹ thuật (blueprint):
1. Nền xanh #1F4FA0. Lưới nhỏ 25px màu trắng độ mờ 12%, lưới lớn 125px độ mờ 28%.
2. Trong 1/3 thời gian đầu, mặt đất và tòa nhà tự vẽ ra dần như bút đang kẻ. Tòa nhà vẽ nét đứt 8px/6px.
3. Tên lửa vẽ nét trắng 3px, có trục đối xứng nét đứt chạy dọc thân.
4. Bên phải tên lửa có đường kích thước 2 đầu gạch, ghi “h = 42 m” xoay dọc.
5. Lửa vẽ bằng nét đứt. Từ giữa clip hiện đường quỹ đạo bay nét đứt màu vàng #F6E04A.
6. Góc dưới phải có khung tên kẻ 2 ô: “tên lửa v1” và “tỉ lệ 1:200 · bản 03”. Góc trên trái ghi “mặt cắt a-a”.
10. Đất sét
Khối bo tròn mềm, chạy 12 khung/giây giật nhẹ như phim stop-motion.
Giữ nguyên cảnh và chuyển động, chỉ viết lại drawScene theo phong cách đất sét stop-motion (claymation):
1. Làm tròn t xuống bội số của 1/12 giây để hình chạy 12 khung mỗi giây như stop-motion.
2. Mỗi khung, mọi hình lệch ngẫu nhiên ±1,6px như vừa được nặn lại bằng tay.
3. Mọi khối bo tròn mềm: tòa nhà bo 18px, thân tên lửa bo 36px ở đầu, mũi là hình elip.
4. Mỗi khối có bóng đổ ấm rgba(80,40,20,0.3) blur 14px lệch xuống 8px, và 1 vệt sáng elip trắng mờ ở góc trên trái.
5. Nền gradient #FFD8B8 xuống #F7B79A. Mặt đất xanh #6DBA6A.
6. Rắc 140 chấm nâu nhỏ độ mờ 12% lên toàn khung như dấu vân tay trên đất sét.
7 phong cách còn lại trong bản đầy đủ
- 1. Flat vector: Màu khối phẳng, không viền, không gradient, kiểu minh hoạ app và landing page.
- 3. Neon phát sáng: Chỉ có nét viền phát sáng trên nền đêm, kiểu synthwave thập niên 80.
- 4. Giấy cắt lớp: Các lớp giấy màu xếp chồng có bóng đổ, nhìn như mô hình thủ công.
- 5. Pixel art: Hình vỡ hạt kiểu game 8-bit, có thanh HUD đo độ cao.
- 7. Truyện tranh: Viền đen dày, chấm halftone, speed line và bong bóng chữ tượng thanh.
- 8. Low-poly 3D: Mọi vật dựng từ tam giác có mặt sáng mặt tối, giống game 3D đời đầu.
- 9. Khối gạch đồ chơi: Mọi thứ xếp từ viên gạch có núm tròn, như mô hình đồ chơi lắp ráp.
Nhận đủ 10 prompt animation
Prompt dựng cảnh gốc và đủ 10 prompt phong cách, kèm hình mẫu từng kiểu, gửi thẳng vào email của bạn.
Mẹo để animation ra đẹp ngay lần đầu
- Chạy prompt dựng cảnh trước, kiểm tra tên lửa bay đúng rồi mới đổi phong cách. Chuyển động sai thì đổi kiểu nào cũng sai theo.
- Mỗi lần chỉ dán 1 prompt phong cách. Dán 2 kiểu cùng lúc Claude dễ trộn màu của kiểu này sang kiểu kia.
- Chỉnh bằng câu ngắn: “lửa dài gấp đôi”, “nền tối hơn 20%”, “chữ vút! to hơn 1,5 lần”.
- Bị lỗi ở bước nào, copy nguyên thông báo lỗi dán lại cho Claude là nó tự sửa.
Kết luận
Làm animation bằng code không khó ở phần viết code nữa, Claude lo phần đó. Phần quyết định là mô tả phong cách đủ cụ thể: mã màu, độ dày nét, bóng đổ, nhịp khung hình. Bộ 10 prompt này đã ghi sẵn những thông số đó, bạn chỉ cần đổi chủ thể cho đúng sản phẩm hoặc câu chuyện của mình.
Đây cũng là tinh thần của khoá AI cho Marketer mình đang chuẩn bị: mỗi bài học là một quy trình bạn mang về dùng ngay cho việc thật. Theo dõi kênh để không bỏ lỡ đợt early bird nhé.
Follow mình để biết thêm nhiều hơn về Marketing & AI tips nhé:
- Tiktok: @vutu.digital
- Facebook: vutudigital
- Website: vutudigital.com