Viết HTML. Render video. Thiết kế cho AI Agent.

Bắt đầu nhanh | Dự án mẫu | Sân chơi (Playground) | Danh mục (Catalog) | Tài liệu | Discord

HyperFrames là một framework mã nguồn mở giúp chuyển đổi HTML, CSS, phương tiện (media) và các hiệu ứng hoạt họa (animation) có thể tua được (seekable) thành video MP4 với tính chuẩn xác (deterministic). Bạn có thể sử dụng nó cục bộ qua CLI, từ các AI Agent lập trình thông qua Skills, hoặc làm lõi render cho các hệ thống biên tập hosted.

Cài đặt các skill của HyperFrames, sau đó mô tả video bạn muốn tạo:

npx skills add heygen-com/hyperframes --full-depth

Trình chọn (picker) sẽ mở ra mà không chọn sẵn gì cả — nhóm Core Skills là tất cả những gì bạn cần: router /hyperframes sẽ cài đặt từng quy trình tạo video (creation workflow) theo nhu cầu (on demand). Các Agent hoặc các tiến trình chạy không tương tác nên sử dụng npx hyperframes skills update — lệnh này sẽ cài đặt chính xác bộ core skill, thay vì chạy skills add không tương tác mà không có tùy chọn --skill sẽ cài đặt tất cả 19 skill.

Tùy chọn --full-depth thực hiện clone đầy đủ từ nhánh main hiện tại của repo. Nếu không có tùy chọn này, skills add sẽ lấy dữ liệu từ registry của skills.sh (vốn có thể chậm hơn nhánh main vài giờ) — dẫn đến bạn có thể nhận được bản sao cũ của skill (hyperframes skills update đã mặc định cài đặt full-depth).

Hãy thử một câu lệnh (prompt) như:

Sử dụng /hyperframes, hãy tạo một video giới thiệu sản phẩm dài 10 giây với tiêu đề xuất hiện từ từ (fade-in), video nền và nhạc nền nhẹ nhàng.

Các skill này dạy cho AI Agent quy trình sản xuất video của HyperFrames: lập kế hoạch video, viết HTML hợp lệ, gắn các animation tua được (seekable), thêm file media, kiểm tra mã (lint), xem trước (preview) và xuất video (render). Chúng hoạt động tốt với Claude Code, Cursor, Gemini CLI, Codex và các AI Agent lập trình hỗ trợ skill.

HyperFrames đi kèm với 19 skill được Agent tải theo nhu cầu. Hãy đọc /hyperframes đầu tiên — đây là bộ định tuyến (router) và bản đồ năng lực; nó chọn quy trình cho bất kỳ yêu cầu "tạo cho tôi một..." nào — video, slide trình chiếu, hay chuyển đổi composition — và trỏ đến các domain skill bên dưới.

Mặc định sử dụng bộ core skill — router sẽ cài đặt từng quy trình tạo video theo nhu cầu. Lệnh npx hyperframes skills update cài đặt chính xác bộ skill đó ở bất kỳ đâu; trình chọn tương tác (npx skills add heygen-com/hyperframes --full-depth) hiển thị nó dưới dạng nhóm "Core Skills" và không chọn sẵn gì cả. Trình chọn chỉ dành cho chế độ tương tác — tiến trình chạy không tương tác hoặc agent chạy mà không có --skill sẽ cài đặt tất cả 19 skill. Sử dụng npx skills add heygen-com/hyperframes --all --full-depth để cài đặt chủ động cả 19 skill (bỏ qua trình chọn), hoặc npx skills add heygen-com/hyperframes --skill <name> --full-depth cho duy nhất một skill (tên thuần, không có dấu / ở đầu). Giữ tùy chọn --full-depth — nó cài đặt nhánh main mới nhất; nếu không có, skills add sẽ lấy blob từ skills.sh (thường chậm hơn vài giờ).

Sau đó việc cài đặt luôn gọn nhẹ: npx hyperframes init duy trì bộ core skill luôn mới (router, các domain skill hyperframes-*, và media-use — cùng với những gì đã cài đặt sẵn; /figma duy trì theo nhu cầu) và không tự động mở rộng cài đặt từng phần; các quy trình tạo video được cài đặt theo nhu cầu — router chạy npx hyperframes skills update <workflow> trước khi đi vào quy trình. Không có tiến trình nào tự động tải lại toàn bộ bộ skill ở phía sau.

Tạo file nén Codex plugin sẵn sàng tải lên từ phiên bản HEAD đã commit của manifest, tài nguyên thương hiệu và các skill:

bun run package:codex-plugin

Lệnh này ghi file dist/hyperframes-plugin.zip với thư mục gốc hyperframes/ và sẽ báo lỗi nếu dung lượng vượt quá giới hạn 100 MB của Codex.

Các năng lực nguyên tử mà các quy trình tạo video kết hợp sử dụng — hãy nạp skill tương ứng khi bạn cần lớp chức năng cụ thể đó.

Đối với quy trình bàn giao thiết kế giao diện (visual design handoff), hãy xem Hướng dẫn Claude Design và Hướng dẫn Open Design.

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # xem trước trong trình duyệt với tính năng live reload
npx hyperframes render       # render ra file MP4

Yêu cầu: Node.js 22+, FFmpeg

Bạn cần ý tưởng? Hãy xem Showcase để tham khảo các video hoàn chỉnh mà bạn có thể xem, đọc mã nguồn, chạy thử và tùy biến.

• Video ra mắt sản phẩm và thông báo tính năng mới
• Hướng dẫn giải thích PR với diff mã nguồn hoạt họa, lời thuyết minh và phụ đề
• Trực quan hóa dữ liệu, đua biểu đồ (chart races) và animation bản đồ
• Video mạng xã hội với phụ đề động, lớp phủ và âm nhạc
• Video giải thích từ tài liệu (Docs-to-video), PDF (PDF-to-video) và tour tham quan trang web
• Đồ họa chuyển động tái sử dụng cho các hệ thống tạo nội dung tự động

frame.md — hệ thống thiết kế của bạn, sẵn sàng cho video.

Mọi thương hiệu đều có một file design.md. Nhưng không file nào trong số đó được viết cho ống kính máy quay. frame.md chính là lớp chuyển ngữ còn thiếu: nó nhận thông số thiết kế từ ngữ cảnh web và đảo ngược nó cho khung hình video — giữ nguyên các token, giữ nguyên các quy tắc, nhưng được viết lại để AI Agent có thể dựng video quảng cáo mà không cần phải đoán tỷ lệ hay phụ thuộc vào giao diện web.

Đầu ra là một bản mở rộng DESIGN.md (superset) mà toàn bộ chuỗi công cụ của bạn đều có thể đọc được. Các thiết kế cơ bản (atoms) được giữ nguyên giá trị. Việc bố cục (composition) hoàn toàn tự do. Các con số được lấy từ kịch bản.

Biennale Yellow	BlockFrame
Blue Professional	Bold Poster
Broadside	Capsule
Cartesian	Cobalt Grid
Coral	Creative Mode

Khám phá và tùy biến tất cả mẫu tại hyperframes.dev/design.

Định nghĩa video bằng HTML. Thêm các thuộc tính data cho thời gian và track. Sử dụng GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI hoặc frame adapter tùy chỉnh của riêng bạn cho animation tua được (seekable).

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video
    class="clip"
    data-start="0"
    data-duration="6"
    data-track-index="0"
    src="intro.mp4"
    muted
    playsinline
  ></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>

  <audio
    data-start="0"
    data-duration="6"
    data-track-index="2"
    data-volume="0.5"
    src="music.wav"
  ></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

Xem trước tức thì trong trình duyệt. Render cục bộ hoặc trong Docker. Trình render sẽ tua (seek) từng khung hình trong Chrome headless và mã hóa kết quả bằng FFmpeg, đảm bảo cùng một đầu vào sẽ luôn cho ra cùng một video chuẩn xác.

HyperFrames là một render engine mã nguồn mở, đi kèm với bộ công cụ đang ngày càng phát triển xung quanh việc tạo video thuần HTML.

Cài đặt các block và component sẵn sàng sử dụng:

npx hyperframes add flash-through-white   # hiệu ứng chuyển cảnh shader
npx hyperframes add instagram-follow      # lớp phủ mạng xã hội
npx hyperframes add data-chart            # biểu đồ chuyển động

Duyệt catalog tại hyperframes.heygen.com/catalog.

• Thuần HTML (HTML-native): Các composition là file HTML với thuộc tính data. Không bắt buộc dùng React, không sử dụng định dạng timeline độc quyền.
• Thân thiện với Agent (Agent-friendly): AI Agent đã quen thuộc với việc viết HTML, và CLI mặc định chạy ở chế độ không tương tác.
• Tính chuẩn xác (Deterministic): Cùng đầu vào, cùng khung hình, cùng đầu ra. Được thiết kế cho CI, kiểm thử regression và render tự động.
• Không cần bước build: Một composition index.html chạy trực tiếp và có thể xem trước ngay trong trình duyệt.
• Animation dựa trên Adapter: Hỗ trợ GSAP, CSS animation, Lottie, Three.js, Anime.js, WAAPI hoặc runtime tùy chỉnh.
• Mã nguồn mở: Giấy phép Apache 2.0, không phí theo lượt render hay giới hạn sử dụng thương mại.

HyperFrames lấy cảm hứng từ Remotion. Cả hai công cụ đều render video bằng Chrome headless và FFmpeg. Điểm khác biệt chính nằm ở mô hình biên soạn: Remotion tập trung vào React component; trong khi HyperFrames lựa chọn HTML thuần túy mà cả con người và AI Agent đều có thể viết dễ dàng.

Đọc bản so sánh chi tiết tại Hướng dẫn HyperFrames vs Remotion.

Tài liệu đầy đủ: hyperframes.heygen.com/introduction

• Bắt đầu nhanh (Quickstart)
• Dự án mẫu (Showcase)
• Hướng dẫn (Guides)
• Tài liệu API (API Reference)
• Danh mục (Catalog)
• Ví dụ (Examples)
• Render trên AWS Lambda

HyperFrames được sử dụng chính thức tại HeyGen, cùng với các ví dụ cộng đồng từ các đội ngũ như tldraw, TanStack và các đơn vị khác trong ADOPTERS.md. Hãy mở PR nếu đội ngũ của bạn đang sử dụng HyperFrames.

• Câu hỏi và ý tưởng: Discord
• Báo lỗi và yêu cầu tính năng: GitHub Issues
• Báo cáo bảo mật: SECURITY.md
• Đóng góp phát triển: CONTRIBUTING.md

Kho lưu trữ này sử dụng Git LFS cho các dữ liệu test regression mẫu tại packages/producer/tests/**/output.mp4 (khoảng 240 MB các file .mp4). Nếu bạn clone toàn bộ repo để phát triển, hãy cài đặt Git LFS trước:

# macOS
brew install git-lfs

# Ubuntu / Debian
sudo apt install git-lfs

# Windows
winget install GitHub.GitLFS

# Sau đó, chạy một lần trên mỗi máy
git lfs install

Nếu bạn chỉ cần mã nguồn, bạn có thể bỏ qua dữ liệu LFS:

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git

Apache 2.0