经济学研究生必看：2026年AI期刊论文写作全流程，从选题到投稿
2026/10/7 16:57:13
hyperframes add 完全指南：3 条命令装出现成视频组件
【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes
HyperFrames 是开源的 HTML 视频渲染框架：写 HTML，渲染出 MP4。hyperframes add是它最省事的命令——一条命令就能从官方组件目录装好现成的视频组件：转场、字幕、信息图表、地图动画、社交覆盖层，装进项目直接用。这篇 HyperFrames 视频组件教程带你从零跑通整个安装流程。
先记住 3 个最常见的坑
这节帮你绕开新手最容易栽的三处：离线装不上、忘补时间轴属性、误以为重装会丢改动。
坑一：离线只能搜，不能装。目录清单（manifest）有本地缓存，catalog搜索不依赖网络；但组件文件每次安装都实时下载，不缓存。断网时add会直接在文件下载环节失败，重试或配HTTPS_PROXY就行。别跟用户承诺离线安装。
坑二：粘贴片段后忘补时间轴属性。CLI 给出的 Block 片段只带data-composition-src、data-duration、data-width等属性，data-start和data-track-index要你自己补，漏了 Block 就不在时间轴上出现。
坑三：以为重装会覆盖改动。其实默认恰恰相反。装过之后被你改过的文件，再装同一条目时会被保留，输出里标 "kept"。这个保护是故意的——除非你确认要用新版，别加--force。
装一条命令，文件落哪、片段怎么来
这节讲清hyperframes add的落地行为，装完之后心里有数。
hyperframes add <name>先在目录里按名字精确匹配，从仓库的 registry/ 拉取文件写入项目。目录里的素材分两类：
| 类型 | 装什么 | 默认安装位置 |
|---|---|---|
| Blocks（区块） | 独立场景，有自己的尺寸、时长和动画时间线 | compositions/<name>.html |
| Components（组件） | 特效片段，无独立尺寸，嵌进现有场景用 | compositions/components/<name>.html |
装完 CLI 做两件事：
- 逐行列出写入的文件（改过的文件标 "kept" 表示保留）；
- 生成一段**引入片段（snippet）**并自动复制到剪贴板。Block 的片段长这样，直接粘进主合成
index.html：
<div />10 分钟装出第一个能预览的场景
这节是最小上手路径：建项目、装素材、贴片段、跑预览。环境要求只有 Node.js 22+ 和 FFmpeg。
npx hyperframes init my-video cd my-video npx hyperframes add>npx hyperframes preview
浏览器里就能看到图表场景跑起来。想装特效类组件也一样：npx hyperframes add grain-overlay（颗粒噪点）。
一个标签装齐一整类场景
这节解决"一次装好几个同类素材"的需求，做口播视频最常用。
hyperframes add有个隐藏的批量模式：参数匹配不到具体素材名时，会把它当标签，安装目录里所有带该标签的 Blocks。
npx hyperframes add captions # 一次装齐所有字幕类区块 npx hyperframes add html-in-canvas # 一次装齐所有 HTML-in-Canvas 区块
批量安装是逐个执行的，CLI 会逐项打勾汇报，失败或冲突的会标 "skipped" 并附原因，最后汇总"Installed N/M blocks"。做口播视频想一次配齐全部字幕样式，上面第一条命令就够了 🎬
![]()
查全参数，覆盖场景想清楚
这节把add的五个参数一次讲完，装之前先对号入座。
参数 作用 什么时候用 --dir <路径>指定目标项目目录 不想先cd进项目，例如hyperframes add># 用英文描述你想要什么，本地语义排序 npx hyperframes catalog --query "reveal a headline one line at a time" # 按类型 / 标签浏览 npx hyperframes catalog --type block npx hyperframes catalog --type block --tag social两条规则记牢：查询一律用英文——目录是英文写的，中文查询排不出结果，找到素材后再用任何语言写屏显文案；搜完拿到的名字才交给hyperframes add <name>安装。搜索在本地完成，装文件才需要联网。
![]()
从建项目到出片：完整工作流串一遍
这节把前面所有命令按顺序串成一条完整流水线，照着跑就能出片。
# 1. 建项目 npx hyperframes init my-video && cd my-video # 2. 按意图搜素材 npx hyperframes catalog --query "animated map flight path" # 3. 装中意的素材 npx hyperframes add nyc-paris-flight # 4. 片段贴进 index.html，补 contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.![]()
项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考