Tóm tắt nhanh:
ak-hyperframesđể bạn viết clip dọc, clip ra mắt hay motion graphics bằng một file HTML, rồi dùng CLIhyperframescủa HeyGen, ghim một phiên bản cố định, để xem trước, kiểm lỗi và render ra MP4. Video chỉ xong khiffprobexác nhận thời lượng và kích thước. Video dựng bằng React thì sangak-remotion, chỉ cắt hay chuyển định dạng thì sangak-media-processing.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi bạn cần một video ngắn mà nội dung là chữ, hình và chuyển động, và muốn sửa video bằng cách sửa HTML. Không cần khi video dựng bằng component React hoặc khi bạn chỉ cần encode, cắt, làm thumbnail.
flowchart LR
A["Ý tưởng video ngắn"] --> B["ak-hyperframes"]
B --> C["File MP4 đã kiểm bằng ffprobe"]
B --> D["Skill HyperFrames của HeyGen khi cần kỹ thuật sâu"]
A --> E["ak-remotion nếu dựng bằng React"]
A --> F["ak-media-processing nếu chỉ encode, cắt"]Bốn khái niệm cần nắm:
| Khái niệm | Câu hỏi | Ví dụ |
|---|---|---|
| Composition là HTML | Video được mô tả ở đâu? | Thẻ gốc mang data-composition-id, data-width, data-height, data-duration; mỗi cảnh có id, data-start, data-duration |
| Phiên bản CLI ghim | Lệnh nào chạy bản hyperframes nào? | Mọi lệnh có dạng npx -y hyperframes@0.8.77; máy có bản khác thì skill báo, không tự nâng cấp |
| Check trước render | Khi nào được bấm render? | Chỉ sau khi check sạch; render xong vẫn kiểm bằng ffprobe |
| Render tại máy hay trên cloud | Có cần API key không? | Tại máy không cần key; cloud render cần đăng nhập HeyGen, trừ khi chạy --dry-run |
Thứ tự lớp khi các cảnh chồng nhau do CSS z-index quyết định, không phải data-track-index.
Prompt mẫu cho một video dọc ra mắt sản phẩm:
/ak-hyperframes Làm video dọc 9:16, khoảng 8 giây, giới thiệu <tên sản phẩm>.
3 cảnh: tên sản phẩm, một câu nói giá trị, lời kêu gọi truy cập <trang web>.
Ràng buộc: nền tối, chữ trắng, tên sản phẩm trượt lên khi xuất hiện.
Xuất ra ./assets/videos/<tên-clip>.mp4.
Xong khi: check sạch và ffprobe báo 1080x1920, thời lượng khoảng 8 giây.Skill này không có cờ.
Phần dưới đây là bản chi tiết: luồng chạy, 5 tình huống kèm prompt, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-hyperframes: viết video ngắn bằng HTML, render ra MP4" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-hyperframes". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-hyperframes
