Dùng Codex + Remotion để làm hoạt hình cắt giấy phân lớp phong cách Đường Triều

TL;DR

Tác giả 季白羽 chia sẻ quy trình hoàn chỉnh để làm một đoạn hoạt hình cắt giấy phân lớp phong cách Đường Triều bằng Codex CLI và Remotion. Điểm cốt lõi: không phải tạo một ảnh đẹp, mà là tách nhân vật, kiến trúc và nền thành 4 lớp PNG độc lập, rồi dùng React code trong Remotion để điều khiển từng lớp chuyển động theo tốc độ và biên độ riêng. Kết quả tạo ra chiều sâu 3D thực sự, khác hoàn toàn so với kiểu zoom/pan trên ảnh phẳng mà nhiều người đang làm.

"Phẳng" vs "có chiều sâu" - sự khác biệt mà ai cũng nhìn thấy

Nhiều video theo phong cách "cắt giấy" hiện nay thực ra chỉ là một ảnh duy nhất được phóng to, thu nhỏ, kèm chút di chuyển camera. Nhìn thì có vẻ động, nhưng thiếu hẳn chiều sâu.

Hoạt hình cắt giấy thực sự đòi hỏi mỗi yếu tố trong cảnh - nền, kiến trúc, nhân vật chính, nhân vật phụ, tiền cảnh - phải là một tài sản PNG trong suốt riêng biệt. Sau đó mỗi lớp chuyển động theo nhịp khác nhau: nền di chuyển chậm nhất, nhân vật chính vào cảnh mạnh mẽ nhất, tiền cảnh nhanh hơn để tạo che khuất tự nhiên. Hiệu ứng thị giác tạo ra giống hệt cảm giác "đứng trước một diorama" thật sự.

Bộ công cụ: 7 mảnh ghép trong một pipeline

Pipeline này không dựa vào một ứng dụng duy nhất. Đây là một dây chuyền công cụ chạy hoàn toàn local:

• Codex CLI - bộ điều phối trung tâm. Đọc kịch bản, thiết kế storyboard, generate code dự án, điều chỉnh vị trí nhân vật và thực thi lệnh render. Codex không thay thế các công cụ khác - nó kết nối chúng lại.
• Imagegen - tạo tài sản hình ảnh: nhân vật Đường Triều, cung điện, núi nước mực, trang trí giấy. Luôn generate trên nền xanh lá để Python xử lý thành PNG trong suốt.
• Python + Pillow + NumPy - batch xử lý ảnh: remove green screen, kiểm tra kênh alpha, tách sprite sheet thành từng PNG độc lập.
• F5-TTS - zero-shot voice cloning từ audio tham chiếu, generate file WAV lời bình tiếng Trung. F5-TTS dùng kiến trúc Diffusion Transformer với Flow Matching, RTF khoảng 0.04 trên GPU (nhanh hơn real-time 25 lần).
• Remotion - engine video chính. Dùng React code để điều khiển mọi thứ: vị trí nhân vật, thứ tự vào cảnh, z-index xếp lớp, phụ đề, nhạc nền và âm thanh.
• FFmpeg / ffprobe - kiểm tra kỹ thuật cuối: phân giải, thời lượng, audio track. Extract keyframe để verify bố cục từng frame trước khi giao nộp.
• Chrome / Remotion Studio - preview từng frame trong browser trước khi render chính thức.

Tách cảnh thành 4 lớp độc lập

Trước khi generate bất kỳ ảnh nào, Codex xác định storyboard với hai cảnh chính:

• Cảnh toàn cảnh - hoàng đế là nhân vật lớn nhất, cung nữ hai bên thứ hai, quần thần nhỏ nhất ở phải. Giao thiệp "quy mô Trường An thịnh Đường".
• Cảnh cận cảnh - người bưng hộp lễ vật ở trung tâm, hàng đầu quỳ lạy, hàng sau là tùy tùng. Thể hiện "vạn bang triều cống".

Sau khi xác định storyboard, mỗi cảnh được tách thành đúng 4 lớp:

1. Background Layer - núi sông, cung điện, thành lầu, texture giấy. Chỉ di chuyển nhẹ, push in chậm.
2. Rear Layer - quần thần xa, kiến trúc góc. Biên độ nhỏ, opacity thấp hơn một chút.
3. Subject Layer - hoàng đế hoặc nhân vật chính. Kích thước lớn nhất, vào cảnh mạnh mẽ nhất.
4. Foreground Layer - cung nữ, người quỳ lạy, giấy vụn, băng dán. Di chuyển nhanh hơn để che khuất và tạo chiều sâu.

Quy tắc bất di bất dịch: nhân vật phải là PNG trong suốt riêng lẻ. Không thể animation lớp nếu nhân vật đã được vẽ chung vào background.

Prompt generate nhân vật cần giới hạn chặt chẽ để đảm bảo có thể tách lớp:

"Tạo một nhân vật hoàng đế Đường Triều toàn thân, ngồi trên ngai long điêu khắc, thân nghiêng phải, tay phải giơ lên. Phong cách cổ tịch tuyến miêu Trung Hoa và collage giấy cổ, long bào vàng, nhân vật hoàn chỉnh, viền trắng kiểu cắt giấy. Nền xanh lá thuần, không cung điện, không nhân vật khác, không chữ, không bóng đổ."

Remotion: khi code trở thành camera

Điểm khác biệt lớn nhất so với công cụ edit video truyền thống là Remotion dùng code để tham số hóa toàn bộ animation. Thay vì kéo keyframe thủ công cho từng nhân vật, một dictionary đơn giản điều khiển tất cả:

const roleMotion = {
  primary:   { distance: 78, rise: 55, startScale: 0.86 },
  secondary: { distance: 58, rise: 38, startScale: 0.90 },
  tertiary:  { distance: 38, rise: 22, startScale: 0.95 },
};

Nhân vật primary (hoàng đế) bay vào xa nhất và cao nhất; tertiary (quần thần hàng sau) chỉ nhúc nhích nhẹ. Cùng logic này, thêm nhân vật mới chỉ cần gán role - không cần viết animation mới.

Thứ tự z-index đúng là điều kiện để tạo chiều sâu: background (z:0) → tertiary (z:1-2) → secondary (z:3-4) → primary (z:5) → foreground (z:6+) → phụ đề (z:40). Nhân vật còn được thêm viền trắng và shadow:

filter: `
  drop-shadow(4px 0 #f5eedc)
  drop-shadow(-4px 0 #f5eedc)
  drop-shadow(0 4px #f5eedc)
  drop-shadow(0 18px 9px rgba(20,15,12,.32))
`

Viền trắng tạo cảm giác "cắt giấy"; shadow tối đẩy nhân vật nổi khỏi background. Hai dòng CSS này cộng lại bằng cả phần mềm compositing chuyên nghiệp.

Quan trọng: nhân vật không xuất hiện cùng lúc. delay được đặt lệch nhau để màn hình xây dựng theo thứ tự "nhân vật chính xuất hiện trước, phụ bổ sung, toàn cảnh hoàn chỉnh" - thay vì đổ ào toàn bộ cùng một lúc.

Âm thanh 4 lớp và render

Sau khi bố cục cảnh ổn định, F5-TTS generate từng đoạn lời bình thành WAV riêng, và thời lượng lời bình quyết định độ dài từng cảnh - không phải ngược lại. Lớp âm thanh trong video được chia thành 4 track:

• Lời bình (narration WAV) - quyết định timing cắt cảnh
• Nhạc nền - loop, volume thấp hơn giọng nói
• Chapter SFX - impact hoặc riser khi chuyển cảnh
• Entry SFX - primary dùng impact, secondary dùng whoosh, tertiary dùng tick nhẹ

Sau render, FFmpeg extract keyframe tại giây thứ 5 để kiểm tra bố cục thực tế: đầu/tay/chân nhân vật có bị cắt không, chủ và phụ có đúng tỉ lệ không, phụ đề có đè lên đạo cụ quan trọng không.

Template này dùng được cho chủ đề nào khác?

Kỹ thuật phân lớp này không gắn với đề tài Đường Triều. Bất kỳ cảnh nào có thể tách thành "nền - nhân vật phụ xa - nhân vật chính - tiền cảnh" đều phù hợp: phổ biến lịch sử, khoa học, câu chuyện thương mại, sơ đồ quan hệ nhân vật, phát triển đô thị theo thời gian.

Lợi thế thực sự của pipeline code-first này là tính tái sử dụng: một khi template Remotion đã hoàn thiện, tạo tập tiếp theo chỉ cần thay kịch bản và generate tài sản mới. Codex lo phần còn lại. Đây không phải là chỉnh video - đây là lập trình video.

via 季白羽 trên X