企业官网建设流程全解析

HyperFrames hyperframes add 快速上手：一条命令装出现成视频组件，附完整用法

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes

HyperFrames 是一个开源的 HTML 视频渲染框架：写 HTML，渲染出 MP4 视频。add 命令帮你省掉自己搭场景、做特效的功夫——一条命令把目录里的现成素材拉进项目，还附赠接线片段。这篇文章写给新手：3 步装好第一个区块，读完你已会批量安装与搜索命令。

先上手：3 步装好第一个组件

环境要求：Node.js 22+ 和 FFmpeg。

第 1 步，创建项目骨架：

npx hyperframes init my-video

init 生成index.html和项目配置，后续命令都在这个目录里跑。

第 2 步，安装一个图表区块：

cd my-video npx hyperframes add>npx hyperframes add grain-overlay

grain-overlay 是 Component，无独立尺寸的胶片颗粒特效，装在compositions/components/下。

再懂概念：区块和组件各是什么

安装成功后，CLI 先打印 "✓ Added 名称 (类型)"，再逐行列出写入的文件相对路径；安装后你改过的文件会标 "kept" 并跳过，不会被覆盖。最后它会生成一段挂载片段：Block 对应一个带data-composition-src、data-duration和宽高的 div，并默认复制到剪贴板。把它贴进宿主合成的index.html，再补上data-composition-id（须与区块内部 ID 一致）、data-start和data-track-index，场景就接通了。

参数速查

想深挖实现，可看命令源码 add.ts，或面向代理解释的用法笔记 SKILL.md。

进阶技巧 ⚡：按标签批量安装

add 有一个兜底机制：参数匹配不到条目名时，会被当作标签，批量安装全部带该标签的 Blocks。

npx hyperframes add captions

一行装齐全部字幕类区块，CLI 逐个汇报成功或跳过，结尾汇总 "Installed N/M blocks"。

npx hyperframes add html-in-canvas

同样一次拉进整套 HTML-in-Canvas 区块。另外注意：条目若依赖目录里的其他条目，依赖会先装，主条目随后。

组合拳：先搜索再安装

目录条目多达数百条，肉眼扫不过来，官方建议按意图搜索，定下名字再安装。

npx hyperframes catalog --query "reveal a headline one line at a time"

在本地对全部条目排序。有个易踩的坑：查询务必用英文——目录以英文编写，用中文查会直接返回空。

npx hyperframes catalog --type block --tag social

不想搜索时，按类型加标签浏览也行。拿到名字后，交给 add 完成安装。

完整工作流：从初始化到出片

1. npx hyperframes init my-video创建项目
2. npx hyperframes catalog --query "..."按意图搜索
3. npx hyperframes add <name>安装；装完粘贴片段，补data-start、data-track-index
4. npx hyperframes lint校验 HTML 结构
5. npx hyperframes preview浏览器预览
6. npx hyperframes render --output output.mp4渲染成片

更多命令（check、snapshot、publish 等）见 docs/developers/cli.mdx。

新手常见问题

问：安装要联网吗？要。目录清单有本地缓存，离线也能搜索、浏览条目；但组件文件每次安装都实时下载，离线状态下 add 会直接失败。

问：安装目录想挪个地方？可以。在项目hyperframes.json里配置paths.blocks和paths.components，CLI 安装时自动重映射落盘位置，每个条目的清单不用改。

问：装完有文件被标了 "kept"，为什么？这是默认保护行为：安装后你改动过的文件会被保留、跳过不覆盖。确认要新版时加--force重跑即可。

问：add 能装完整示例项目吗？不能。add 只覆盖 Blocks 和 Components 两类；示例项目请走npx hyperframes init <dir> --example <name>。

收尾

一条 hyperframes add 命令，就能把现成的视频素材搬进你的 HTML 项目——写 HTML，渲染视频，剩下的交给目录。

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes