Làm video giải thích 30 giây kiểu Vox bằng HyperFrames

Video explainer ngắn kiểu Vox (giấy cắt, chữ to, chuyển cảnh mạnh) đẹp nhưng "editor nó làm". Tôi tìm ra cách build bằng HyperFrames + GSAP — viết HTML, render ra MP4 bằng 1 dòng npx. Dưới đây là pipeline tôi đã chạy thật, có file MP4 render trên máy: out-boat.mp4 14.2MB, 30 giây, 6 cảnh.

Vấn đề

Cách truyền thống: thiết kế trong After Effects/Premiere, đồng bộ voiceover (VO) với hoạt hình là cực hình — chuyển 1 câu là dời cả timeline. Không nói cũng phải có bản quyền bộ font/asset. Tôi không muốn mở AE cho video 30 giây.

Setup

| Thành phần | Giá trị | |---|---| | CLI | npx --yes hyperframes@0.7.96 (không cần cài global) | | Renderer | GSAP 3.14.2 (CDN) | | Video | 1920x1080, 30s, 6 cảnh | | VO | edge-tts en-US-ChristopherNeural --rate=+8% | | Asset | PNG giấy cắt, chroma-key từ nền magenta | | Output | MP4 (~14MB cho 30s) |

Project không có node_modules — toàn bộ dùng npx on-demand. Đây là điểm đáng chú ý: không có dependency nào ngoài npx + CDN.

Pipeline 6 bước

1. Script + khóa timeline

Nguyên tắc chính: 1 câu = 1 cảnh. VO đọc trước, lấy timestamp từng câu làm điểm ngắt cảnh. Script 50-75 từ cho 30s (~2.5 từ/giây). Cắt câu theo cú pháp tự nhiên, không hoạt hình lung tung.

Ví dụ project "The Paper Boat" tôi làm: 53 từ, 6 câu, scene split chính xác theo SRT cue (S1 0-3.9s, S2 3.9-9.1s, ... S6 21.6-30s).

2. Beats = scene boundaries

Không làm scene theo số tròn. Mỗi cảnh 1 câu narration, dùng đúng timestamp từ transcription. Sau khi khóa timeline này thì không sửa lại — mọi thứ khác build quanh nó.

3. Asset giấy cắt

Tạo PNG trên nền solid (màu cyan/magenta), chroma-key bằng ffmpeg:

ffmpeg -i in.png -vf "chromakey=0x{(hex)}:0.15:0.1" -format rgba out.png

Project tôi có 7 cutout: boat, desk, hand, house, map, star, waves — đủ dùng cho 6 cảnh.

4. GSAP composition (HyperFrames)

Mỗi cảnh wrap trong <section class="clip">, animation bằng data-* attributes + window.__timelines["main"]:

• Whip-in: from xPercent:112 (0.34s) — cảnh lướt vào.
• Camera drift: ease:"none" — chuyển động đều.
• Whip-out: to xPercent:-112 (0.28s).
• Highlight vàng: scaleX 0->1, hạ cánh 1-2 frame TRƯỚC từ được nói (kinetic typography kiểu Vox).
• Snap pop: back.out(1.6) cho chi tiết bật lên.
• Grain: SVG feTurbulence opacity 0.05, luôn lớp trên cùng.

Palette chuẩn: giấy #F4F4F0, mực #111111, vàng #FFE600, đỏ #FF3333. Font Inter 900 cho headline + Playfair Display italic cho quote. Tối đa 3 màu/cảnh.

5. Sound 3 tầng

Đồng bộ frame chính xác:

• High (click, rip): đúng frame chuyển đổi.
• Medium (swoosh): 2-3 frame TRƯỚC motion.
• Low (thud): đúng frame impact.

Mình syn các file SFX này vào data-track-index trong index.html, có waveform cache để chỉnh.

6. Render + verify

npm run check   # lint composition
npm run render  # → renders/<name>_<ts>.mp4

Đã verify bằng snapshot frame + contact sheet (mỗi cảnh 1 ảnh kiểm tra). Output out-boat.mp4 14.2MB sẵn trên máy.

Chi phí

• Phần mềm: 0 VND. HyperFrames (npm, open), GSAP Web, edge-tts. Không cần AE/Premiere.
• Thời gian: e sản xuất 1 video 30s ~ vài giờ (script 15 phút + asset 1 tiếng + composition 1-2 tiếng + render 10 phút). Sau khi có asset library, lần sau nhanh hơn.
• So với thuê editor VN: từ vài trăm K đến vài triệu/video — tự render tiết kiệm nhiều, nhưng bù lại tự làm.

Giới hạn

• Là motion graphic, không phải live-action. Chưa test video có cảnh quay thật chồng lên — pipeline này sinh cho explainer hoàn toàn giấy cắt.
• Dùng GSAP qua npx/CDN: cần internet khi chạy lần đầu tải CLI + tải GSAP.
• HyperFrames CLI trẻ (0.7.x) — lỗi chưa được mài kỹ như AE; cần đọc skill/docs theo version (hyperframes docs).
• Chưa làm karaoke subtitle ghi đè frame bên ngoài style này sâu; dự án video TikTok phải dùng pattern riêng (per-word caption).

Verdict

Đáng thử nếu bạn làm video explainer/kinetic typography và muốn pipeline code-first, cost ~0, tái sử dụng asset. Là hướng đi hay cho content creator kỹ thuật.

Không nên dùng nếu bạn cần kết xuất video phức tạp nhiều cảnh quay, hoặc không muốn đụng HTML/CLI.

Bắt đầu với project mẫu, giữ nguyên 6 bước: script → VO → beats → asset → GSAP → render. Đừng đảo thứ tự.

Muốn xem pipeline này tầm công việc thật trong sản xuất, tham khảo dự án video vox-style-30s và cách nó treo vào workflow video sản xuất hàng ngày.