Render video HeyGen HyperFrames với ak:hyperframes

Dùng ak:hyperframes để biến HTML composition đã đánh dấu bằng thuộc tính data-composition-id, data-start, data-width cùng data-height thành MP4 local qua CLI hyperframes đã publish. Skill phù hợp với clip dọc/social ngắn, loop product-launch và motion graphics mà source of truth là HTML markup, không phải React component tree hay timeline editor.

Chọn rendering HeyGen HyperFrames

Dùng ak:hyperframes khi

• Composition được viết bằng HTML với thuộc tính timing của HyperFrames.
• Bạn muốn scaffold project, browser preview, lint gate và MP4 render trong cùng một CLI, không cần vendor source HeyGen vào project.
• Mục tiêu là clip dọc/social ngắn, clip product-launch hay promo loop đọc tự nhiên bằng HTML.
• Bạn cần đường cloud render tùy chọn qua HeyGen API key trong khi local render vẫn hoạt động mà không cần key.

Chọn workflow khác khi

• Composition tự nhiên là React component tree với frame math hoặc caption. Dùng ak:remotion.
• Bạn muốn wrapper HTML template-driven với Studio editing thay vì contract composition của HyperFrames. Dùng ak:html-video.
• Bạn chỉ cần transcode, trim, thumbnail, HLS hay DASH hoặc batch FFmpeg. Dùng ak:media-processing.
• Nhiệm vụ là route qua mọi Skill video hoặc motion đã cài. Dùng router motion-graphics đã cài khi có.

Chuẩn bị engine và composition brief

Trước khi bắt đầu:

• Hoàn thành Làm quen và xác nhận Engineer Kit đã được cài cho runtime cùng scope hiện tại.
• Xác định aspect ratio, duration, source asset, resolution mục tiêu, output path, có cần local hay cloud render và clip là draft hay polished export.
• Bảo đảm Node.js 22 trở lên, đặt FFmpeg trên PATH và chỉ set HEYGEN_API_KEY khi dự định dùng đường cloud render.
• Chạy verifier prerequisite đi kèm (node scripts/verify-prereqs.mjs) trước khi scaffold composition; ưu tiên output JSON khi runtime tiêu thụ kết quả.
• Pin phiên bản CLI. Mọi lệnh gọi trong Skill này dùng hyperframes@0.7.99; khi nâng cấp thì bump pin ở một chỗ và không bao giờ fallback sang npx -y hyperframes ... không pin trong script hay docs.

Tạo project HyperFrames có giới hạn

/ak:hyperframes "Scaffold a 6-second 1080x1920 draft product-launch loop under ./assets/videos/launch/, preview locally, lint before rendering, and render an MP4 to ./assets/videos/launch/launch.mp4 without contacting the HeyGen cloud endpoint"

/ak:hyperframes "Scaffold a 6-second 1080x1920 draft product-launch loop under ./assets/videos/launch/, preview locally, lint before rendering, and render an MP4 to ./assets/videos/launch/launch.mp4 without contacting the HeyGen cloud endpoint"

$ak:hyperframes "Scaffold a 6-second 1080x1920 draft product-launch loop under ./assets/videos/launch/, preview locally, lint before rendering, and render an MP4 to ./assets/videos/launch/launch.mp4 without contacting the HeyGen cloud endpoint"

Dùng live CLI workflow

Luôn chạy lint trước render. Phần lớn thất bại render đến từ thuộc tính data-start hoặc data-composition-id lỗi mà lint bắt được trước khi Chromium và FFmpeg trả chi phí render.

Quan sát các stage render

1. Skill pin video brief. Aspect, duration, source asset, output path, local hay cloud render và ranh giới publication được ghi lại.
2. Nó verify engine. Node, FFmpeg, CLI hyperframes đã pin và (khi cloud render) HeyGen API key được kiểm tra.
3. Nó scaffold composition. init tạo thư mục project với HTML skeleton và contract thuộc tính timing của HyperFrames.
4. Bạn edit composition HTML. Element gốc mang các thuộc tính data-composition-id, data-start, data-width, data-height mô tả layout và timing.
5. Nó preview trong browser. URL dev server trả về được kiểm layout, typography, asset thiếu, motion, timing, lỗi console và use network.
6. Nó lint composition. Vấn đề timing và composition-id lộ ra trước khi render.
7. Nó render qua Chromium và FFmpeg. Local render encode MP4 tại output path rõ ràng; cloud render bàn giao composition cho HeyGen và trả về tham chiếu artifact remote.
8. Nó probe artifact. ffprobe phải báo duration khác zero cùng dimension đúng trước khi export được coi là hoàn tất.

Kiểm soát code, network, process và storage

• npx -y hyperframes@0.7.99 resolve package đã pin từ registry công cộng. Xác nhận pin, review upstream trước khi bump và đừng fallback sang lệnh gọi không pin trong script hay docs.
• Dev server đã scaffold bind một port local trong preview. Bind và expose chỉ theo dự định, dừng sau khi dùng và đừng coi page là an toàn trên mạng chung.
• Local render khởi Chromium và FFmpeg, có thể tốn nhiều CPU, memory, disk, file tạm và thời gian. Test draft ngắn trước.
• Cloud render gửi composition đến HeyGen. Chỉ dùng khi bạn có phép nộp source asset và HEYGEN_API_KEY được lưu theo policy secret của project.
• HTML composition, font, image và script có thể gọi request bên ngoài. Ghi lại hoặc chặn network effect khi privacy hay reproducibility quan trọng.
• Xác nhận quyền cho image, logo, copy, font, audio và template. Skill không cấp quyền publish hay redistribute.
• Workflow ghi project state, file preview, báo cáo lint và MP4 output. Nó không commit, upload, publish hay deploy nếu không có quyền riêng.

Xác minh video cùng bằng chứng

Kết quả hoàn chỉnh nên gồm:

• Verify Node, FFmpeg và (khi cloud render) HeyGen API key.
• Phiên bản CLI đã pin (hyperframes@0.7.99) và mọi sai lệch có ghi chú.
• Tên composition đã scaffold, source HTML và các thuộc tính timing dùng.
• URL preview, ghi chú review trực quan, báo cáo lint, lệnh render và đường dẫn MP4 (hoặc tham chiếu cloud job).
• Bằng chứng ffprobe về duration, dimension, stream, format và file size.
• Port local, quyền truy cập network, storage, quyền publish, privacy hoặc giới hạn publication còn lại.

Stable và beta đóng gói cùng wrapper ak:hyperframes. Release không pin revision source HeyGen upstream, không chứng minh build HeyGen đã publish và không đảm bảo cloud-render parity giữa các runtime.

Troubleshoot và diễn giải giới hạn