Chuyển tới nội dung chính

{/* Trang này được tạo tự động từ SKILL.md của kỹ năng bởi website/scripts/generate-skill-docs.py. Chỉnh sửa nguồn SKILL.md, không phải trang này. */}

siêu khung

Tạo các tác phẩm video dựa trên HTML, thẻ tiêu đề hoạt hình, lớp phủ xã hội, video có người nói chuyện có chú thích, hình ảnh phản ứng âm thanh và chuyển tiếp bóng đổ bằng HyperFrames. HTML là nguồn gốc của sự thật cho video. Sử dụng khi người dùng muốn MP4/WebM được kết xuất từ ​​bố cục HTML, muốn tạo hoạt ảnh cho văn bản/logo/biểu đồ trên phương tiện, cần đồng bộ hóa chú thích với âm thanh, muốn tường thuật TTS hoặc muốn chuyển đổi trang web thành video.

Siêu dữ liệu kỹ năng​

NguồnTùy chọn — cài đặt với
`Hermes skills install official/creative/hyperframes
`
Đường dẫn

optional-skills/creative/hyperframes ` | | Phiên bản |

1.0.0 ` | | Tác giả | heygen-com | | Giấy phép | Apache-2.0 | | Nền tảng | Linux, macOS, Windows | | Thẻ |

creative

, `video

, `animation

,


, 
`gsap

, 
`motion-graphics
` |
| Kỹ năng liên quan | [XPROTECTX14XPROTECTX](/docs/user-guide/skills/bundled/creative/creative-manim-video), [XPROTECTX15XPROTECTX](/docs/user-guide/skills/optional/creative/creative-meme-generation) |

## Tham khảo: đầy đủ SKILL.md

:::info
Sau đây là định nghĩa kỹ năng đầy đủ mà Hermes tải khi kỹ năng này được kích hoạt. Đây là những gì tác nhân coi là hướng dẫn khi kỹ năng được kích hoạt.

:::

# Siêu khung

HTML là nguồn gốc của sự thật cho video. Bố cục là một tệp HTML có các thuộc tính 
`data-*
` về thời gian, dòng thời gian GSAP cho hoạt ảnh và CSS cho giao diện. Công cụ HyperFrames ghi lại từng khung hình của trang và mã hóa thành MP4/WebM bằng FFmpeg.

**Bổ sung cho 
`manim-video

:** Sử dụng 
`manim-video
` cho trình giải thích toán học/hình học (phương trình, kiểu 3B1B). Sử dụng 
`hyperframes
` cho đồ họa chuyển động, phần nói chuyện có chú thích, chuyến tham quan sản phẩm, lớp phủ xã hội, chuyển tiếp đổ bóng và bất kỳ thứ gì được điều khiển bởi phương tiện video/âm thanh thực.

## Khi nào nên sử dụng
- Người dùng yêu cầu hiển thị video từ văn bản, tập lệnh hoặc trang web
- Thẻ tiêu đề hoạt hình, phần ba phía dưới hoặc phần giới thiệu kiểu chữ
- Video tường thuật có phụ đề (TTS + phụ đề được đồng bộ hóa dưới dạng sóng)
- Hình ảnh phản ứng âm thanh (đồng bộ nhịp, thanh quang phổ, ánh sáng xung)
- Chuyển tiếp cảnh này sang cảnh khác (làm mờ dần, xóa sạch, làm cong bóng đổ, chuyển sang màu trắng)
- Lớp phủ xã hội (kiểu Instagram/TikTok/YouTube)
- Đường dẫn từ trang web đến video (chụp URL, tạo quảng cáo)
- Bất kỳ hoạt ảnh HTML/CSS/JS nào phải hiển thị một cách xác định thành tệp video`**không** sử dụng kỹ năng này cho:
- Hoạt hình toán học/phương trình thuần túy (→ 
`manim-video

)
- Tạo hình ảnh hoặc meme (→ 
`meme-generation

, mô hình hình ảnh)
- Hội nghị truyền hình trực tiếp hoặc phát trực tuyến

## Tham khảo nhanh

``` bash
npx hyperframes init my-video               # scaffold a project
cd my-video
npx hyperframes lint                        # validate before preview/render
npx hyperframes preview                     # live-reload browser preview (port 3002)
npx hyperframes render --output final.mp4   # render to MP4
npx hyperframes doctor                      # diagnose environment issues

`
``Cờ kết xuất: 

`
--quality draft|standard|high
` · 

--fps 24|30|60
` · 

--format mp4|webm
` · 

--Docker
` (có thể tái tạo) · 

--strict

.

Tham chiếu CLI đầy đủ: [references/CLI.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/CLI.md).

## Thiết lập (một lần)

``` bash
bash "$(dirname "$(find ~/.Hermes/skills -path '*/hyperframes/SKILL.md' 2>/dev/null | head -1)")/scripts/setup.sh"

`
``Kịch bản:

1. Xác minh Node.js >= 22 và FFmpeg đã được cài đặt (in hướng dẫn sửa lỗi nếu chưa).
2. Cài đặt 
`hyperframes
` CLI trên toàn cầu (
`npm install -g hyperframes@>=0.4.2

).
3. Lưu trước bộ nhớ đệm 
`chrome-headless-shell
` qua Puppeteer — **bắt buộc** để hiển thị chất lượng tốt nhất thông qua đường dẫn chụp 
`HeadlessExperimental.beginFrame
` của Chrome.
4. Chạy 
`npx hyperframes doctor
` và báo cáo kết quả.

Xem [references/troubleshooting.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/troubleshooting.md) nếu thiết lập không thành công.

## Thủ tục

### 1. Lập kế hoạch trước khi viết HTML

Trước khi chạm vào mã, hãy trình bày rõ ràng ở mức độ cao:
- **Cái gì** — cốt truyện, những khoảnh khắc quan trọng, nhịp điệu cảm xúc
- **Cấu trúc** — sáng tác, bản nhạc (video/âm thanh/lớp phủ), thời lượng
- **Nhận dạng hình ảnh** — màu sắc, phông chữ, ký tự chuyển động (nổ/điện ảnh/linh hoạt/kỹ thuật)
- **Khung hình anh hùng** — cho mỗi cảnh, thời điểm mà hầu hết các phần tử được hiển thị đồng thời. Đây là bố cục tĩnh bạn sẽ xây dựng đầu tiên.

**Cổng nhận dạng hình ảnh (HARD-GATE).** Trước khi viết BẤT KỲ HTML bố cục nào, bạn phải xác định danh tính hình ảnh. KHÔNG viết các tác phẩm có màu mặc định hoặc màu chung (

#333

, 

#3b82f6

, 
`Roboto
` được thông báo rằng bước này đã bị bỏ qua). Kiểm tra theo thứ tự:1. **
`DESIGN.md
` tại thư mục gốc của dự án?** → Sử dụng màu sắc, phông chữ, quy tắc chuyển động chính xác và các ràng buộc "Điều KHÔNG nên làm".
2. **Người dùng đặt tên cho một phong cách** (ví dụ: "Swiss Pulse", "đen tối và công nghệ", "thương hiệu sang trọng")? → Tạo 
`DESIGN.md
` tối thiểu với 

## Style Prompt

, 

## Colors
` (3-5 hex có vai trò), 

## Typography
` (1-2 họ), 

## What NOT to Do
` (3-5 chống mẫu).
3. **Không có câu nào ở trên?** → Hỏi 3 câu hỏi trước khi viết bất kỳ HTML nào:
   - Tâm trạng à? (bùng nổ/điện ảnh/linh hoạt/kỹ thuật/hỗn loạn/ấm áp)
   - Canvas sáng hay tối?
   - Bất kỳ màu sắc thương hiệu, phông chữ hoặc tài liệu tham khảo trực quan nào?

Sau đó tạo 
`DESIGN.md
` từ các câu trả lời. Mọi bố cục đều phải theo dõi bảng màu và kiểu chữ của nó theo 
`DESIGN.md
` hoặc hướng dẫn rõ ràng của người dùng.

### 2. Giàn giáo

``` bash
npx hyperframes init my-video --non-interactive

`
``Mẫu: 
`blank

, 
`warm-grain

, 
`play-mode

, 
`swiss-grid

, 
`vignelli

, 
`decision-tree

, 
`kinetic-type

, 
`product-promo

, 
`nyt-graph

. Chuyển 

`
--example <name
` để chọn một, 

--video CLIp.mp4
` hoặc 

--audio track.mp3
` để gieo mầm phương tiện.

### 3. Bố cục trước ảnh động

Viết HTML+CSS tĩnh cho **khung anh hùng trước** — chưa có GSAP. Vùng chứa 

.scene-content
` phải lấp đầy cảnh (
`width:100%; height:100%; padding:Npx

) bằng 
`display:flex

 + 
`gap

. Sử dụng phần đệm để đẩy nội dung vào trong - không bao giờ 
`position: absolute; top: Npx
` trên vùng chứa nội dung (nội dung tràn khi cao hơn khoảng trống còn lại).

Chỉ sau khi khung anh hùng trông ổn, hãy thêm các lối vào 
`gsap.from()
` (tạo hoạt ảnh **đến** vị trí CSS) và các lối ra 
`gsap.to()
` (hoạt hình **từ** nó).

Xem [references/composition.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/composition.md) để biết toàn bộ lược đồ thuộc tính dữ liệu và quy tắc thành phần.

### 4. Tạo hoạt ảnh bằng GSAP

Mỗi sáng tác phải:
- Đăng ký dòng thời gian của nó: 
`window.__timelines["<composition-id"] = tl

- Bắt đầu bị tạm dừng: 
`gsap.timeline({ paused: true })

 - trình phát điều khiển phát lại
- Sử dụng các giá trị 
`repeat
` hữu hạn (không có 
`repeat: -1

 - phá vỡ công cụ chụp). Tính: 
`repeat: Math.ceil(duration / cycleDuration) - 1

.
- Mang tính quyết định — không có 
`Math.random()

, 
`Date.now()
` hoặc logic đồng hồ treo tường. Sử dụng PRNG được gieo hạt nếu bạn cần tính giả ngẫu nhiên.
- Xây dựng đồng bộ — không có 
`async

/
`await

, 
`setTimeout
` hoặc Lời hứa về tiến trình xây dựng.

Xem [references/gsap.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/gsap.md) để biết API GSAP cốt lõi (thanh thiếu niên, giảm bớt, so le, mốc thời gian).

### 5. Chuyển cảnh giữa các cảnh

Bố cục nhiều cảnh yêu cầu chuyển tiếp. Quy tắc:
1. **Luôn sử dụng phần chuyển tiếp giữa các cảnh** — không cắt đoạn nhảy.
2. **Luôn sử dụng hình ảnh động lối vào** trên mọi thành phần cảnh (
`gsap.from(...)

).
3. **Không bao giờ sử dụng hoạt ảnh thoát** ngoại trừ cảnh cuối cùng - quá trình chuyển đổi LÀ lối ra.
4. Cảnh cuối cùng có thể mờ dần.

Sử dụng 
`npx hyperframes add <transition-name>
` để cài đặt chuyển tiếp đổ bóng (
`flash-through-white

, 
`liquid-wipe

, v.v.). Danh sách đầy đủ: 
`npx hyperframes add --list

.

### 6. Âm thanh, chú thích, TTS, phản ứng âm thanh, đánh dấu- **Âm thanh:** luôn là phần tử 

<audio>
` riêng biệt (video là 
`muted playsinline

).
- **TTS:** 
`npx hyperframes tts "Script text" --voice af_nova --output narration.wav

. Liệt kê giọng nói với 

--list

. Chữ cái đầu tiên của Voice ID mã hóa ngôn ngữ (
`a

/
`b

=tiếng Anh, 
`e

=tiếng Tây Ban Nha, 
`f

=tiếng Pháp, 
`j

=tiếng Nhật, 
`z

=tiếng phổ thông, v.v.) — CLI tự động suy ra ngôn ngữ của bộ ghi âm; chỉ vượt qua 

--lang
` để ghi đè. Phiên âm không phải tiếng Anh yêu cầu cài đặt 
`espeak-ng
` trên toàn hệ thống.
- **Chú thích:** 
`npx hyperframes transcribe narration.wav
` → bảng điểm cấp độ từ. Chọn phong cách từ giai điệu của bản ghi (cường điệu / công ty / hướng dẫn / kể chuyện / xã hội - xem bảng trong 
`references/features.md

). **Quy tắc ngôn ngữ:** không bao giờ sử dụng kiểu thì thầm 

.en
` trừ khi âm thanh được xác nhận là tiếng Anh — 

.en
` dịch âm thanh không phải tiếng Anh thay vì phiên âm nó. Mỗi nhóm phụ đề PHẢI có một tiêu diệt 
`tl.set(el, { opacity: 0, visibility: "hidden" }, group.end)
` cứng sau khi thoát khỏi tween - nếu không các nhóm sẽ bị rò rỉ sang các nhóm sau.
- **Hình ảnh phản ứng âm thanh:** các dải âm thanh được trích xuất trước (bass / mid / treble) và lấy mẫu trên mỗi khung hình bên trong dòng thời gian với vòng lặp 
`for
` của 
`tl.call(draw, [], f / fps)

 - một đoạn tween dài duy nhất KHÔNG phản ứng với âm thanh. Bản đồ âm trầm → 
`scale
` (xung), âm bổng → 
`textShadow

/
`boxShadow
` (phát sáng), biên độ tổng thể → 
`opacity

/
`y

/
`backgroundColor

. Tránh những khuôn sáo về thanh cân bằng — hãy để nội dung hướng dẫn hình ảnh, âm thanh điều khiển hành vi của nó.
- **Đánh dấu kiểu đánh dấu:** các hiệu ứng tô sáng, hình tròn, cụm, viết nguệch ngoạc, phác họa để nhấn mạnh văn bản là CSS+GSAP xác định — xem 
`references/features.md#marker-highlighting

. Hoàn toàn có thể tìm kiếm, không có bộ lọc SVG hoạt hình.
- **Chuyển cảnh:** mọi bố cục nhiều cảnh PHẢI sử dụng chuyển tiếp (không cắt cảnh). Chọn từ các CSS gốc (push slide, làm mờ chéo, phóng to, khối so le) hoặc chuyển tiếp đổ bóng (
`flash-through-white

, 
`liquid-wipe

, 
`cross-warp-morph

, 
`chromatic-split

, v.v.) thông qua 
`npx hyperframes add

. Bảng tâm trạng và năng lượng có trong 
`references/features.md#transitions

. Không kết hợp các chuyển tiếp CSS và shader trong cùng một bố cục.

### 7. Lint, xác thực, kiểm tra, xem trước, kết xuất

``` bash
npx hyperframes lint              # catches missing data-composition-id, overlapping tracks, unregistered timelines
npx hyperframes validate          # WCAG contrast audit at 5 timestamps
npx hyperframes inspect           # visual layout audit — overflow, off-frame elements, occluded text
npx hyperframes preview           # live browser preview
npx hyperframes render --quality draft --output draft.mp4    # fast iteration
npx hyperframes render --quality high --output final.mp4     # final delivery

`
```hyperframes validate
` lấy mẫu các pixel nền đằng sau mọi thành phần văn bản và cảnh báo về tỷ lệ tương phản dưới 4,5:1 (hoặc 3:1 đối với văn bản lớn). 
`hyperframes inspect
` là người bạn đồng hành ở phía bố cục — chạy trang ở nhiều dấu thời gian và gắn cờ các vấn đề mà lint tĩnh không thể nhìn thấy (chú thích chỉ vượt qua vùng an toàn trong 4,5 giây, thẻ tràn khi tiêu đề của nó là biến thể dài nhất, một phần tử kết thúc ở phía sau trình đổ bóng chuyển tiếp). Chạy 
`inspect

, đặc biệt là trên các tác phẩm có ô lời thoại, thẻ, chú thích hoặc kiểu chữ chặt chẽ.

### 8. Chuyển từ trang web sang video (nếu người dùng cung cấp URL)

Sử dụng quy trình quay video gồm 7 bước trong [references/website-to-video.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/website-to-video.md): chụp → DESIGN.md → SCRIPT.md → bảng phân cảnh → bố cục → kết xuất → phân phối.

## cạm bẫy- **
`HeadlessExperimental.beginFrame' wasn't found

`
** — Crom 147+ đã xóa giao thức này. Đảm bảo bạn đang sử dụng 
`hyperframes@>=0.4.2
` (tự động phát hiện và quay lại chế độ chụp màn hình). Cửa thoát hiểm: 
`export PRODUCER_FORCE_SCREENSHOT=true

. Xem [hyperframes#294](https://GitHub.com/heygen-com/hyperframes/issues/294) và [references/troubleshooting.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/troubleshooting.md).
- **Hệ thống Chrome (không phải 
`chrome-headless-shell

)** — hiển thị bị treo trong 120 giây rồi hết thời gian chờ. Chạy 
`npx puppeteer browsers install chrome-headless-shell
` (setup.sh thực hiện việc này). 
`hyperframes doctor
` báo cáo nhị phân nào sẽ được sử dụng.
- **
`repeat: -1
` ở mọi nơi** — làm hỏng công cụ chụp. Luôn tính toán số lần lặp lại hữu hạn.
- **
`gsap.set()
` trên các thành phần CLIp được nhập sau** — thành phần này không tồn tại khi tải trang. Thay vào đó, hãy sử dụng 
`tl.set(selector, vars, timePosition)
` bên trong dòng thời gian, tại hoặc sau 
`data-start
` của CLIp.
- **

<br
` bên trong văn bản nội dung** — dấu ngắt bắt buộc không biết độ rộng phông chữ được hiển thị, do đó, dấu ngắt tự nhiên + dấu ngắt đôi 

<br

. Sử dụng 
`max-width
` để ngắt dòng văn bản. Ngoại lệ: tiêu đề hiển thị ngắn trong đó mỗi từ được cố ý đặt trên một dòng riêng.
- **Hoạt hình 
`visibility
` hoặc 
`display

** — GSAP không thể kết hợp những điều này. Sử dụng 
`autoAlpha
` (xử lý cả khả năng hiển thị và độ mờ).
- **Gọi 
`video.play()
` hoặc 
`audio.play()

** — framework sở hữu tính năng phát lại. Đừng bao giờ tự gọi những thứ này.
- **Xây dựng các mốc thời gian không đồng bộ** — công cụ thu thập đọc 
`window.__timelines
` một cách đồng bộ sau khi tải trang. Không bao giờ gói việc xây dựng dòng thời gian trong 
`async

, 
`setTimeout
` hoặc Promise.
- **
`index.html
` độc lập được gói trong 

<template

** — ẩn tất cả nội dung khỏi trình duyệt. Chỉ **sáng tác phụ** được tải qua 
`data-composition-src
` mới sử dụng 

<template

.
- **Sử dụng video cho âm thanh** — luôn tắt tiếng 

<video

 + riêng 

<audio

.

## Xác minh

Trước và sau khi render:
1. **Lint + xác thực + kiểm tra pass:** 
`npx hyperframes lint --strict && npx hyperframes validate && npx hyperframes inspect
` (lint phát hiện các vấn đề về cấu trúc, xác thực độ tương phản của phần bắt, kiểm tra bố cục trực quan/vấn đề tràn — xem phần khắc phục sự cố.md nếu cảnh báo xuất hiện).
2. **Vũ đạo hoạt hình** — đối với các tác phẩm mới hoặc các thay đổi hoạt ảnh quan trọng, hãy chạy bản đồ hoạt ảnh. 
`npx hyperframes init
` sao chép các tập lệnh kỹ năng vào dự án, vì vậy đường dẫn là cục bộ của dự án:

``` bash
   node skills/hyperframes/scripts/animation-map.mjs <composition-dir \

     --out <composition-dir/.hyperframes/anim-map

`
   Xuất ra một 
`animation-map.JSON
` duy nhất với các bản tóm tắt trong mỗi 12 giây, dòng thời gian ASCII Gantt, phát hiện so le, vùng chết (>1 giây không có hoạt ảnh), vòng đời phần tử và cờ (
`offscreen

, 
`collision

, 
`invisible

, 
`paced-fast
` <0,2 giây, 
`paced-slow
` >2s). Quét các bản tóm tắt và gắn cờ - sửa chữa hoặc biện minh cho từng phần. Bỏ qua các chỉnh sửa nhỏ.
3. **Tệp tồn tại + khác 0:** 
`ls -lh final.mp4

.
4. **Thời lượng khớp với 
`data-duration

:** 
`ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 final.mp4

.
5. **Kiểm tra trực quan:** trích xuất khung bố cục ở giữa: 
`ffmpeg -i final.mp4 -ss 00:00:05 -vframes 1 preview.png

.
6. **Có âm thanh nếu được mong đợi:** 
`ffprobe -v error -show_streams -select_streams a -of default=nw=1:nk=1 final.mp4 | head -1

.

Nếu 
`hyperframes render
` không thành công, hãy chạy 
`npx hyperframes doctor
` và đính kèm đầu ra của nó khi báo cáo.

## Tài liệu tham khảo
- [composition.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/composition.md) — thuộc tính dữ liệu, hợp đồng dòng thời gian, quy tắc không thể thương lượng, quy tắc kiểu chữ/tài sản
- [CLI.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/CLI.md) — mọi lệnh CLI (khởi tạo, chụp, tìm lỗi mã nguồn, xác thực, kiểm tra, xem trước, kết xuất, phiên âm, tts, bác sĩ, trình duyệt, thông tin, nâng cấp, điểm chuẩn)
- [gsap.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/gsap.md) — API lõi GSAP cho HyperFrames (thanh thiếu niên, giảm bớt, so le, mốc thời gian, matchMedia)
- [features.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/features.md) — chú thích, TTS, phản ứng âm thanh, đánh dấu điểm đánh dấu, chuyển tiếp (tải theo yêu cầu)
- [website-to-video.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/website-to-video.md) — quy trình quay video gồm 7 bước
- [troubleshooting.md](https://GitHub.com/NousResearch/Hermes-agent/blob/main/optional-skills/creative/hyperframes/references/troubleshooting.md) — Sửa lỗi OpenClaw, env vars, các lỗi kết xuất phổ biến