用途:这是一个 HyperFrames 动效块(composition id:wireframe-portal-title),用于生成 1920×1080、8 秒、30fps 的标题动画。挤出线框字母由内置 Geist 字体经 TTF 加载与多边形偏移生成,先通过传送门爆裂显现,再整体替换为第二段短语,支持整词换行与自动字号,并带可调缓动、落定故障与可选深度雾。
主要能力与变量:title(默认 BREAKTHROUGH,最多 18 字符)、replacementPhrase(默认 Lets do this sir!)、phraseDuration(1.85,范围 0.65–2.9)、phraseEasing(8,1–8)、settleGlitch(0.2,0–4)、depthFog(true)、subtitle(最多 48 字符)、accent(#F5C518)、burstChaos(1,0–2)。变量在运行时通过 window.__hyperframes.getVariables() 读取,并在根节点以 data-composition-variables 单引号属性声明。
使用方式:安装命令为 npx hyperframes add wireframe-portal-title,文件默认落在 compositions/wireframe-portal-title/。随后在宿主 index.html 中挂载该块(data-composition-id、data-composition-src、data-start、data-duration、data-track-index、data-width、data-height)。自定义渲染示例:npx --yes hyperframes@0.8.12 render 'compositions/wireframe-portal-title/wireframe-portal-title.html' --variables '{"title":"BREAKTHROUGH","replacementPhrase":"Lets do this sir!"}'。
运行时与限制:注册一个暂停的 GSAP 时间轴 window.__timelines["wireframe-portal-title"],通过 hf-seek 事件重新同步,每帧为时间的闭式函数(仅用种子 PRNG,无 rAF 循环、无 Date.now)。依赖 three.js 0.181.2、GSAP 3.14.2、Canvas 2D、GLSL、后处理、Clipper,外部依赖经 jsDelivr CDN 加载,字体为本地 Geist TTF。每个活动实例约占用 350 MB,建议一次只运行一个。编辑规则:data-composition-variables 须保持单引号属性与纯 JSON,勿经 Studio 设计面板保存;不要在静态标记中放 canvas,需运行时创建;所有视觉状态须为 t 的函数以保证可寻址渲染。