hyperframes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HyperFrames

Use this skill when the user asks Hermes to make a video with HyperFrames, such as a 30-second vertical video, a short intro, a cinematic micro-trailer, a product promo, animated captions, HUD-style tech visuals, a website-to-video piece, or an HTML/CSS/JS motion graphics render.

HyperFrames treats HTML as the video source of truth. Build video scenes as HTML compositions with CSS layout and JavaScript animation, validate the layout, then render the result to MP4.

当用户要求Hermes使用HyperFrames制作视频时，可使用本技能，例如30秒竖版视频、短视频开场、电影微预告片、产品宣传视频、动画字幕、HUD风格科技视觉效果、网页转视频作品，或是HTML/CSS/JS动态图形渲染。

HyperFrames将HTML视为视频的可信源。使用CSS布局和JavaScript动画构建视频场景的HTML合成内容，验证布局后，将结果渲染为MP4格式。

Setup

设置

If HyperFrames is not installed or the official skill is missing, install it first:

bash

hermes skills install official/creative/hyperframes

Use

npx hyperframes

for project operations. HyperFrames requires Node.js and FFmpeg. If rendering or preview fails, run:

bash

npx hyperframes doctor

如果未安装HyperFrames或缺少官方技能，请先进行安装：

bash

hermes skills install official/creative/hyperframes

使用

npx hyperframes

进行项目操作。HyperFrames需要Node.js和FFmpeg。如果渲染或预览失败，请运行：

bash

npx hyperframes doctor

Workflow

工作流程

Convert the user's request into a short production brief: duration, aspect ratio, target platform, language, style, music or voiceover needs, and final output path.
For incomplete briefs, make reasonable defaults. Use 1080x1920 for vertical short video, 1920x1080 for horizontal video, 30 fps, and MP4 output.
Create or reuse a HyperFrames project:

bash

npx hyperframes init my-video --non-interactive

Write the composition in HTML/CSS/JS. Make the static hero frame layout correct before adding animation.
Validate before rendering:

bash

npx hyperframes lint
npx hyperframes inspect --samples 15

Preview when useful:

bash

npx hyperframes preview

Render the final video:

bash

npx hyperframes render --output final.mp4 --quality standard

Use

--quality draft

for fast iteration and

--quality high

for final delivery when the user asks for a polished export.

将用户的需求转化为简短的制作说明：时长、宽高比、目标平台、语言、风格、音乐或旁白需求，以及最终输出路径。
对于不完整的说明，设置合理的默认值。竖版短视频使用1080x1920分辨率，横版视频使用1920x1080，帧率30fps，输出格式为MP4。
创建或复用HyperFrames项目：

bash

npx hyperframes init my-video --non-interactive

编写HTML/CSS/JS合成内容。在添加动画前，确保静态主帧布局正确。
渲染前进行验证：

bash

npx hyperframes lint
npx hyperframes inspect --samples 15

必要时进行预览：

bash

npx hyperframes preview

渲染最终视频：

bash

npx hyperframes render --output final.mp4 --quality standard

当用户要求导出精修版本时，使用

--quality draft

进行快速迭代，使用

--quality high

进行最终交付。

Composition Rules

合成规则

Use a root element with

data-composition-id

data-width

, and

data-height

Use
```
data-start
```
,
```
data-duration
```
, and
```
data-track-index
```
for timed clips.
Register GSAP timelines synchronously on
```
window.__timelines
```
.
Use CSS as the final layout state, then animate from or to that state.
Keep media playback under the HyperFrames runtime. Do not manually call
```
play()
```
,
```
pause()
```
, or seek media.
Avoid nondeterministic animation logic such as
```
Math.random()
```
or
```
Date.now()
```
unless using a seeded generator.
Do not use infinite repeats. Calculate finite repeat counts from the composition duration.
Check that text, captions, UI panels, and HUD elements stay inside the frame on every inspected timestamp.

使用带有

data-composition-id

、

data-width

和

data-height

属性的根元素。

为定时片段使用
```
data-start
```
、
```
data-duration
```
和
```
data-track-index
```
属性。
在
```
window.__timelines
```
上同步注册GSAP时间轴。
将CSS作为最终布局状态，然后从该状态或向该状态进行动画。
媒体播放需在HyperFrames运行时控制。请勿手动调用
```
play()
```
、
```
pause()
```
或调整媒体进度。
避免非确定性动画逻辑，例如
```
Math.random()
```
或
```
Date.now()
```
，除非使用种子生成器。
请勿使用无限重复。根据合成时长计算有限的重复次数。
检查在每个检查时间点，文本、字幕、UI面板和HUD元素是否都在帧内。

Delivery

交付

When finished, tell the user:

the rendered MP4 path;
the preview URL if a preview server is running;
any assumptions made about duration, aspect ratio, style, narration, or music;
any validation issues that remain unresolved.

Do not stop after writing HTML. A HyperFrames task is only complete after the composition has been checked with

lint

and

inspect

, and rendered to an MP4 unless the user explicitly asks for source files only.

完成后，告知用户：

渲染后的MP4文件路径；
如果预览服务器正在运行，提供预览URL；
关于时长、宽高比、风格、旁白或音乐的任何假设；
任何未解决的验证问题。

编写完HTML后请勿停止操作。HyperFrames任务仅在完成

lint

和

inspect

检查，并渲染为MP4后才算完成，除非用户明确要求仅提供源文件。