HyperFrames whiteboard-ink 组件实战让手绘白板草稿逐笔自绘【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读whiteboard-ink是 HyperFrames 仓库registry/components/下的一个手绘白板墨迹视频原语video primitive一段手绘 SVG 草图会像真实书写一样逐笔绘制出来同时一支钢笔笔尖实时跟随当前墨迹前沿移动。它内置三套预设草图bulb 灯泡、flow 流程图、rocket 火箭并提供strokes插槽slot——把你自己编排的多笔 SVG 路径填入插槽它们就会替代预设成为画面主体笔尖跟随、逐笔节奏与墨迹法则ink law与预设完全一致。读完本文你将掌握该组件的安装方式、五个变量sketch/caption/pen/accent/exit的完整语义、自定义笔画插槽的编写规则以及如何把它挂载进宿主合成composition并理解其时间轴契约与确定性渲染原理。组件概览与仓库文件whiteboard-ink的完整实现位于 registry/components/whiteboard-ink/共四个文件whiteboard-ink.html可挂载的子合成本体也是安装目标安装后写入compositions/components/whiteboard-ink.htmlregistry-item.json注册表元数据与变量块variables block声明demo.html用于 QA 的独立挂载示例README.md本文所依据的组件契约文档。对应的官方目录页还生成了 docs/catalog/components/whiteboard-ink.mdx提供可视化变量预览与安装命令。从registry-item.json的声明看该组件type为hyperframes:componentfamily为intros-and-revealsprofile为ink-draw打上了motion-primitive、svg、line-draw、slot等标签并声明了一个同步点ink-complete默认在 3.3s 处触发。五个核心变量语义、默认值与取值表组件变量定义在组件根节点data-composition-variables中见 whiteboard-ink.html并通过宿主元素上的data-variable-values传入。完整变量表如下id类型默认值说明sketchenumbulb预设草图bulb/flow/rocket当strokes插槽中存在路径时该变量被忽略captionstringDraw the idea绘制完成后浮现的一行短文案设为空字符串则不显示penenumshowhide可移除移动的笔尖演员nib actoraccentenumgreengreen映射--brandblue映射--accentviolet映射--accent-2exitenumnonenone定格最终画面fade仅释放不透明度up额外增加轻微上浮位移从源码看运行时通过window.__hyperframes.getVariables()读取这些值并各自带有防御性回退sketch非法时回退bulb、accent非法时回退green、exit非法时回退none见 whiteboard-ink.html 中的变量解析段。accent的三种颜色在脚本中以accentColors映射表实现最终写入 CSS 变量--wbi-accent供高亮笔画的描边引用默认色值分别为var(--brand, #71f5a7)、var(--accent, #61a8ff)、var(--accent-2, #c5a3ff)。值得注意的细节是这些颜色用的是设计令牌design token引用而非硬编码颜色因此组件外观会随宿主主题的令牌值变化这也是其作为原语可复用的关键设计。时间轴包络Envelope契约组件的时间轴遵循固定 IN 与 OUT、仅 HOLD 弹性的包络模型IN 3.55s其中 3.25s 为顺序绘制阶段随后笔尖抬起并显示 captionOUT 0.45s仅当exit为fade或up时存在HOLD 是唯一弹性阶段用于吸收宿主挂载时长D与IN OUT之间的差额HOLD max(0, D - IN - OUT)当D短于IN_BASE OUT_BASE时IN 与 OUT 会一起压缩phaseScale duration / fixedTotal时间轴从不被整体缩放time-scaled——时长变化只会拉伸 HOLD 间隙保证绘制节奏恒定ink-complete同步点在默认参数下于 3.3s 触发见 registry-item.json 的syncPoints声明。源码中的常量与此完全对应DRAW_PHASE_BASE 3.25、CAPTION_BASE 0.3、IN_BASE 3.55、OUT_BASE在exitnone时为 0、否则 0.45。绘制预算按每笔最小时长 按长度加权分配剩余预算切分详见过渡段源码。strokes 插槽用你自己的 SVG 路径作画这是whiteboard-ink最具扩展性的机制。组件的 SVG 内置了一个空命名组作为插槽g classwbi-sketch>npx hyperframes add whiteboard-ink该命令会写入一个文件compositions/components/whiteboard-ink.html安装目标与 registry-item.json 中files[].target字段一致。第二步在安装副本中填充插槽组在compositions/components/whiteboard-ink.html中向插槽组填入你自己的路径。下面是一个自绘信号signal标记、并带一条强调下划线的示例g classwbi-sketch>div classclip contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
