hyperframes add 完全指南3 条命令装出现成视频组件【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 是开源的 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.htmlComponents组件特效片段无独立尺寸嵌进现有场景用compositions/components/name.html装完 CLI 做两件事逐行列出写入的文件改过的文件标 kept 表示保留生成一段**引入片段snippet**并自动复制到剪贴板。Block 的片段长这样直接粘进主合成index.htmldiv />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），仅供参考
