close

HyperFrames

Mã nguồn mở bởi heygen-com

AI mã nguồn mở

HyperFrames là framework mã nguồn mở của HeyGen biến HTML, CSS, media và hoạt ảnh thành video MP4. Bạn viết video như một trang web, xem trước trên trình duyệt rồi xuất video bằng dòng lệnh. Bộ skill đi kèm giúp Claude Code, Codex, Cursor tự dựng video theo yêu cầu.

HyperFrames dùng để làm gì?

  • Dựng video giới thiệu sản phẩm, thông báo tính năng bằng HTML và CSS
  • Nhờ trợ lý lập trình AI làm video chỉ bằng một câu mô tả
  • Làm video số liệu, biểu đồ chạy, bản đồ động và phụ đề chữ chuyển động
  • Thêm khối dựng sẵn như hiệu ứng chuyển cảnh, biểu đồ, lớp phủ mạng xã hội bằng một lệnh
  • Xuất video giống hệt nhau mỗi lần chạy, dùng được trong CI và quy trình tự động

Giao diện

HyperFrames: Biennale Yellow HyperFrames: BlockFrame HyperFrames: Blue Professional

Ảnh và video lấy từ README của dự án trên GitHub, bản quyền thuộc nhóm phát triển.

Cần biết trước khi dùng

  • Lưu ýKhông tìm thấy docker-compose hay Dockerfile ở thư mục gốc: chưa thể gắn nút Deploy tự động.
  • Lưu ýTino chưa kiểm thử dự án này.

Kiểm tra tự động ngày 04/11/2026 từ dữ liệu GitHub, OSV.dev và docker-compose. Đây không phải chứng nhận bảo mật; Tino không phát triển hay bảo trì repo này.

HyperFrames là gì?

Làm video bằng code thường cần học một định dạng timeline riêng hoặc dựng cả dự án React. HyperFrames chọn cách khác: mỗi video là một file HTML. Các phần tử như video, ảnh, chữ, âm thanh được gắn thuộc tính data-start, data-duration, data-track-index để xếp lên timeline. Hoạt ảnh viết bằng GSAP, CSS, Lottie, Three.js, Anime.js hoặc WAAPI.

Khi xuất video, trình render mở trang trong Chrome không giao diện (headless), tua tới từng khung hình rồi ghép lại bằng FFmpeg. Vì vậy cùng một đầu vào cho ra cùng một video. Không cần bước build: file index.html mở thẳng được trên trình duyệt để xem trước.

Dự án nhắm tới trợ lý lập trình AI. Bộ skill dạy trợ lý cả quy trình: lên kế hoạch, viết HTML hợp lệ, gắn hoạt ảnh, thêm media, kiểm lỗi, xem trước và xuất video. CLI mặc định không hỏi tương tác nên trợ lý chạy được trọn vẹn. Kho Catalog có khoảng 450 khối dựng sẵn (theo README) để cài vào dự án.

Ngoài CLI, nhóm phát triển có Studio để xem và sửa video trên trình duyệt, ứng dụng desktop cho macOS, Windows, Linux và đường render phân tán trên AWS Lambda. Trang này nói về bộ mã nguồn mở theo giấy phép Apache 2.0.

Nên dùng khi

  • Bạn muốn trợ lý AI làm video giới thiệu, video mạng xã hội mà không cần mở phần mềm dựng phim
  • Bạn cần sinh hàng loạt video theo mẫu từ dữ liệu, ví dụ biểu đồ hay bản tin định kỳ
  • Bạn quen HTML, CSS và muốn kiểm soát từng khung hình bằng code

Không nên dùng khi

  • Máy không cài được Node.js 22 trở lên và FFmpeg
  • Bạn cần dựng phim kéo thả kiểu phần mềm truyền thống; theo README, Studio vẫn đang hoàn thiện
  • Bạn chưa rà quyền của trợ lý AI: skill cho phép trợ lý chạy lệnh, tải media và xuất file trong thư mục dự án
  • Bạn muốn mọi bước đều miễn phí: skill /media-use có thể gọi dịch vụ của HeyGen, README không nêu giá

Tính năng chính

  • Video là file HTML có thuộc tính data-* cho thời điểm và track, không bắt buộc React
  • Hỗ trợ GSAP, CSS animation, Lottie, Three.js, Anime.js, WAAPI hoặc bộ chuyển đổi tự viết
  • Render tất định: cùng đầu vào, cùng khung hình, cùng kết quả
  • CLI: tạo dự án, xem trước có tải lại trực tiếp, kiểm lỗi, xuất MP4
  • 7 skill cho trợ lý AI, bộ lõi gồm /hyperframes, /hyperframes-cli, /hyperframes-registry, /media-use
  • Catalog khối dựng sẵn: chuyển cảnh shader, biểu đồ, phụ đề, lớp phủ, bản đồ, 3D
  • frame.md: chuyển hệ thống thiết kế (design.md) của thương hiệu sang dạng dùng cho video
  • Thành phần để nhúng video vào trang web
  • Render phân tán trên AWS Lambda (tuỳ chọn)

Cách cài đặt HyperFrames

  1. Cài plugin cho Claude Code Sau đó dùng skill /hyperframes:hyperframes trong Claude Code. Muốn tự cập nhật, gõ /plugin trong Claude Code, chọn Marketplaces → hyperframes → Enable auto-update. 
    claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
  2. Hoặc cài skill cho trợ lý khác (Codex, Cursor, OpenCode…) Trình chọn mở ra không tích sẵn mục nào; nhóm Core Skills là đủ. Trợ lý chạy không tương tác nên dùng npx hyperframes skills update, lệnh này cài đúng bộ lõi từ nhánh main. 
    npx skills add heygen-com/hyperframes
  3. Hoặc dùng CLI bằng tay init tạo dự án mới, preview mở bản xem trước trên trình duyệt và tự tải lại khi sửa file, render xuất ra MP4. 
    npx hyperframes init my-video
cd my-video
npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

Lệnh chép từ README của dự án. Đọc kỹ trước khi chạy và đối chiếu với README mới nhất, vì lệnh có thể đổi theo phiên bản.

Cấu hình quan trọng

MụcÝ nghĩa
GIT_LFS_SKIP_SMUDGEĐặt 1 khi git clone mã nguồn để bỏ qua khoảng 240 MB video kiểm thử lưu bằng Git LFS; chỉ cần khi tải repo về để phát triển

Cách tích hợp và sử dụng

  1. Nhờ trợ lý làm videoGõ yêu cầu kèm skill, ví dụ: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music." Trợ lý tự lên kế hoạch, viết HTML, xem trước và xuất video.
  2. Thêm khối dựng sẵnnpx hyperframes add flash-through-white thêm hiệu ứng chuyển cảnh, npx hyperframes add data-chart thêm biểu đồ động. Danh sách đầy đủ có trên trang Catalog.
  3. Sửa video bằng tayMở index.html trong dự án, chỉnh thuộc tính data-start, data-duration của từng phần tử và hoạt ảnh GSAP, rồi xem lại bằng npx hyperframes preview.
  4. Cài skill theo nhu cầuCác skill /figma, /slideshow, /remotion-to-hyperframes không nằm trong bộ lõi; cài khi cần bằng npx hyperframes skills update .

Cập nhật và sao lưu

Skill cập nhật bằng npx hyperframes skills update; lệnh này lấy bản mới nhất từ nhánh main và không xoá skill đã có. Plugin Claude Code cập nhật qua trình quản lý plugin, có thể bật tự cập nhật.

Dự án video là thư mục file HTML và media thông thường, sao lưu như mã nguồn (ví dụ commit lên Git).

Câu hỏi thường gặp

HyperFrames có tính phí theo lượt render không?

Không. Mã nguồn theo giấy phép Apache 2.0; README ghi rõ không có phí theo lượt render hay ngưỡng dùng thương mại. Chi phí chỉ phát sinh nếu bạn dùng dịch vụ trả phí bên ngoài, ví dụ tạo giọng đọc hay video bằng AI.

HyperFrames khác Remotion ở điểm nào?

Cả hai đều render video bằng Chrome không giao diện và FFmpeg. Theo README, Remotion viết video bằng component React và cần bundler, còn HyperFrames dùng HTML thuần, không cần bước build. Giấy phép cũng khác: HyperFrames dùng Apache 2.0, Remotion dùng giấy phép riêng.

Không biết lập trình có dùng được không?

Có thể, nếu bạn dùng qua trợ lý AI như Claude Code: bạn mô tả video, trợ lý viết HTML và chạy lệnh render. Tuy vậy, để chỉnh chi tiết bạn vẫn nên đọc được HTML và CSS cơ bản.

Có cần cài HyperFrames lên VPS không?

Không bắt buộc. HyperFrames chạy trên máy cá nhân nơi bạn dùng trợ lý AI. README có nói tới render trong Docker và trên AWS Lambda cho nhu cầu render hàng loạt, nhưng không đưa lệnh cụ thể cho Docker.

Nội dung được AI hỗ trợ soạn từ README và dữ liệu GitHub của dự án.

Ứng dụng liên quan

Miễn trừ trách nhiệm

Tino không phát triển, không sở hữu và không liên kết với HyperFrames hay nhóm phát triển heygen-com. Tên, logo và nhãn hiệu thuộc về chủ sở hữu tương ứng; việc nhắc tới chỉ để mô tả, không có nghĩa là dự án xác nhận hay hợp tác với Tino.

HyperFrames được phân phối theo giấy phép Apache-2.0 của nhóm phát triển. Tino không bảo đảm về tính năng, bảo mật hay mức độ phù hợp của phần mềm; bạn tự chịu trách nhiệm khi cài đặt, cấu hình và sử dụng.

Lệnh cài và thông tin trên trang lấy từ tài liệu công khai của dự án tại thời điểm cập nhật và có thể đã thay đổi. Đọc tài liệu chính thức và sao lưu dữ liệu trước khi chạy trên máy chủ thật.