Các Bước Làm Thiết Kế Đồ Họa Chuyển Động 60fps Bằng Remotion & Thực Chiến Từ File Mẫu Pinterest

Tài liệu này hệ thống hóa toàn bộ các bước làm biến ý tưởng, ảnh chụp màn hình và video mẫu trên Pinterest thành đồ họa chuyển động sắc nét ở tốc độ 60 khung hình/giây (60fps) bằng Remotion + Claude Code. Phần đầu giải mã chi tiết từng bước câu lệnh xuất hiện trên màn hình trong các bước làm của Matt Loui; phần tiếp theo trình bày trực tiếp các bước mổ xẻ từ file gốc pinterest_ref.mp4 sang trọn bộ 3 định dạng video mang bảng màu thương hiệu cá nhân của anh Việt (Đen Obsidian – Trắng Kem – Vàng Gold).

I. Nền Tảng Kỹ Thuật: Vì Sao Phải Render Bằng Remotion 60fps Trên Nhân Trình Duyệt?

1.1. Sự khác biệt giữa Vẽ Điểm Ảnh 30fps và Nội Suy Tọa Độ Thực Sub-Pixel 60fps

Khi tạo đồ họa chuyển động có chứa chữ viết, con số và giao diện phần mềm, các mô hình sinh video bằng điểm ảnh (như Sora, Runway hay Veo) thường làm nhòe nét chữ hoặc sai lệch số liệu. Ngược lại, nếu dùng thư viện vẽ ảnh tĩnh thông thường trong Python (như PIL/OpenCV ở mức 30fps), mọi tọa độ vị trí bị ép về số nguyên (int). Khi khung hình dịch chuyển chậm hoặc phóng to nhẹ, hình ảnh sẽ bị giật từng nấc 1 pixel và thiếu độ mượt quang học.

1.2. Điểm Mấu Chốt Cốt Lõi: Câu Lệnh Mở Khóa Chế Độ Hỏi Ngược Của AI

Trong mọi câu lệnh của các bước làm này, câu cuối cùng luôn là:

Ask me as many questions as you need to nail a really cool motion animation.

Khi không có câu này, AI sẽ tự đoán màu sắc, tự đoán tốc độ nhanh/chậm và viết code ngay lập tức, dẫn đến kết quả chung chung. Khi đưa câu lệnh này vào, công cụ lập trình chuyển sang trạng thái Khảo sát yêu cầu thông qua bảng trắc nghiệm 4 mục (Style, Pacing, Colors, Length), giúp người dùng chốt chính xác chất liệu 3D phát sáng, thời lượng và bảng màu trước khi dòng code đầu tiên được viết ra.

II. Giải Mã Đầy Đủ Các Bước Có Prompt Trên Màn Hình Video Gốc (Input + Prompt → Output & Vì Sao)

Tổng hợp 4 màn hình gõ Prompt trong video gốc Bước 0 → Bước 3

Ảnh chụp trực tiếp từ màn hình thao tác Claude Code của Matt Loui qua các bước khởi tạo và nhập câu lệnh.

Tổng hợp Input đính kèm, Bảng 4 Tab câu hỏi & Output Inputs & UI Modal

Cách kết hợp file quay màn hình, ảnh chụp tĩnh, bảng câu hỏi 4 Tab và 3 bước chỉnh sửa cuối trong CapCut.

Bước 0: Cài Đặt & Khởi Tạo Dự Án Remotion Trong Claude Code (Phút 02:17 – 03:19)

Lệnh gõ trên màn hình (Phút 02:51):

npx create-video@latest
# Hoặc nếu đã có sẵn thư mục dự án, cài thêm bộ kỹ năng Remotion bằng lệnh:
npx skills add remotion-dev/skills

Màn hình Bước 0: Khởi tạo dự án bằng lệnh npx create-video@latest Phút 02:51

Bước 1 (Phương Pháp 1 — "Record It"): Biến Đoạn Quay Màn Hình Thành Đồ Họa Chuyển Động (Phút 03:22 – 05:03)

Nguyên văn Prompt trên màn hình (Phút 03:54):

attached is a quick screen recording of CapCut's Edit Pilot. I want this turned into a cool motion graphic. Use the same design but animate it using remotion. Ask me as many questions as you need to nail a really cool motion animation.

Dịch nghĩa: "Đính kèm là đoạn quay màn hình nhanh tính năng Edit Pilot của CapCut. Tôi muốn biến nó thành một đồ họa chuyển động thật ngầu. Hãy giữ nguyên thiết kế giống như vậy nhưng làm hoạt hình bằng Remotion. Hãy hỏi tôi bao nhiêu câu hỏi tùy thích để làm ra một hoạt ảnh thật xuất sắc."

Màn hình gõ Prompt 1 & File đính kèm Phút 03:54

Bảng câu hỏi 4 Tab (Chọn Glossy 3D) Phút 04:10

Đối chiếu Video Quay Màn Hình Gốc vs. Đồ Họa Remotion Before & After

Kết quả Đầu ra Bước 1: Thanh Prompt Bar 3D Neon Teal Output 4K

Bước 2 (Phương Pháp 2 — "Screenshot It"): Biến 3 Ảnh Chụp Màn Hình & Kịch Bản Lời Nói Thành Sơ Đồ Các Bước Làm (Phút 05:04 – 05:54)

Nguyên văn Prompt trên màn hình (Phút 05:40):

You nailed this. This is one of the best motion graphics I've seen you make. From movements, to replication of the real thing, to professional smoothness and more... well done.

I want to create another motion animation for the same editing project. My script is this:
In this capcut pc tutorial I'll show you how to generate product images and creative b-roll in the same spot, it's capcut's video studio. Then we're going to take all of this into capcut pc as ai ai ad maker. 

I've attached some screen shots of video studio (the image gen and b-roll). I've also attached an image of our capcut time-line.

Ideally, the animation shows the flow of the video. Perhaps a numbered list? Or a synopsis workflow?

Ask me questions so we can get this animation looking solid.

Dịch nghĩa: "Bạn làm chuẩn lắm. Đây là một trong những đồ họa chuyển động đẹp nhất tôi từng thấy bạn tạo ra. Từ chuyển động, độ giống bản thật, cho đến độ mượt chuyên nghiệp... làm rất tốt. Tôi muốn tạo thêm một hoạt ảnh nữa cho cùng dự án dựng phim này. Kịch bản của tôi như sau: 'Trong hướng dẫn CapCut PC này, tôi sẽ chỉ bạn cách tạo ảnh sản phẩm và B-roll sáng tạo ở cùng một nơi là CapCut Video Studio. Sau đó chúng ta sẽ đưa tất cả vào CapCut PC với AI Ad Maker.' Tôi có đính kèm vài ảnh chụp màn hình của Video Studio (phần tạo ảnh và B-roll) cùng ảnh chụp thanh cắt ghép CapCut. Lý tưởng nhất là hoạt ảnh thể hiện được luồng đi của video. Có thể là danh sách đánh số? Hoặc sơ đồ tóm tắt các bước làm? Hãy hỏi tôi các câu hỏi để chúng ta làm cho hoạt ảnh này thật chất lượng."

3 Ảnh Chụp Màn Hình Đính Kèm & Sơ Đồ Đầu Ra Phút 05:18

Kết quả Đầu ra Bước 2: Sơ đồ 3 Bước Các Bước Làm Phút 05:40

Bước 3 (Phương Pháp 3 — "Reference It"): Kết Hợp Video Mẫu Pinterest + 5 Ảnh Chụp Giao Diện Thành Video Quảng Cáo 25 Giây (Phút 05:55 – 08:14)

Nguyên văn Prompt trên màn hình (Phút 06:58):

this video contains amazing animation and motion design. I'd like a video like this for clickt.link

Ask me as many questions as you need in order to get this right. The final output should be 25 seconds. I'm also attaching some screenshots of clickt's internal interface (you can't access these, so they should help).

Dịch nghĩa: "Video này chứa hoạt ảnh và thiết kế chuyển động rất đẹp. Tôi muốn một video giống như thế này cho clickt.link. Hãy hỏi tôi bao nhiêu câu hỏi tùy thích để làm chuẩn nhất. Đầu ra cuối cùng cần dài 25 giây. Tôi cũng đính kèm một số ảnh chụp màn hình giao diện nội bộ của Clickt (bạn không tự truy cập vào trong đó được, nên những ảnh này sẽ giúp ích)."

5 Ảnh Chụp Nội Bộ Clickt.link UI Inputs

Màn Hình Đính Kèm 6 File & Prompt 3 Phút 06:58

Đầu Ra Promo 25 Giây Của Clickt Output 25s

Bước 4 & 5: Lệnh Xuất Bản 4K & 3 Bước Chỉnh Sửa Cuối Quang Học Trong CapCut (Phút 08:20 – 14:36)

Sau khi kiểm tra chuyển động trong trình xem trước, Matt Loui yêu cầu xuất file 4K về máy tính bằng câu lệnh:

Please render a 4K copy onto my computer

Tiếp theo, để xóa bỏ cảm giác "cứng" của đồ họa máy tính, file MP4 4K được đưa vào CapCut thực hiện 3 bước hoàn thiện trong 5 phút:

Thông số Chroma Quirk + Circle Mask Reverse Feather: 15

Thông số Radial Blur 2 (Glow: 0, Filter: 0) Optical Edge

Phủ Reverb: 70 cho toàn bộ các lớp âm thanh SFX Reverb: 70%

Cách xếp 3 tầng âm thanh (Whoosh, UI, Line) trên Thanh Cắt Ghép 3-Layer SFX

Bản Video Demo Thực Tế: Tái Hiện Đủ 3 Phương Pháp Của Matt Loui Ở 60fps

Cảnh 1 (0s–4s): Record It Way 1

Cảnh 2 (4s–8s): Screenshot It Way 2

Cảnh 3 (8s–12s): Reference It Way 3

III. Các Bước Làm Thực Chiến: Từ File Mẫu Pinterest .MP4 Đến Bộ Video 60fps Thương Hiệu Anh Việt

3.1. Giải Phẫu File Video Mẫu Gốc Tải Từ Pinterest (pinterest_ref.mp4)

File mẫu gốc được Matt Loui sử dụng trong Bước 3 là một video Motion Typography tải từ Pinterest (https://www.pinterest.com/pin/333759022406800725/) với độ phân giải 736×414 @ 30fps, thời lượng 15 giây, mang tông màu Xanh Lục Bảo (#031F1A / #10B981 / #BEF264).

File Video Mẫu Gốc Từ Pinterest (Input) 736×414 • 30fps

Video gốc tải trực tiếp từ Pinterest làm khuôn mẫu nhịp điệu và kỹ xảo chuyển cảnh.

Bảng Bóc Tách 16 Khung Hình Của Video Pinterest Gốc 16 Keyframes Grid

Trích xuất 16 mốc thời gian để đo đạc chính xác vị trí chữ, quỹ đạo vòng tròn và góc nghiêng 3D.

3.2. Sáu Bước Kỹ Thuật Chuyển Hóa Từ File Mẫu .MP4 Sang Bộ Video 60fps Thương Hiệu Cá Nhân

3.3. Bảng Đối Chiếu Chi Tiết 6 Phân Cảnh: Từ Bản Mẫu Pinterest Sang Bản Thương Hiệu Tiếng Việt Vàng Gold

IV. Trình Chiếu Trực Tuyến Trọn Bộ Các Bản Video Demo Cuối Cùng

4.1. Đối Chiếu Trực Diện: File Mẫu Pinterest Gốc (30fps) vs. Bản Dựng Lại Nguyên Mẫu Bằng Remotion (60fps)

Trước khi thay đổi sang bảng màu thương hiệu, video mẫu Pinterest được lập trình lại 1:1 bằng mã nguồn React/Remotion (PinterestMotionClone.tsx) để kiểm chứng độ chính xác của toàn bộ 6 phân cảnh ở độ phân giải Full HD 1920×1080 @ 60fps:

Khung hình 60fps: Orbit Rings & "Sketch" Cảnh 2 Clone

Khung hình 60fps: 3D Floating Bento UI Dashboard Cảnh 5 Clone

4.2. Bản Chính Thức Số 1 — Màn Hình Ngang 16:9 Thương Hiệu Anh Việt (Đen Obsidian – Trắng Kem – Vàng Gold • 100% Tiếng Việt @ 60fps)

Bản hoàn thiện dành cho video ngang YouTube, bài giảng khóa học và màn hình trình chiếu lớn, sử dụng bảng màu Đen Obsidian (#08090C) – Trắng Kem (#FAF8F5) – Vàng Gold (#FACC15 / #F59E0B):

Cảnh 2 (16:9): Giao Điểm 4 Vòng Quỹ Đạo Vàng Gold Điểm neo cảm xúc

Cảnh 5 (16:9): Bảng Điều Khiển 3D Đen – Vàng Gold Creator Engine 60fps

4.3. Bản Chính Thức Số 2 — Màn Hình Dọc 9:16 Dành Cho Reels, TikTok & CapCut Shorts (1080×1920 @ 60fps)

Không phải là bản cắt xén hai bên từ video ngang, bản dọc 9:16 được tính toán lại toàn bộ tọa độ khung hình theo chiều dọc: bán kính vòng quỹ đạo, cỡ chữ Tiếng Việt và khoảng cách các thẻ 3D đều nằm gọn trong vùng an toàn hiển thị của màn hình điện thoại.

Bản Dọc 9:16 (Reels / TikTok / Shorts) 1080×1920 • 60.0 fps

File: viet_gold_9x16_60fps.mp4 — Sắp xếp gọn bố cục dọc 1080×1920 ở tốc độ 60fps.

Ảnh Chụp Khung Hình Dọc 9:16 (Cảnh 2 Orbit Rings) Safe-Zone 9:16

Cụm 4 vòng quỹ đạo và tiêu đề "Điểm neo cảm xúc" được căn giữa vùng nhìn chuẩn của điện thoại.

4.4. Bản Chính Thức Số 3 — Gói Lớp Phủ Nền Trong Suốt 100% (Apple ProRes 4444 Alpha Channel Cho CapCut)

Để người dựng phim có thể thả trực tiếp hiệu ứng 4 Vòng Quỹ Đạo Vàng Gold + Sao Chổi & Chữ "Điểm neo cảm xúc" đè lên trên lớp video quay người thật trong CapCut mà không cần dùng công cụ tách nền hay chế độ hòa trộn làm nhạt màu vàng, hệ thống đã xuất riêng gói video có kênh Alpha trong suốt: