HyperFrames Registry 组件 demo.html 规范从预览渲染到可引用使用示例的完整实践【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本指南基于 HyperFrames 仓库中 demo-html-pattern.md 展开系统讲解 registry 组件为何必须随附demo.html、demo 文件的骨架结构与命名约定、它与组件 snippet 的职责划分以及 CI 预览管线如何消费 demo 生成目录缩略图与预览视频。读完本文你将掌握为组件编写合规 demo 的完整模板、真实仓库中的参考实现以及 demo 与 snippet 之间预览用 demo、安装用 snippet的分工边界。为什么组件要随附 demo.html在 HyperFrames 的 registry 体系中每个组件component除了交付核心的 effect snippet 之外还必须随附一个同名的demo.html文件。这个约定同时服务两个目的预览夹具Preview fixture——CI 预览管线会渲染 demo 文件为目录文档页catalog docs page生成缩略图与预览视频。没有 demo组件在目录里就没有可视化预览。使用示例Usage example——demo 将组件效果应用在具有代表性的内容上展示这个效果应该怎么用是作者与使用者都能对照的活的参考实现。这一点在源码中也有印证scripts/generate-catalog-previews.ts 的注释明确区分了两类条目的渲染入口Blocks: renders the blocks standalone HTML via a wrapper index.html与Components: renders the components demo.html via a wrapper index.html——即块渲染自身 HTML组件则渲染 demo.html两者都会套一层 wrapper 用于预览捕获。demo 的骨架结构一份 demo 是完整、独立的 HTML 合成composition典型结构如下!doctype html html langen head meta charsetUTF-8 / meta nameviewport contentwidth1920, height1080 / titleComponent Name — Demo/title script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script style /* reset canvas size */ /style /head body div>data-composition-id为component-name-demo且与window.__timelines的注册键完全一致声明data-width1920、data-height1080、data-duration5–8 秒viewport meta 与画布一致GSAP 以gsap.timeline({ paused: true })创建动画确定性可复现无Math.random()、无Date.now()与 contributing.md 的块级要求一致snippet 的 CSS/JS 全部内联demo 可独立在浏览器打开并播放若 snippet 声明了data-composition-variablesdemo 不重复声明变量且保留组件自身的 class 以便变量脚本寻址演示内容具有代表性真实文案、真实数据形态并遵守 placeholder-material.md 的占位内容规范通过hyperframes lint与hyperframes check --no-contrast校验详见 contributing.md 的 Validate 步骤延伸阅读组件贡献完整流程与质量门禁块与组件的模板与 registry-item.json 模板组件质量要求Registry 技能总览与安装/接线说明预览管线实现scripts/generate-catalog-previews.ts变量组件与 demo 的叠加机制scripts/catalog/component-variables.ts【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
