3 个真实场景,用 hyperframes add 把现成视频组件装进你的视频项目【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 是一个写 HTML、渲染出 MP4的开源视频框架。hyperframes add这条命令能从官方组件目录一键安装字幕、图表、地图、特效等现成素材,本文按口播、数据可视化、社交批量内容三个真实场景,带你从零装到出片。场景一:口播视频,一条命令配齐全部字幕样式 ️先建一个空项目(需要 Node.js 22 和 FFmpeg):npx hyperframes init my-video cd my-video口播视频最容易卡在字幕上。与其一个个找样式,不如直接按标签整批安装——目录里所有带captions标签的区块一次进项目:npx hyperframes add captionsCLI 会逐个安装并汇报成功/跳过数量。装完后它把一段引入片段自动复制到剪贴板,贴进index.html即可。这里先交代一下装进来的东西落在哪,后面两个场景都用得上:类型是什么默认安装位置Blocks(区块)独立场景,自带尺寸、时长和动画时间线compositions/name.htmlComponents(组件)特效片段,没有独立尺寸,贴进现有场景使用compositions/components/name.html场景二:数据可视化短视频,图表和地图区块直接用 图表、地图这类场景块不用自己画。敲一条命令,data-chart动态图表区块就落进compositions/data-chart.html:npx hyperframes add>div />改好属性后跑npx hyperframes preview,浏览器里就能看到区块按时间轴入场。场景三:给画面叠特效,组件直接贴进现有场景 ✨区块是整场拿来,组件则是片段贴入。比如给口播画面加一层颗粒质感:npx hyperframes add grain-overlay组件装好后没有独立文件要引用,打开compositions/components/grain-overlay.html,把它的 HTML 贴进你的场景、style贴进样式块、script贴进脚本(放在时间轴代码之前)就完成了。做开发者向内容时可以装代码窗口区块,下面是目录里 code-snippet 区块的成品效果:社交向内容想批量取材,也可以按标签整批装,例如所有 HTML-in-Canvas 区块:npx hyperframes add html-in-canvas批量安装同样逐个汇报,装不上的会标skipped并说明原因,不会连累其他文件。装错目录、文件冲突?五个参数兜底 参数什么时候用--dir 路径人不在项目目录里时指定目标,如npx hyperframes add>npx hyperframes catalog --query reveal a headline one line at a time不想搜就按类型和标签浏览:npx hyperframes catalog --type block --tag social注意查询一律写英文——目录是英文的,其他语言搜不到任何东西;搜到名字再 add,视频里的屏显文案想用什么语言写都可以。还有一点别误会:目录清单有本地缓存,离线时搜索照常可用;但组件文件每次安装都实时下载,断网时装不进。现在就敲npx hyperframes catalog翻一轮,挑中意的名字 add 进项目,再跑npx hyperframes render收 MP4;lint、check、snapshot 等其余命令都在 docs/developers/cli.mdx 里。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考