HyperFrames telemetry-hud 组件实战四角遥测数值滚动 HUD 的接入、变量与确定性实现解析【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本指南以 HyperFrames 仓库中的telemetry-hud运动基元motion primitive为核心讲解如何在产品演示类视频中接入一套静态主体 四角遥测读数的 HUD 装饰层四个圆角描边括号逐角绘制label: value数据行淡入并按 cue 逐字符滚动到最终值其中一个读数以强调色呈现主体全程不动、HOLD 阶段完全静止。读完本文你将掌握该组件的安装方式、全部变量与默认值的含义、插槽slot机制以及其text-at-time 确定性取值与单一属性属主的底层实现原理。组件定位与文件构成telemetry-hud是一个product-demo家族、holdable配置文件的可挂载子合成mountable sub-composition它不自带分辨率与时长尺寸和时长完全来自宿主合成host composition。它在 registry-item.json 中登记的元数据为类型hyperframes:component标签含motion-primitive、product-demo、hud、telemetry、deterministic使用场景jobs: [demonstrate]即专门服务于演示/展示型镜头同步点readouts-settled位于 IN 阶段 2.35s 处默认参数下最后一个默认读数滚动完成的时间。仓库中该组件的完整文件清单如下文件说明telemetry-hud.html可挂载子合成的源文件安装目标为compositions/components/telemetry-hud.htmlregistry-item.json注册表元数据与完整变量声明含min/max/step、枚举选项等demo.html独立演示合成通过data-composition-src挂载该基元并传入非默认变量此外官方目录页 docs/catalog/components/telemetry-hud.mdx 内置了VariablesExplorer交互式变量面板预览数据来自docs/public/catalog/components/telemetry-hud.json并给出与本组件源文件一致的完整源码与安装说明可作为交互调参的参考入口。变量说明五个入参的默认值与边界该基元所有变量都有默认值因此原样安装即可工作。变量以data-variable-valuesJSON 的形式设置在挂载元素上完整变量表如下与 registry-item.json 中variables块一致id类型默认值说明readoutsstringfps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB逗号分隔的label:value对最多 8 个第一个冒号切分标签与数值后续冒号保留在数值内emphasizenumber0强调色读数下标范围-1到7步长 1-1关闭强调cuesstring逗号分隔的秒数相对挂载起点cue N 触发第 N 个读数的滚动空串使用内置节奏accentenumgreen强调读数颜色green映射到--brandblue映射到--accentviolet映射到--accent-2exitenumnone出场过渡none保持最后一帧fade淡出up淡出同时上移释放舞台源码层面的实现细节见 telemetry-hud.html 的脚本段readouts 解析pair.indexOf(:)取第一个冒号左侧为 label、右侧为 value均做trim()空 label 的条目被过滤超过 8 个截断。因此latency:11.8 ms这类含空格与单位的数值可直接书写url:https://x/y:z这类含多个冒号的 value 也不会被误切。emphasize 钳制emphasize经Math.round后取整并钳制到readouts.length - 1越界不会报错-1时没有任何读数获得th-em类。accent 的主题语义每个枚举值路由到不同的契约 token--brand、--accent、--accent-2使强调色在主题切换下仍然有意义。源码还处理了一个特殊情况当打包器把合成变量镜像为作用域 CSS 自定义属性、导致本单元自己的--accent遮蔽契约 token 时会回退到字面量#38bdf8以保证blue语义不丢失。exit 白名单只有fade与up两个值生效其余一律归一为none。时序包络固定的 IN/OUT 与完全静止的 HOLD组件遵循 HyperFrames 的固定 IN/OUT、弹性 HOLD包络规范从不使用gsap.timeScale()缩放源码头部注释对此有明确说明。相关时间常量在源码中如下常量值含义STAGE_IN0.45s舞台stage淡入时长BRACKET_AT0.12s首个括号开始绘制的时间BRACKET_DRAW0.5s每个括号的描边绘制时长READ_IN_AT0.45s读数行开始淡入的时间TICK0.5s单个数值的完整滚动时长STILLNESS0.25s出场前必须保留的静止缓冲OUTexit为none时 0否则min(0.45, duration * 0.2)出场时长三段式包络的完整行为IN舞台 0.45s 淡入括号自 0.12s 起逐角绘制相邻角间隔 0.08s读数行按 0.07s 步进错峰淡入仅透明度无位移各数值按 cue 落地。HOLD最后一个 tick 落地之后的全部时间为弹性保持段完全静止breathes zero。OUT仅当exit为fade或up时存在 0.45s 出场fade只做透明度渐隐up额外把舞台向上平移-5cqh。exit: none时没有任何出场动画最后一帧被保持场景过渡交由帧根frame root负责——这是 Holdable 类组件的标准职责划分。两个自适应的关键约束cue 钳制源码通过lastCueMax max(READ_IN_AT, OUT_START - STILLNESS - TICK)计算最后一个 cue 的上限保证每个 tick 都在出场前的静止缓冲之前完成不会出现数值还没滚完就开始淡出的重叠。readouts-settled同步点默认节奏4 条读数最后一条 cue 为1.0 3 × 0.28 1.84stick 结束于 2.34s下该同步点在挂载后约 2.35s 触发可用于宿主编排后续镜头。角落分配规则读数不按书写顺序线性排列而是按四个角循环分配左上 → 右上 → 左下 → 右下。因此4 条读数每个角恰好 1 行8 条读数每个角 2 行列内自上而下堆叠13 条只占据前几个角。这种分配在源码中由corners[index % 4]实现配合各角容器.th-corner-tl/tr/bl/br的 flex 列布局右上、右下两角右对齐完成排版。四个括号则分别通过scaleX(-1)、scaleY(-1)、scale(-1,-1)翻转同一段 SVG pathM 46 3 L 12 3 Q 3 3 3 12 L 3 46viewBox0 0 48 48stroke-linecap: butt方形端帽得到视觉上完全对称。插槽机制主体内容如何替换基元在template内声明了一个具名插槽div classth-slot>npx hyperframes add telemetry-hud该命令对应npx hyperframes add name参见 docs/developers/cli.mdx 的 Reuse and inspect 一节会在项目中写入一个文件compositions/components/telemetry-hud.html。第二步填充插槽在compositions/components/telemetry-hud.html中把插槽的默认块替换为你的主体内容例如放一张产品截图div classth-slot>div classclip contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考