尧图网站建设 
HyperFrames 实战以 shimmer-sweep 为例掌握 Registry 组件的安装、接线与定制【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本篇以「给标题文字添加一道流动高光shimmer light sweep」为完整示例演示 HyperFrames 中组件component从hyperframes add安装、读取片段、接线进宿主合成composition、lint/preview校验到通过 CSS 变量与 GSAP 时间线参数定制的全流程。读完后你将掌握组件与块block的本质区别、hyperframes add的完整参数语义以及把任意注册表组件安全合并进自己合成的标准套路。1. 先厘清概念组件Component与块Block的区别HyperFrames 的注册表registry提供两类可复用单元hyperframes-registry SKILL 中的定义是块Block——独立的子合成sub-composition拥有自己的画布尺寸、时长和时间线通过宿主合成中的data-composition-src引用挂载组件Component——效果片段effect snippet没有独立的尺寸与时间线直接粘贴进宿主合成的 HTML并跟随宿主合成的时间线一起运动。本文的 shimmer-sweep 属于后者。这一点决定了后续接线方式你不需要像接线块那样填data-composition-src、data-start等挂载属性而是把片段里的 HTML、CSS、JS 三部分分别合并到自己的合成文件中。组件的长度、时长继承自宿主合成因此接线时无需关心画布尺寸只需把组件元素摆放在正确的 z-index 层级上见 组件接线参考。2. 场景设定用户已有一个 HyperFrames 项目希望给标题文字加一道流光扫过的高光shimmer light sweep让标题看起来更有质感。这是一个典型的组件接入场景效果本身没有独立时间线只是叠加在已有标题之上的一段高光动画。3. 第 1 步安装组件hyperframes add shimmer-sweep该命令在 add 命令实现 中的定义是从注册表安装一个块或组件到当前项目。实际安装流程由runAdd完成见 packages/cli/src/commands/add.ts关键行为包括按名字解析name参数先按精确条目名解析若没有同名条目且该值恰好是标签tag则批量安装该标签下的所有块hyperframes add captions会装下所有captions标签的块依赖先行解析结果按拓扑排序registryDependencies先安装请求的条目最后安装自动创建配置若项目还没有hyperframes.json但存在index.html命令会用默认配置自动生成示例除外add只处理块和组件若名字解析出的是示例example会明确报错并提示改用hyperframes init dir --example name。安装成功后CLI 会打印写入的文件列表以及一条接线片段include snippet。对组件来说打印的片段是!-- paste from compositions/components/shimmer-sweep.html into your composition --形式的注释提示因为组件没有挂载属性真正的接线就是手工合并文件内容块才会打印data-composition-src挂载 div见 buildSnippet。add命令还支持以下常用参数源码中的参数定义见 packages/cli/src/commands/add.ts参数作用--dir path指定目标项目目录默认当前工作目录--no-clipboard跳过剪贴板复制CI / headless 环境适用声明为正向clipboard布尔值利用 citty 的--no-取反--json以机器可读 JSON 输出写入文件与片段适合 Agent 工作流--vars json把变量值烘焙进打印的挂载片段仅对声明了变量的条目有效非法 JSON 会抛出invalid-vars错误--force覆盖自安装后被你编辑过的文件默认保留并提示kept另外值得注意的工程细节条目文件每次安装都会重新拉取不做本地缓存只有 manifest 会缓存 24 小时。因此离线时你可以搜索、可以查看条目信息但安装必然失败——describeInstallFailure会把网络类错误明确提示为注册表主机或网络问题而非命令本身写错见 packages/cli/src/commands/add.ts。4. 第 2 步阅读已安装的片段文件安装完成后打开compositions/components/shimmer-sweep.html先读文件顶部的注释头comment header。这是所有注册表片段的约定注释头说明用法、可定制的 CSS 变量及其默认值。这一步不能跳过——不同组件暴露的定制点不同注释头就是它的使用说明书。默认情况下组件安装到compositions/components/name.html。这个路径不是写死的而是由项目根目录的hyperframes.json配置{ $schema: https://hyperframes.heygen.com/schema/hyperframes.json, registry: https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry, paths: { blocks: compositions, components: compositions/components, assets: assets } }paths.components控制组件安装目录paths.blocks控制块安装目录。底层实现中remapTarget会读取该配置把条目清单里以compositions/或compositions/components/开头的目标路径前缀重映射为用户配置的目录见 packages/cli/src/commands/add.ts。例如把paths.blocks改成scenes后hyperframes add>div classshimmer-sweep-target style--shimmer-color: rgba(255, 255, 255, 0.5) h1 classtitleAI-Powered Video/h1 /div这段标记要放在你合成的div>document.querySelectorAll(.shimmer-sweep-target).forEach((el) { if (!el.querySelector(.shimmer-mask)) { const mask document.createElement(div); mask.className shimmer-mask; el.appendChild(mask); } });这段脚本是幂等的已存在.shimmer-mask的容器不会被重复添加因此多个组件共享同一段脚本或重复执行也不会产生脏 DOM。5.4 Timeline——把扫动动画挂进时间线shimmer-sweep 组件暴露了 GSAP 时间线集成接口是否暴露、如何暴露在片段注释头中说明。把下面的调用加入你的 GSAP 时间线让高光从-20%扫到120%tl.fromTo( .shimmer-sweep-target, { --shimmer-pos: -20%, }, { --shimmer-pos: 120%, duration: 1.2, ease: power2.inOut, stagger: 0.15, }, 1.5, );这里动画的不是普通 CSS 属性而是自定义属性--shimmer-pos高光位置百分比stagger: 0.15让多个目标元素依次起扫形成波浪感1.5是时间线插入位置秒。这正是组件的核心价值它复用宿主合成已有的 GSAP 时间线而不是另起一套动画时钟。6. 第 4 步Lint 与预览hyperframes lint hyperframes previewhyperframes lint在接线后校验结构问题未包裹的元素、缺失的样式、异常的嵌套等hyperframes preview启动本地预览在浏览器中实时确认光扫效果与时间线对齐情况。每次改动组件相关代码后都建议跑一遍 lint尽早暴露结构性问题。7. 第 5 步定制效果shimmer-sweep 通过 CSS 变量暴露了三个核心定制点全部可以按元素per-element覆盖变量作用默认值--shimmer-color每个元素的高光颜色可在第 5.1 步的行内样式按元素覆盖由片段定义--shimmer-width光带宽度20%--shimmer-angle扫动方向120deg时间线侧的duration、ease、stagger则控制扫动的速度与手感duration控制单次扫过时长ease控制加速曲线power2.inOut是常见的先快后慢再收尾stagger控制多目标间的起扫间隔。想做出依次扫过标题每个词的效果把每个词各自包进.shimmer-sweep-target并调大stagger即可。8. 从示例到通用方法组件接线的四条原则把 shimmer-sweep 的步骤抽象出来就是所有组件接线的通用方法论见 组件接线参考 的 Key principles组件继承宿主合成的尺寸与时长——无需关心独立画布只管元素在宿主中的层级位置把组件 HTML 放在与内容匹配的 z-index——效果层覆盖在目标内容之上且pointer-events通常关闭避免挡住交互先读片段注释头——每个片段可定制的值都写在注释头里这是第一手文档接线后运行hyperframes lint——用工具兜底结构性问题。对比另一类纯 CSS 组件如grain-overlay用keyframes做噪点动画不需要任何 GSAP 调用可以看到组件之间的差异只在是否需要时间线集成CSS-only 组件粘贴 HTML 与 CSS 即可完成时间线集成型组件如 shimmer-sweep才需要额外的 JS 注入与tl.fromTo调用。判断依据同样是片段注释头。9. 延伸阅读注册表总览与命令行速查——add、catalog搜索、标签批量安装、gap 反馈的完整语义安装位置与路径重映射——hyperframes.json#paths的完整配置说明组件接线参考——grain-overlay 完整示例与通用原则add 命令源码——安装解析、依赖排序、片段生成的实现细节hyperframes.json 配置 schema——registry与paths的字段约束【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames 实战：以 shimmer-sweep 为例掌握 Registry 组件的安装、接线与定制
HyperFrames 实战以 shimmer-sweep 为例掌握 Registry 组件的安装、接线与定制【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本篇以「给标题文字添加一道流动高光shimmer light sweep」为完整示例演示 HyperFrames 中组件component从hyperframes add安装、读取片段、接线进宿主合成composition、lint/preview校验到通过 CSS 变量与 GSAP 时间线参数定制的全流程。读完后你将掌握组件与块block的本质区别、hyperframes add的完整参数语义以及把任意注册表组件安全合并进自己合成的标准套路。1. 先厘清概念组件Component与块Block的区别HyperFrames 的注册表registry提供两类可复用单元hyperframes-registry SKILL 中的定义是块Block——独立的子合成sub-composition拥有自己的画布尺寸、时长和时间线通过宿主合成中的data-composition-src引用挂载组件Component——效果片段effect snippet没有独立的尺寸与时间线直接粘贴进宿主合成的 HTML并跟随宿主合成的时间线一起运动。本文的 shimmer-sweep 属于后者。这一点决定了后续接线方式你不需要像接线块那样填data-composition-src、data-start等挂载属性而是把片段里的 HTML、CSS、JS 三部分分别合并到自己的合成文件中。组件的长度、时长继承自宿主合成因此接线时无需关心画布尺寸只需把组件元素摆放在正确的 z-index 层级上见 组件接线参考。2. 场景设定用户已有一个 HyperFrames 项目希望给标题文字加一道流光扫过的高光shimmer light sweep让标题看起来更有质感。这是一个典型的组件接入场景效果本身没有独立时间线只是叠加在已有标题之上的一段高光动画。3. 第 1 步安装组件hyperframes add shimmer-sweep该命令在 add 命令实现 中的定义是从注册表安装一个块或组件到当前项目。实际安装流程由runAdd完成见 packages/cli/src/commands/add.ts关键行为包括按名字解析name参数先按精确条目名解析若没有同名条目且该值恰好是标签tag则批量安装该标签下的所有块hyperframes add captions会装下所有captions标签的块依赖先行解析结果按拓扑排序registryDependencies先安装请求的条目最后安装自动创建配置若项目还没有hyperframes.json但存在index.html命令会用默认配置自动生成示例除外add只处理块和组件若名字解析出的是示例example会明确报错并提示改用hyperframes init dir --example name。安装成功后CLI 会打印写入的文件列表以及一条接线片段include snippet。对组件来说打印的片段是!-- paste from compositions/components/shimmer-sweep.html into your composition --形式的注释提示因为组件没有挂载属性真正的接线就是手工合并文件内容块才会打印data-composition-src挂载 div见 buildSnippet。add命令还支持以下常用参数源码中的参数定义见 packages/cli/src/commands/add.ts参数作用--dir path指定目标项目目录默认当前工作目录--no-clipboard跳过剪贴板复制CI / headless 环境适用声明为正向clipboard布尔值利用 citty 的--no-取反--json以机器可读 JSON 输出写入文件与片段适合 Agent 工作流--vars json把变量值烘焙进打印的挂载片段仅对声明了变量的条目有效非法 JSON 会抛出invalid-vars错误--force覆盖自安装后被你编辑过的文件默认保留并提示kept另外值得注意的工程细节条目文件每次安装都会重新拉取不做本地缓存只有 manifest 会缓存 24 小时。因此离线时你可以搜索、可以查看条目信息但安装必然失败——describeInstallFailure会把网络类错误明确提示为注册表主机或网络问题而非命令本身写错见 packages/cli/src/commands/add.ts。4. 第 2 步阅读已安装的片段文件安装完成后打开compositions/components/shimmer-sweep.html先读文件顶部的注释头comment header。这是所有注册表片段的约定注释头说明用法、可定制的 CSS 变量及其默认值。这一步不能跳过——不同组件暴露的定制点不同注释头就是它的使用说明书。默认情况下组件安装到compositions/components/name.html。这个路径不是写死的而是由项目根目录的hyperframes.json配置{ $schema: https://hyperframes.heygen.com/schema/hyperframes.json, registry: https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry, paths: { blocks: compositions, components: compositions/components, assets: assets } }paths.components控制组件安装目录paths.blocks控制块安装目录。底层实现中remapTarget会读取该配置把条目清单里以compositions/或compositions/components/开头的目标路径前缀重映射为用户配置的目录见 packages/cli/src/commands/add.ts。例如把paths.blocks改成scenes后hyperframes add>div classshimmer-sweep-target style--shimmer-color: rgba(255, 255, 255, 0.5) h1 classtitleAI-Powered Video/h1 /div这段标记要放在你合成的div>document.querySelectorAll(.shimmer-sweep-target).forEach((el) { if (!el.querySelector(.shimmer-mask)) { const mask document.createElement(div); mask.className shimmer-mask; el.appendChild(mask); } });这段脚本是幂等的已存在.shimmer-mask的容器不会被重复添加因此多个组件共享同一段脚本或重复执行也不会产生脏 DOM。5.4 Timeline——把扫动动画挂进时间线shimmer-sweep 组件暴露了 GSAP 时间线集成接口是否暴露、如何暴露在片段注释头中说明。把下面的调用加入你的 GSAP 时间线让高光从-20%扫到120%tl.fromTo( .shimmer-sweep-target, { --shimmer-pos: -20%, }, { --shimmer-pos: 120%, duration: 1.2, ease: power2.inOut, stagger: 0.15, }, 1.5, );这里动画的不是普通 CSS 属性而是自定义属性--shimmer-pos高光位置百分比stagger: 0.15让多个目标元素依次起扫形成波浪感1.5是时间线插入位置秒。这正是组件的核心价值它复用宿主合成已有的 GSAP 时间线而不是另起一套动画时钟。6. 第 4 步Lint 与预览hyperframes lint hyperframes previewhyperframes lint在接线后校验结构问题未包裹的元素、缺失的样式、异常的嵌套等hyperframes preview启动本地预览在浏览器中实时确认光扫效果与时间线对齐情况。每次改动组件相关代码后都建议跑一遍 lint尽早暴露结构性问题。7. 第 5 步定制效果shimmer-sweep 通过 CSS 变量暴露了三个核心定制点全部可以按元素per-element覆盖变量作用默认值--shimmer-color每个元素的高光颜色可在第 5.1 步的行内样式按元素覆盖由片段定义--shimmer-width光带宽度20%--shimmer-angle扫动方向120deg时间线侧的duration、ease、stagger则控制扫动的速度与手感duration控制单次扫过时长ease控制加速曲线power2.inOut是常见的先快后慢再收尾stagger控制多目标间的起扫间隔。想做出依次扫过标题每个词的效果把每个词各自包进.shimmer-sweep-target并调大stagger即可。8. 从示例到通用方法组件接线的四条原则把 shimmer-sweep 的步骤抽象出来就是所有组件接线的通用方法论见 组件接线参考 的 Key principles组件继承宿主合成的尺寸与时长——无需关心独立画布只管元素在宿主中的层级位置把组件 HTML 放在与内容匹配的 z-index——效果层覆盖在目标内容之上且pointer-events通常关闭避免挡住交互先读片段注释头——每个片段可定制的值都写在注释头里这是第一手文档接线后运行hyperframes lint——用工具兜底结构性问题。对比另一类纯 CSS 组件如grain-overlay用keyframes做噪点动画不需要任何 GSAP 调用可以看到组件之间的差异只在是否需要时间线集成CSS-only 组件粘贴 HTML 与 CSS 即可完成时间线集成型组件如 shimmer-sweep才需要额外的 JS 注入与tl.fromTo调用。判断依据同样是片段注释头。9. 延伸阅读注册表总览与命令行速查——add、catalog搜索、标签批量安装、gap 反馈的完整语义安装位置与路径重映射——hyperframes.json#paths的完整配置说明组件接线参考——grain-overlay 完整示例与通用原则add 命令源码——安装解析、依赖排序、片段生成的实现细节hyperframes.json 配置 schema——registry与paths的字段约束【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考