企业官网建设流程全解析

hyperframes add 新手指南：一条命令装好专业视频组件

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

HyperFrames 是一个"写 HTML、渲染出 MP4"的开源视频渲染框架，hyperframes add命令可以从官方组件目录（Registry，一份集中托管的可安装素材清单）一条命令装好现成的视频组件，装完即用。本文面向新手，带你从零走通"装第一个组件"的完整流程。

痛点：再别为一张图表动画手搓一下午

做产品讲解视频时，第二幕需要一段"数据图表动起来"的场景。自己写的话：搭 HTML 骨架、画坐标轴、接 GSAP 动画库（一个 JS 动画库）、调节奏对齐时长，顺利也要大半天，效果还未必专业。

hyperframes add直接解决这个问题：一条命令把现成的动画场景写进你的项目。目录里有数百个条目，分两种：

以data-chart为例：它是 1920×1080、15 秒的柱状+折线动画场景，带逐条入场和数值标签——装进来就能进你的时间轴。

准备：两样依赖装好就能开工

环境要求（与仓库 README 一致）：

• Node.js 22+和FFmpeg（负责把画面渲染成 MP4）
• 能访问 registry 的网络。⚠️ 组件的清单（manifest）有本地缓存，但组件文件每次安装都实时下载——离线只能搜、不能装
• 无需 clone 仓库，npx即可调用 CLI

实操走通：一条命令装进专业图表场景

建个空项目。运行npx hyperframes init my-video，得到my-video目录，里面有index.html主合成文件（你的时间轴挂在这里）。之后所有安装都在这个目录里做。

装第一个 Block。进入my-video，执行：

npx hyperframes add><div />
进阶玩法：三个真实使用场景
一次配齐字幕全家桶：按标签批量安装
参数匹配不到具体组件名时，add会把它当标签处理，把所有带该标签的 Block 逐个装进来。做口播视频想一次拿齐字幕样式：
npx hyperframes add captions
CLI 会逐个汇报✓ 成功 / ✗ 跳过及原因，最后给出Installed x/y blocks汇总。口播画面本身也是现成的目录素材：
不知道组件名？用英文描述你想要的"动作"
目录条目远多于肉眼能扫完的数量，官方建议先按意图搜索：
npx hyperframes catalog --query "reveal a headline one line at a time"
搜索在本地完成、不外发数据。注意查询一律用英文——目录以英文编写，中文查询会因为没有可检索词而返回空（提示No searchable words in query是这个原因，不是缺组件）。视频里的屏显文案可以写任何语言，搜素材时只描述"这个画面该怎么动"即可。找到名字，再add安装。
脚本化流水线：让 CI 与 Agent 替你装
在自动化流程里，剪贴板没有意义，JSON 才方便解析：
npx hyperframes add contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes