尧图网页设计 
HyperFrames 组件安装完全指南一条 hyperframes add 命令装好现成视频组件【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 是一个写 HTML渲染出 MP4的开源视频框架。它的内置命令hyperframes add能从官方组件目录Registry里把一个现成的视频组件装进你的项目转场、字幕、图表场景、地图动画都能装完就用。这篇文章按选什么 → 怎么装 → 怎么接 → 出坑怎么办的顺序带你把这条链路走一遍。先分清两类素材Block 和 Component目录里的素材分两种接入方式不一样动手前先把类型定下来类型人话解释默认安装位置Block区块独立场景文件自带尺寸、时长和动画时间线compositions/name.htmlComponent组件特效片段没有独立尺寸要贴进现有场景里compositions/components/name.html所有素材都来自仓库的 registry/ 目录。判断标准很简单你要的是一整段场景比如一个图表、一张地图动画选 Block你要的是一层效果比如颗粒噪点、光泽扫过选 Component。不知道装什么先用 catalog 按意图搜索目录里有数百个条目靠肉眼一个个翻既慢又容易漏。官方建议的路径是先按你想让画面做什么搜再装。# 用英文描述你要的效果本地语义排序 npx hyperframes catalog --query reveal a headline one line at a time # 或按类型 / 标签浏览 npx hyperframes catalog --type block --tag social两个注意点。查询一律用英文——目录是用英文编写的换成中文会检索不到任何词条但视频里的屏显文案想写什么语言都可以别把这两件事搞混。选定名字后用hyperframes add name安装即可。一条命令装进项目单个与批量先建项目要求 Node.js 22 和 FFmpeg再装npx hyperframes init my-video cd my-video npx hyperframes add>npx hyperframes add captionsCLI 会逐个安装最后汇报成功和跳过的数量。带依赖的条目会先装依赖、再装本体。常用参数参数作用--dir 路径指向另一个项目目录如--dir ./my-video--json输出机器可读结果供脚本或 AI 代理解析--no-clipboard跳过剪贴板复制CI / 无头环境用--vars JSON把目录页上的变量值写进引入片段--force覆盖你安装后修改过的文件默认保留你的改动参数和标签回退逻辑的实现可以看源码 packages/cli/src/commands/add.ts。装完怎么接入主合成安装完成后CLI 会列出写了哪些文件并把一段引入片段snippet复制到剪贴板。两类素材的接法不同Block把片段粘进index.html补上时间轴属性div contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames 组件安装完全指南：一条 hyperframes add 命令装好现成视频组件
HyperFrames 组件安装完全指南一条 hyperframes add 命令装好现成视频组件【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 是一个写 HTML渲染出 MP4的开源视频框架。它的内置命令hyperframes add能从官方组件目录Registry里把一个现成的视频组件装进你的项目转场、字幕、图表场景、地图动画都能装完就用。这篇文章按选什么 → 怎么装 → 怎么接 → 出坑怎么办的顺序带你把这条链路走一遍。先分清两类素材Block 和 Component目录里的素材分两种接入方式不一样动手前先把类型定下来类型人话解释默认安装位置Block区块独立场景文件自带尺寸、时长和动画时间线compositions/name.htmlComponent组件特效片段没有独立尺寸要贴进现有场景里compositions/components/name.html所有素材都来自仓库的 registry/ 目录。判断标准很简单你要的是一整段场景比如一个图表、一张地图动画选 Block你要的是一层效果比如颗粒噪点、光泽扫过选 Component。不知道装什么先用 catalog 按意图搜索目录里有数百个条目靠肉眼一个个翻既慢又容易漏。官方建议的路径是先按你想让画面做什么搜再装。# 用英文描述你要的效果本地语义排序 npx hyperframes catalog --query reveal a headline one line at a time # 或按类型 / 标签浏览 npx hyperframes catalog --type block --tag social两个注意点。查询一律用英文——目录是用英文编写的换成中文会检索不到任何词条但视频里的屏显文案想写什么语言都可以别把这两件事搞混。选定名字后用hyperframes add name安装即可。一条命令装进项目单个与批量先建项目要求 Node.js 22 和 FFmpeg再装npx hyperframes init my-video cd my-video npx hyperframes add>npx hyperframes add captionsCLI 会逐个安装最后汇报成功和跳过的数量。带依赖的条目会先装依赖、再装本体。常用参数参数作用--dir 路径指向另一个项目目录如--dir ./my-video--json输出机器可读结果供脚本或 AI 代理解析--no-clipboard跳过剪贴板复制CI / 无头环境用--vars JSON把目录页上的变量值写进引入片段--force覆盖你安装后修改过的文件默认保留你的改动参数和标签回退逻辑的实现可以看源码 packages/cli/src/commands/add.ts。装完怎么接入主合成安装完成后CLI 会列出写了哪些文件并把一段引入片段snippet复制到剪贴板。两类素材的接法不同Block把片段粘进index.html补上时间轴属性div contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考