Motion 00 — Tổng Hợp Toàn Bộ Cuộc Trò Chuyện, Mẫu Reference Đã Tải Về, Các Phiên Bản Thành Phẩm & Kho Mã Nguồn .TSX (Motion 01 → 05)
Trang điều phối trung tâm (motion00.html) đánh số và liên kết toàn bộ hệ sinh thái Thiết Kế Đồ Họa Chuyển Động Bằng Mã Lệnh Remotion 60fps từ motion01.html đến motion05.html: bao gồm 8 cuộc trò chuyện gốc & nhánh, 11 file video Reference đã tải về máy, 12 phiên bản video sản phẩm đã kết xuất và 8 file mã nguồn .tsx (có thể xem trực tiếp, copy 1-chạm hoặc tải về ngay tại trang này).
05
Chuyên đề HTML
(
(
motion01 → 05)08
Cuộc trò chuyện
(
(
#C01 → #C08)11
Video Reference gốc
(
(
#REF-01 → #REF-11)12
Bản thành phẩm MP4
(
(
#PROD-01 → #PROD-12)08
Khuôn mã nguồn
(
.TSX(
15.835 dòng lệnh)
#PROD-09 • V3 CLEAN
▶ YouTube Sabaki • Bấm để phát
Motion 05 & 02 — V3 Ultra-Clean (60fps)
#PROD-12 • 9:16 VI
▶ YouTube Sabaki • Bấm để phát
Motion 04 — 9:16 Tiếng Việt (47.3s)
#PROD-10 • RISO
▶ YouTube Sabaki • Bấm để phát
Motion 03 — Claude Risograph (60fps)
#PROD-04 • GOLD 9:16
▶ YouTube Sabaki • Bấm để phát
Motion 01 — Vàng Gold 9:16 (60fps)
Phần I — Phòng Trưng Bày Đánh Số 12 Phiên Bản Thành Phẩm Đã Tạo Ra (#PROD-01 → #PROD-12) + Link .TSX
Mỗi phiên bản thành phẩm dưới đây đều được gắn mã số #PROD-01 → #PROD-12, nhúng trình phát trực tiếp, thông số kết xuất và gắn kèm link mở/tải file mã nguồn .TSX đã tạo ra nó:
1.1. Nhóm Thành Phẩm Motion 01 — 4 Video 60fps (#PROD-01 → #PROD-04)
#PROD-01
1920×1080 • 60fps • 12.0s • 5.71MB
▶ YouTube Sabaki • Bấm để phát
Bản Demo 3 Bước Quy Trình Matt Loui (matt_loui_remotion_60fps_demo.mp4)
Tái hiện 3 cảnh minh họa cốt lõi từ video của Matt Loui ở chuẩn 60fps: (1) Record It, (2) Screenshot It, (3) Reference It với hiệu ứng 3D Perspective và Optical Flow mượt.
#PROD-02
1920×1080 • 60fps • 15.0s • 4.03MB
▶ YouTube Sabaki • Bấm để phát
Bản Tái Tạo Mẫu Reference #REF-01 Ở 60fps (pinterest_recreated_60fps.mp4)
Dựng lại từ mẫu
#REF-01 bằng toán học lượng giác trên Remotion 60fps: Vòng xoay 12 icon quỹ đạo tròn, cuộn danh sách chữ và Bento Grid 3D.
#PROD-03
1920×1080 • 60fps • 15.0s • 4.61MB
▶ YouTube Sabaki • Bấm để phát
Bản Thương Hiệu Anh Việt Vàng Gold Ngang 16:9 (viet_gold_16x9_60fps.mp4)
Chuyển hóa ngôn ngữ chuyển động của mẫu
#REF-01 sang bảng màu Đen Obsidian #07090E + Vàng Gold #FACC15 và nội dung Tiếng Việt thương hiệu anh Việt (bố cục 16:9).
#PROD-04
1080×1920 • 60fps • 15.0s • 4.22MB
▶ YouTube Sabaki • Bấm để phát
Bản Thương Hiệu Anh Việt Vàng Gold Dọc 9:16 (viet_gold_9x16_60fps.mp4 + Alpha WebM)
Phiên bản dọc 9:16 tối ưu cho Reels/TikTok/Shorts kèm file
viet_gold_orbit_alpha_preview.webm xuất nền trong suốt (Alpha Channel) để đè trực tiếp lên video quay thật trong CapCut/Premiere.1.2. Nhóm Thành Phẩm Motion 02 & Motion 05 — Hành Trình Tiến Hóa V1 (27s) → V2 (Pre-Cue 10s) → V3 (Ultra-Clean 10s) (#PROD-05 → #PROD-09)
#PROD-09 • BẢN V3 ULTRA-CLEAN (MỚI NHẤT)
1080×1920 • 60fps • 10.0s • 1.37MB
▶ YouTube Sabaki • Bấm để phát
Bản V3 Ultra-Clean — 7 Cảnh Tách Bạch • 85% Không Gian Thở • 0% HUD Rác
Áp dụng 5 Quy Luật Attention Budgeting: Xóa sạch 100% Header/Subtitle/Timecode gây nhiễu; mỗi thời điểm chỉ có 1 tiêu điểm duy nhất; hạt mồi Pre-Cue xuất hiện trước giọng đọc 10–14 frames rồi tự thu dọn trước khi chữ chính bung ra.
Xem Lưới 7 Cảnh Tách Bạch Bản V3 (v3_clean_7scenes_showcase.jpg)
#PROD-08 • BẢN V2 PRE-CUE CHOREOGRAPHY
1080×1920 • 60fps • 10.0s • 7.28MB
▶ YouTube Sabaki • Bấm để phát
Bản V2 Continuous World Canvas & Pre-Cue (motion02_v2_precue_10s_9x16_60fps.mp4)
Bước đệm tiến hóa từ V1 sang V3: Đã đưa các cơ chế từ
#REF-08 (pin_07) và #REF-09 (pin_08) như Figma Box, 6 Cursors và Whip-Pan vào, nhưng vẫn giữ Header + Subtitle bar nên được tinh gọn tiếp ở Bản V3.Xem Lưới Chuyển Cảnh Bản V2 (v2_precue_transitions_closeup.jpg)
#PROD-05
1080×1920 • 60fps • 27.0s • 9.36MB
▶ YouTube Sabaki • Bấm để phát
Bản V1.1 — Full Motion Graphic 9:16 (27 Giây • 9 Phân Cảnh)
Chuyển toàn bộ 27 giây lời thoại của
#REF-10 thành đồ họa chuyển động 100% dọc 9:16 với 9 màn tương ứng 9 ý niệm ngữ nghĩa + âm thanh 4 lớp.Xem Lưới 9 Màn 9:16 (motion02_9x16_9scenes_grid.jpg)
#PROD-06
1080×1920 • 60fps • 27.0s • 14.07MB
▶ YouTube Sabaki • Bấm để phát
Bản V1.2 — Hybrid Talking Head + Motion Graphic 9:16 (27 Giây)
Kết hợp khung hình PiP quay thật của anh Việt với các lớp đồ họa chuyển động 60fps biến thiên theo từng nhịp nhấn giọng trong suốt 27 giây.
Xem Lưới 9 Màn Hybrid (motion02_hybrid_9scenes_grid.jpg)
#PROD-07
1920×1080 • 60fps • 27.0s • 10.20MB
▶ YouTube Sabaki • Bấm để phát
Bản V1.3 — Full Motion Graphic Widescreen 16:9 (27 Giây)
Phiên bản ngang 1920×1080 @ 60fps dàn trải không gian rộng cho YouTube / Màn hình LED bài giảng từ cùng một nguồn code
VietSemanticEra27s.tsx.Xem Lưới 9 Màn 16:9 (motion02_16x9_9scenes_grid.jpg)
1.3. Nhóm Thành Phẩm Motion 03 (Claude Motion Risograph) & Motion 04 (Chuyển Đổi 16:9 → 9:16 Tiếng Việt) (#PROD-10 → #PROD-12)
#PROD-10 • MOTION 03
1080×1920 • 60fps • 10.0s • 3.03MB
▶ YouTube Sabaki • Bấm để phát
Bản Claude Motion Risograph + Hybrid Talking Head 10s (qc_fb9_claude_motion_10s.mp4)
Kết hợp 7 phân cảnh Editorial Risograph (giấy kem
#F3ECDD, cam đất #E2683A, xanh cổ vịt #1E5A64, hạt giấy SVG) với các cú cắt Cận mặt 100% của anh Việt theo nhịp câu hỏi/khẳng định.Xem Lưới 7 Cảnh Risograph (viet_riso_7scenes_showcase.jpg)
#PROD-11 • BẢN ĐỐI CHỨNG V0
1920×1080 • 30fps • 47.3s • 12.43MB
▶ YouTube Sabaki • Bấm để phát
Bản Thử Nghiệm V0 Bằng Python PIL 16:9 (pinterest_remake_python_pil_16x9.mp4)
Bản dựng thử bằng Python PIL (tọa độ số nguyên, không có Sub-pixel Anti-aliasing và thiếu Motion Blur). Dùng làm mẫu đối chứng để Opus mổ xẻ 16 nguyên nhân khiến chuyển động bị cứng.
#PROD-12 • MOTION 04 FINAL
1080×1920 • 47.3s • 25.32MB
▶ YouTube Sabaki • Bấm để phát
★ Bản Thành Phẩm 9:16 Tiếng Việt 9 Phân Cảnh (pinterest_viet_9x16_final.mp4)
Bản hoàn chỉnh khắc phục toàn bộ 16 điểm nghẽn Optical Flow: Sub-pixel AA, 6-Layer Temporal Motion Blur, Word-by-Word 3D Masked Reveal, Spring Damping chuẩn vật lý và Bảng Biến
Tweaks Tiếng Việt.Xem Khung Hình Bento 3D & Smart Home (viet9x16_scene6_bento_3d.jpg)
Phần II — Danh Mục Đánh Số 11 File Video Reference Đã Tải Về (#REF-01 → #REF-11)
Toàn bộ các file video mẫu tham khảo (Reference Reels / Shorts / Pinterest / YouTube & Video gốc đầu vào) đã được tải về lưu trữ nội bộ trong assets/ kèm lưới giải phẫu khung hình (Storyboard Contact Sheet) để bạn xem trực tiếp và đối chiếu kỹ thuật chuyển động:
2.1. Mẫu Gốc Trung Tâm & 8 Mẫu Kỹ Thuật Chuyển Động Đã Tải Về (#REF-01 → #REF-09)
#REF-01
736×414 • 30fps • 47.3s • 1.85MB
▶ YouTube Sabaki • Bấm để phát
Mẫu Gốc Trung Tâm (Pin 333759022406800725) — Radial Orbit & 3D Bento Grid
Mẫu tham khảo cốt lõi cho cả Motion 01 và Motion 04: Vòng tròn 12 icon xoay quỹ đạo lượng giác, danh sách cuộn dọc 3D, lưới Bento nghiêng phối cảnh 3D và bảng điều khiển Smart Home.
Xem Lưới Giải Phẫu Storyboard (pinterest_storyboard_grid.jpg)
#REF-02
736×414 • 30fps • 48.1s • 2.33MB
▶ YouTube Sabaki • Bấm để phát
Mẫu Pin 01 (858709853990669408) — Vertical Wheel Picker & 3-Sphere Blending
Kỹ thuật Vòng quay cuộn dọc (Slot-Machine Wheel Picker) khóa dòng chữ mục tiêu ở tâm kết hợp 3 khối cầu quang học mờ giao thoa nhập làm một. Ứng dụng vào Màn 4 của Motion 02.
Xem Lưới Giải Phẫu 16 Khung Hình (pin_01_grid.jpg)
#REF-03
736×414 • 30fps • 50.5s • 3.65MB
▶ YouTube Sabaki • Bấm để phát
Mẫu Pin 02 (333759022407655827) — Radial Tick-Mark Dial & Staggered File Tree
Vòng xoay La bàn chia vạch kỹ thuật (Radial Dial) kết hợp Sơ đồ cây phân cấp bậc thang (Cascading Indent File Tree) mở từng nhánh mượt mà. Ứng dụng vào Màn 6 của Motion 02.
Xem Lưới Giải Phẫu 16 Khung Hình (pin_02_grid.jpg)
#REF-04
736×414 • 30fps • 20.1s • 1.09MB
▶ YouTube Sabaki • Bấm để phát
Mẫu Pin 03 (962785226611831867) — 3D Glass Rolodex Stack & Isometric Grid Tilt
Chồng thẻ kính mờ xếp lớp theo chiều sâu trục Z (3D Rolodex Stack) và mặt phẳng lưới nghiêng Isometric gom các mô-đun về khối trung tâm. Ứng dụng vào Màn 5 của Motion 02.
Xem Lưới Giải Phẫu 16 Khung Hình (pin_03_grid.jpg)
#REF-05
726×396 • 30fps • 12.7s • 0.26MB
▶ YouTube Sabaki • Bấm để phát
Mẫu Pin 04 (72761350251141725) — Backlit Aura & Hard Background Invert
Chữ lớn phát hào quang trên nền tối, con trỏ gõ chữ và cú đảo nền âm bản tức thì (Hard Background Invert Đen ↔ Trắng). Ứng dụng làm cú chốt thị giác ở Màn 1 & Stage 6 của Motion 02/05.
Xem Lưới Giải Phẫu 16 Khung Hình (pin_04_grid.jpg)
#REF-06
736×414 • 30fps • 9.0s • 0.31MB
▶ YouTube Sabaki • Bấm để phát
Mẫu Pin 05 (1125829606877714781) — Oblique Cylindrical Drum & Mechanical Snap
Trục trống chữ 3D nghiêng chéo
-8° xoay tốc độ cao rồi khóa lẫy cơ học thẳng hàng 0° tại tâm (Mechanical Snap). Ứng dụng trực tiếp vào Stage 4 ("DỰ ĐOÁN") của Motion 02 & Motion 05.Xem Lưới Giải Phẫu 16 Khung Hình (pin_05_grid.jpg)
#REF-07
736×414 • 30fps • 14.8s • 1.05MB
▶ YouTube Sabaki • Bấm để phát
Mẫu Pin 06 (778911698106657356) — Frosted Glass Pill & Rack Focus Blur-to-Sharp
Viên nang kính mờ (Frosted Glass Pill) bung mở thành bảng biểu đồ tăng trưởng 3D và hiệu ứng lấy nét chuyển tiêu cự (Rack Focus). Ứng dụng vào Màn 8 & Màn 9 của Motion 02.
Xem Lưới Giải Phẫu 16 Khung Hình (pin_06_grid.jpg)
#REF-08
744×408 • 30fps • 62.0s • 5.29MB
▶ YouTube Sabaki • Bấm để phát
Mẫu Pin 07 (967077720007189801) — Circle-Expand Wipe, Diagonal Rip & Lead-Char Seed
Mẫu chuẩn mực về Mồi Cảnh (Pre-Cue Micro-Choreography): Chấm tròn nở rộng nuốt màn hình, vết xé chéo đổi nền và chữ cái đầu rơi xuống làm hạt mồi dẫn mắt trước khi câu chữ bung ra.
Xem Lưới Giải Phẫu Micro-Grid (pin_07_micro_grid.jpg)
#REF-09
736×414 • 30fps • 70.0s • 5.07MB
▶ YouTube Sabaki • Bấm để phát
Mẫu Pin 08 (1027242996274400557) — Figma Selection Box, 6 Swarming Cursors & Whip-Pan
Khung chọn kiểu Figma có 4 nút góc kéo rộng mở chữ, 6 con trỏ chuột đa sắc tụ hội kéo khung kính, Elastic Split tách dòng và cú Whip-Pan ngang tốc độ cao có Motion Blur.
Xem Lưới Giải Phẫu Micro-Grid (pin_08_micro_grid.jpg)
2.2. Hai Video Quay Thật Đầu Vào & Reference Claude Motion Risograph (#REF-10 → #REF-11)
#REF-10
1080×1920 • 24fps • 27.0s • 19.91MB
▶ YouTube Sabaki • Bấm để phát
Video Quay Thật Đầu Vào 27 Giây — "Kỷ Nguyên AI Ngữ Nghĩa" (qc_offline_27s_input.mp4)
File quay Talking-Head thực tế của anh Việt dùng làm đầu vào âm thanh + hình ảnh để chuyển đổi thành 5 phiên bản sản phẩm ở Motion 02 và Motion 05 (Full 9:16, Hybrid 9:16, Full 16:9, V2 Pre-Cue 10s, V3 Ultra-Clean 10s).
Xem Lưới 9 Phân Cảnh Video Gốc (qc_offline_27s_grid.jpg)
#REF-11
1080×1920 • 24fps • 10.0s • 4.00MB
▶ YouTube Sabaki • Bấm để phát
Video Đầu Vào 10 Giây (qc_fb9_input_10s.mp4) & Reference Jay E (@robonuggets)
10 giây đầu video quảng cáo dùng để kết hợp với phong cách Claude Motion Risograph từ kênh của Jay E (
@robonuggets) tạo nên sản phẩm Hybrid 60fps ở Motion 03.Xem Contact Sheet Giải Phẫu Reference Jay E (jaye_contact_sheet_1.jpg)
Phần III — Bàn Đối Chiếu Trực Quan: Mẫu Reference Gốc (Trái) ↔ Thành Phẩm Đã Tạo Ra (Phải)
Để tiện kiểm định chất lượng chuyển động ngay trên một khung nhìn, dưới đây là 2 cặp đối chiếu trực tiếp giữa File Reference gốc đã tải về và Bản Thành Phẩm Tiếng Việt:
[BÊN TRÁI] #REF-01 — MẪU GỐC PINTEREST 16:9 (47.3s)
[BÊN PHẢI] #PROD-12 — BẢN REMOTION 9:16 TIẾNG VIỆT (47.3s)
[BÊN TRÁI] #REF-08 — MẪU PIN_07 PRE-CUE CHOREOGRAPHY (62.0s)
[BÊN PHẢI] #PROD-09 — BẢN V3 ULTRA-CLEAN 10S 9:16 60FPS
Phần IV — Kho 8 File Mã Nguồn Remotion .TSX (#TSX-01 → #TSX-08 • Tổng Cộng 15.835 Dòng Lệnh)
Toàn bộ 8 file mã nguồn Remotion Composition .tsx đã được sao lưu trực tiếp vào thư mục ./assets/tsx/ của repo course. Bạn có thể bấm "Mở / Tải .TSX", bấm "👁️ Xem & Copy Code" ngay bên dưới, hoặc mở trực tiếp trong Remotion Studio trên máy:
| Mã Số | Tên File .TSX & Quy Mô |
Chức Năng, Kiến Trúc Chuyển Động & Bảng Biến Tweaks |
Sản Phẩm Kết Xuất | Thao Tác Nhanh |
|---|---|---|---|---|
| #TSX-01 |
MattLouiSaaSDemo.tsx1.906 dòng • 62.8 KB |
Tái hiện 3 bước quy trình SaaS Demo từ video của Matt Loui (Record It → Screenshot It → Reference It) ở chuẩn 1920×1080 @ 60fps. |
#PROD-01(Motion 01) |
↗ Mở / Tải .TSX |
| #TSX-02 |
PinterestMotionClone.tsx1.846 dòng • 56.7 KB |
Bản tái tạo mẫu #REF-01 ở 60fps: Vòng tròn 12 icon xoay quỹ đạo lượng giác (Math.cos/sin), danh sách cuộn dọc và lưới Bento 3D. |
#PROD-02(Motion 01) |
↗ Mở / Tải .TSX |
| #TSX-03 |
VietBrandPinterestGold.tsx1.943 dòng • 60.3 KB |
Bộ nhận diện thương hiệu anh Việt (Đen Obsidian #07090E + Vàng Gold #FACC15) hỗ trợ đa tỷ lệ 16:9, 9:16 và xuất Alpha WebM trong suốt. |
#PROD-03, #PROD-04(Motion 01) |
↗ Mở / Tải .TSX |
| #TSX-04 |
VietSemanticEra27s.tsx3.058 dòng • 98.5 KB |
Kịch bản 9 màn (27 giây • 1.620 frames @ 60fps) khớp từng âm tiết bài giảng "Kỷ Nguyên AI Ngữ Nghĩa", kết xuất đồng thời 3 phiên bản Full 9:16, Hybrid 9:16 và Full 16:9. | #PROD-05, #PROD-06, #PROD-07(Motion 02) |
↗ Mở / Tải .TSX |
| #TSX-05 |
VietContinuity10s.tsx2.119 dòng • 80.2 KB |
Bản V2 (10 giây • 600 frames @ 60fps): Tích hợp Continuous World Canvas, hạt mồi Pre-Cue trước giọng đọc 10–14 frames, Figma Selection Box, 6 Swarming Cursors & Whip-Pan. | #PROD-08(Motion 02) |
↗ Mở / Tải .TSX |
| #TSX-06 |
VietClaudeMotionRiso10s.tsx847 dòng • 27.5 KB • ★ Có Tweaks |
Khuôn Thiết Kế Gốc Motion 03: Phong cách Claude Motion Risograph (nền kem #F3ECDD, cam #E2683A, xanh #1E5A64, hạt giấy SVG) + Hybrid Talking Head + Bảng Biến Tweaks ở đầu file. |
#PROD-10(Motion 03) |
↗ Mở / Tải .TSX |
| #TSX-07 |
PinterestViet9x16.tsx2.700 dòng • 85.6 KB • ★ Có Tweaks |
Khuôn Thiết Kế Gốc Motion 04: Chuyển đổi mẫu 16:9 (47.3s • 9 phân cảnh) sang 9:16 Tiếng Việt với Sub-pixel AA, 6-Layer Temporal Motion Blur, 3D Masked Word Reveal & Bảng Biến Tweaks (PinterestViet9x16Props). |
#PROD-12(Motion 04) |
↗ Mở / Tải .TSX |
| #TSX-08 |
VietCleanV3_10s.tsx1.416 dòng • 52.3 KB • ★ Có Tweaks |
Khuôn Thiết Kế Gốc Motion 05 (Bản V3 Ultra-Clean): 7 cảnh tách bạch, ≥85% Negative Space, 0% HUD rác, 4 bộ lọc True Velocity SVG Motion Blur & Bảng Biến Tweaks (VietCleanV3Props) ngay đầu file. |
#PROD-09(Motion 05 & 02) |
↗ Mở / Tải .TSX |
Đang tải mã nguồn .TSX...
Phần V — Bản Đồ 5 Trang Tài Liệu (motion01 → motion05) & 8 Cuộc Trò Chuyện Đã Thực Hiện
5.1. 5 Trang Chuyên Đề HTML Đã Xuất Bản Lên Repo Course
MOTION 01
1.152 dòng HTML
Quy Trình Remotion 60fps, Giải Mã Prompt Matt Loui & Bộ Video Thương Hiệu Vàng Gold
Giải thích vì sao phải render 60fps trên nhân trình duyệt, bóc tách 3 bước làm từ video gốc của Matt Loui và tái tạo mẫu Reference số #01 sang bộ nhận diện anh Việt (16:9 & 9:16).
MOTION 02
1.649 dòng HTML
Từ 27 Giây Video Gốc + SRT Sang 3 Bản 60fps, 8 Mẫu Reference & Tiến Hóa V1 → V2 → V3
Biến 27s đầu video "Kỷ Nguyên AI Ngữ Nghĩa" thành 3 phiên bản (Full 9:16, Hybrid 9:16, Full 16:9), giải phẫu 8 mẫu chuyển động đã tải về (
pin_01 → pin_08) và tiến hóa lên V2 Pre-Cue & V3 Ultra-Clean.
MOTION 03
2.223 dòng HTML
Dựng Video Theo Phong Cách Claude Motion Risograph (Jay E) & Khuôn Thiết Kế Tweaks 60fps
Giải phẫu 5 bộ Prompt từ Jay E (
@robonuggets), thực chiến 10s đầu quảng cáo qc_fb9 theo bảng màu Risograph (nền kem #F3ECDD, cam #E2683A, xanh #1E5A64) kèm Khuôn .TSX có Bảng Biến Tweaks.
MOTION 04
4.457 dòng HTML
Chuyển Đổi Mẫu 16:9 Sang 9:16 Tiếng Việt, Kiểm Định 16 Lỗi Optical Flow (Opus) & Khuôn Tweaks
Đối chiếu bản thử nghiệm Python PIL bị cứng với bản Remotion 9:16 Tiếng Việt mượt chuẩn vật lý sau khi hỏi Opus tìm 16 nguyên nhân Optical Flow. Đóng gói trọn vẹn Khuôn
PinterestViet9x16.tsx.
MOTION 05
3.014 dòng HTML
Giải Phẫu 5 Quy Luật UI/UX Attention Budgeting & Khuôn Gốc VietCleanV3_10s.tsx Có Tweaks
Phân tích vì sao V1/V2 gây mỏi mắt (quá tải HUD) và áp dụng 5 Quy Luật Quản Trị Sự Chú Ý (1 tiêu điểm duy nhất, ≥85% Negative Space, Pre-Cue tự dọn sạch) cùng 20 điểm nổ SFX Voice-Safe.
5.2. Bảng Đánh Số 8 Cuộc Trò Chuyện Đã Tạo Nên Chuỗi Motion 01 → 05 (#C01 → #C08)
| Mã Số | Cuộc Trò Chuyện (Antigravity & Web KHOAI) | Mục Tiêu, Quyết Định Của Anh Việt & Đầu Ra Chính | Trang HTML & File .TSX |
|---|---|---|---|
| #C01 |
matt loui 1 motion graphic ID: 9ef1bb16-f545-40e3... 🌐 Mở trên Web KHOAI |
• Bóc tách tài liệu & video gốc của Matt Loui (Ll45R_Z8tQc) + tải mẫu Reference đầu tiên (#REF-01: 333759022406800725).• Anh Việt nhận xét bản đầu còn thô → hỏi Opus tìm nguyên nhân, nâng cấp lên Remotion 60fps nội suy Spring vật lý. • Render 4 thành phẩm đầu tiên: Demo Matt Loui, Bản Clone 16:9, và 2 bản Vàng Gold Anh Việt (16:9 & 9:16). |
motion01.htmlMattLouiSaaSDemo.tsxPinterestMotionClone.tsxVietBrandPinterestGold.tsx
|
| #C02 |
[Nhánh] tôi thấy logi chuyển động khá ổn... ID: 21d27975-e4d0-402b... 🌐 Mở trên Web KHOAI |
• Đóng gói toàn bộ quy trình Remotion 60fps, bảng giải mã Prompt trên màn hình gốc và 4 video demo thành motion01.html.• Anh Việt giao bài toán tiếp theo: Chuyển 27s đầu video "Kỷ Nguyên AI Ngữ Nghĩa" thành sản phẩm Motion Graphic kèm 6 mẫu Reference đầu tiên ( pin_01 → pin_06).
|
motion01.htmlKhởi tạo motion02.html
|
| #C03 |
Motion ID: d6b7b8b7-e604-4762... 🌐 Mở trên Web KHOAI |
• Lập trình VietSemanticEra27s.tsx (3.058 dòng) khớp từng âm tiết 27s thoại + trộn âm thanh 4 lớp Voice-Safe từ sfx.fedu.vn.• Xuất 3 phiên bản 60fps: Full 9:16, Hybrid Talking Head 9:16, Full Widescreen 16:9. • Anh Việt chỉ ra điểm nghẽn: Chuyển cảnh giữa các câu chữ cần có "mồi cảnh" (Pre-Cue) ở trước như 2 mẫu mới gửi thêm ( pin_07, pin_08).
|
motion02.htmlVietSemanticEra27s.tsx
|
| #C04 |
motion 02 html ID: 58353c17-1626-4a09... 🌐 Mở trên Web KHOAI |
• Bước 1 (Bản V2): Viết VietContinuity10s.tsx đưa hạt mồi Pre-Cue vào trước giọng đọc 10–14 frames + Whip-Pan liên cảnh.• Bước 2 (Bản V3 Ultra-Clean): Anh Việt đánh giá V2 vẫn quá rối vì ôm nhiều chữ/HUD trên 1 màn hình → rút ra 5 Quy Luật Attention Budgeting (1 tiêu điểm duy nhất, 85% không gian thở, 0% HUD rác, tách 7 cảnh độc lập) → xuất VietCleanV3_10s.tsx & motion02_v3_clean_10s_9x16_60fps.mp4.
|
motion02.htmlVietContinuity10s.tsxVietCleanV3_10s.tsx
|
| #C05 |
Motion 03 - style ID: 8b2053f9-e834-4121... 🌐 Mở trên Web KHOAI |
• Phân tích toàn diện video hướng dẫn Claude Motion của Jay E (@robonuggets / Eg08Lr3zqdw): 5 bước làm, 5 bộ Prompt và kiến trúc Bảng Biến Tweaks.• Áp dụng ngay vào 10s đầu video Qc offline - ngữ nghĩa đăng fb9.mp4 → dựng thành phẩm Claude Motion Risograph + Hybrid Talking Head 60fps (qc_fb9_claude_motion_10s.mp4).
|
motion03.htmlVietClaudeMotionRiso10s.tsx
|
| #C06 |
[Nhánh] trình bày cái này lên html repo course, motion03.html ID: 66451d8d-2a9c-4834... 🌐 Mở trên Web KHOAI |
• Đóng gói và xuất bản trang motion03.html lên repo course với 3 phần chuẩn mực: (I) Giải phẫu Reference Jay E & 5 bộ Prompt, (II) Kết quả thực chiến 10s 60fps & 7 phân cảnh Risograph, (III) Hướng dẫn cho người mới & giải thích Khuôn VietClaudeMotionRiso10s.tsx.
|
motion03.htmlVietClaudeMotionRiso10s.tsx
|
| #C07 |
motion graphic hướng 2 ID: 07eae699-1a84-4f10... 🌐 Mở trên Web KHOAI |
• Tải mẫu 333759022406800725 (47.3s 16:9) và thử nghiệm làm lại bằng Python PIL (pinterest_remake_python_pil_16x9.mp4).• Anh Việt yêu cầu hỏi Opus kiểm định vì sao bản đầu cứng → Opus mổ xẻ 16 nguyên nhân Optical Flow (thiếu Sub-pixel AA, thiếu 6-Layer Motion Blur, thiếu Masked 3D Reveal...). • Triển khai bản 9:16 Tiếng Việt 9 Phân Cảnh hoàn chỉnh ( pinterest_viet_9x16_final.mp4) bằng PinterestViet9x16.tsx.
|
motion04.htmlPinterestViet9x16.tsx
|
| #C08 |
motion04 (và motion05) ID: bb9a26ba-938c-49a3... 🌐 Mở trên Web KHOAI |
• Chuẩn hóa PinterestViet9x16.tsx thành Khuôn Thiết Kế Gốc có Bảng Biến Tweaks ở đầu file và xuất bản motion04.html.• Tiếp tục chuẩn hóa VietCleanV3_10s.tsx có Bảng Biến Tweaks + 4 bộ lọc SVG Velocity Motion Blur và xuất bản motion05.html.
|
motion04.htmlmotion05.htmlPinterestViet9x16.tsxVietCleanV3_10s.tsx
|
Phần VI — Phân Tích Tổng Hợp & Logic Luồng V2.0: Khi Nhận 1 Video Nói → Xuất Thành Phẩm Motion Graphic 60fps Tốt Nhất
Đúc kết từ toàn bộ quá trình thử nghiệm, sửa lỗi và tiến hóa qua 5 thế hệ (motion01 → motion05), dưới đây là bản thiết kế chuẩn mực nhất về Animation, Thư viện hiệu ứng, Chưng cất nội dung và Đóng gói vào Skill talking-head-to-motion V2.0:
6.1. Bốn Trụ Cột Quyết Định Chất Lượng Đầu Ra Tốt Nhất
| Trụ Cột | Lỗi Thường Gặp Ở Bản Cũ (V0 / V1 / V2) | Phương Án Đầu Ra Tốt Nhất Đã Đúc Kết (Chuẩn V3 Ultra-Clean & Optical Flow) |
|---|---|---|
| 1. Animation & Độ Mượt 60fps Optical Flow |
• Chữ hiện ra đột ngột không có mồi dẫn mắt. • Chuyển động dừng cục bộ, thiếu bóng mờ vận tốc. • Cắt cảnh bụp làm đứt mạch thị giác. |
• Mồi Cảnh Sớm (Pre-Cue -12 frames): Hạt mồi (Con trỏ |, Khung 4 góc Figma, Chấm tròn ●) luôn xuất hiện trước giọng đọc 10–14 frames.• True Velocity SVG Motion Blur: Gắn <feGaussianBlur stdDeviation="vx, vy"/> tính theo đạo hàm vận tốc thực giữa frame f và f-1.• Bàn Giao Diễn Viên Chung (Shared Actor Relay): Dùng 1 phần tử của cảnh cũ phóng mở ( Iris Wipe), trượt ngang (Caret Slide) hoặc kéo máy (Whip-Pan) sang cảnh mới.• 3D Masked Word Reveal: Từng từ trượt từ mặt nạ overflow:hidden + rotateX(-35deg → 0deg) lệch pha 3–4 frames.
|
| 2. Bố Cục UI/UX & Quản Trị Chú Ý Attention Budgeting |
• Tham nhồi Header cố định, thanh Subtitle ở đáy, Timecode giả, nhãn phụ. • Giữ lại chữ cảnh cũ khi chữ mới đã bung ra gây ngộp mắt. |
• 1 Tiêu Điểm Duy Nhất (Single Focal Point): Mỗi thời điểm chỉ có đúng 1 cụm từ khóa trung tâm khớp giọng đọc. • ≥85% Không Gian Thở (Negative Space): Nền sạch tuyệt đối (Đen Obsidian #07080A, Kem Ivory #F5F2EB hoặc Giấy Risograph #F3ECDD).• 0% HUD Rác: Xóa bỏ hoàn toàn Header, Subtitle bar lặp lại và Timecode thừa. • Pre-Cue Tự Thu Dọn: Ngay khi chữ chính nổ ra, hạt mồi Pre-Cue phải tự thu nhỏ/biến mất. |
| 3. Chưng Cất Nội Dung Từ Video Nói Semantic Distillation |
• Bê nguyên cả câu thoại dài 12–15 từ lên màn hình như Karaoke. • 100% đồ họa vô hồn hoặc 100% mặt nói đơn điệu. |
• Gọt Còn 2–5 Từ Khóa Chốt / Stage (1.2s–2.0s): Lược bỏ hư từ, chỉ giữ danh từ/động từ sắc nhất (bọc Unicode NFC, lineHeight ≥ 1.25).• Quy Tắc Đan Xen Người Thật (Human Trust Rubric): + Khi đặt câu hỏi / khẳng định uy tín / nhấn cảm xúc: Cắt Cận Mặt 100% hoặc Khung Thẻ Risograph 66%. + Khi giải thích cơ chế / số liệu / quy trình: Cắt 100% Full Motion Graphic Canvas. |
| 4. Thư Viện Hiệu Ứng & Khuôn .TSX Master Tweaks |
• Mỗi video lại code lại từ đầu hàng nghìn dòng dễ sai lỗi. • Khó đổi câu chữ hoặc bảng màu nhanh. |
• 10 Archetypes Tinh Tuyển (pin_00 → pin_08 + riso_09): Mỗi cơ chế gán đúng 1 ngữ cảnh ngữ nghĩa (Phủ định → Wheel Picker/Hard Invert; Cấu trúc → Radial Dial/Orbit; Chuyển hóa → Glass Pill/3D Bento).• 3 Khuôn Thiết Kế Gốc Có Bảng Biến Tweaks Ở Đầu File: Chỉ cần đổi mảng từ Tiếng Việt và mã màu trong default...Props (dòng 20–100) là render ra video mới trong 3 giây.
|
6.2. Sơ Đồ Luồng Thực Thi 6 Bước Tự Động Hóa (Skill talking-head-to-motion V2.0)
BƯỚC 1 & 2scaffold_motion_project.py
Giải Phẫu Sóng Âm 60fps, Bắt Hook Ngoài SRT & Gọt Từ Khóa
Chạy
scaffold_motion_project.py tự động cắt video, tạo proxy 60fps, tách voice.wav, dò câu Hook đầu video, gọt từ khóa Tiếng Việt chuẩn Unicode NFC và chia thành các Stages tách bạch có mốc preCueFrame = startFrame - 12.BƯỚC 3 & 43 Khuôn .TSX Có Tweaks
Chọn 1 Trong 3 Khuôn Gốc & Phối Âm 4 Lớp Voice-Safe
Chọn phong cách phù hợp nhất: (1)
VietCleanV3_10s.tsx (Ultra-Clean Dark/Ivory), (2) VietClaudeMotionRiso10s.tsx (Editorial Risograph Hybrid), hoặc (3) PinterestViet9x16.tsx (3D Bento/Orbit). Chạy compose_voicesafe_sfx.py trộn 4 lớp SFX + Sidechain.BƯỚC 5 & 6verify_motion_deliverable.py
Render 60fps, Kiểm Định Lưới Frame & Đẩy Lên Repo Course
Kết xuất H.264
yuv420p @ 60fps, chạy Verifier xuất lưới Storyboard kiểm tra 0 lỗi cắt dấu Tiếng Việt, ≥85% không gian thở, sau đó tự động cập nhật vào trung tâm motion00.html.