mcpField
W
wireframe-portal-title

wireframe-portal-title

github.com/heygen-com创意与媒体74.7k10.5k 次安装今天更新
代码仓库

关于 wireframe-portal-title

用于制作 8 秒标题动画的 Hyperframes 组合技能，以立体线框字形和传送门式揭示为特色。支持替换文案并调整动画参数。

主要功能

  1. 01立体线框字形
  2. 02传送门式揭示
  3. 03可替换标题文案
  4. 04可调缓动与混乱度
  5. 05可选深度雾效

适用场景

  1. 01制作动画标题卡
  2. 02揭示替换后的文案
  3. 03为组合添加传送门效果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/heygen-com/hyperframes --skill wireframe-portal-title

安装后在 Claude Code 中输入/wireframe-portal-title确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

registry-item.json
wireframe-portal-title.html
assets/fonts/
Geist-OFL.txt

详细介绍

线框传送门标题

挤出的线框字形由随附的 Geist 字体构建，通过 TTF 加载器和多边形偏移处理，然后在传送门爆发效果中显现，爆发混乱度可调。第二段节奏会将字母替换为另一句短语，并支持按完整单词换行和自动调整字号；字母按可调缓动曲线错开出现，并带有定格故障效果，还可选择启用深度雾。

合成 ID：wireframe-portal-title。时长 8 s，帧率 30 fps，分辨率 1920×1080。

文件

  • wireframe-portal-title.html（63 KB）
  • assets/fonts/Geist-Bold.ttf（65 KB）
  • assets/fonts/Geist-Regular.ttf（65 KB）
  • assets/fonts/Geist-SemiBold.ttf（65 KB）
  • assets/fonts/Geist-OFL.txt（4 KB）

安装

运行 npx hyperframes add wireframe-portal-title 安装；默认情况下，上述文件会放在 compositions/wireframe-portal-title/ 下。然后从宿主 index.html 挂载此模块：

<div
  data-composition-id="wireframe-portal-title"
  data-composition-src="compositions/wireframe-portal-title/wireframe-portal-title.html"
  data-start="0"
  data-duration="8"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

若要使用自定义值渲染，请直接指定合成文件：

npx --yes [email protected] render 'compositions/wireframe-portal-title/wireframe-portal-title.html' --variables '{"title":"BREAKTHROUGH","replacementPhrase":"Lets do this sir!"}'

变量

通过 window.__hyperframes.getVariables() 在运行时读取；变量在合成根元素上声明为 data-composition-variables（单引号属性，纯 JSON）。

idtype默认值标签 / 范围
titlestring"BREAKTHROUGH"标题，最多 18 个字符
replacementPhrasestring"Lets do this sir!"3D 替换短语（自动布局）
phraseDurationnumber1.85短语转场时长（s），0.65–2.9，步长 0.05
phraseEasingnumber8转场缓动（1 柔和 – 8 瞬间）1–8，步长 0.25
settleGlitchnumber0.2字母定格故障强度，0–4，步长 0.05
depthFogbooleantrue深度雾（始终启用前段淡出）
subtitlestring"HYPERFRAMES PORTAL TITLE"副标题，最多 48 个字符
accentcolor"#F5C518"强调色
burstChaosnumber1爆发混乱度（0-2），0–2，步长 0.01

运行时约定

  • 一个已暂停的 GSAP 时间轴，注册为 window.__timelines["wireframe-portal-title"]。
  • 在 hf-seek CustomEvent 上重新同步；每一帧都是时间的闭式函数（仅使用带种子的 PRNG，不使用 rAF 循环或 Date.now）。
  • 渲染器：three.js 0.181.2、GSAP 3.14.2、Canvas 2D、GLSL 着色器、后期处理、带种子的 PRNG、Clipper。每个运行实例的预算约为 350 MB；一次只运行一个实例。
  • 外部运行时依赖项：https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js、https://cdn.jsdelivr.net/npm/[email protected]/clipper.js、https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js、https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/。
  • 本地字体：assets/fonts/Geist-Regular.ttf、assets/fonts/Geist-SemiBold.ttf、assets/fonts/Geist-Bold.ttf。

编辑规则（摘自源项目）

  1. data-composition-variables 必须保持为单引号属性，JSON 使用普通的 "。切勿通过 Studio 的 Design 面板保存它。
  2. 不要在静态标记中放入 <canvas>；请在运行时创建。
  3. 每个视觉状态都必须是 t 的函数；确保可安全跳转，模块才能进行渲染。

评论

支持 Markdown