mcpField
C
code-slice-hero

code-slice-hero

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

关于 code-slice-hero

一个 HyperFrames 合成作品，通过方块网格呈现标题揭示动画，方块会响应虚拟光标。它使用 WebGL 2 实例化网格和批处理阴影，并可调节文案、方块尺寸及运动参数。

主要功能

  1. 01在相交方块上揭示背面标题
  2. 02围绕光标动画化方块抬升与倾斜
  3. 03渲染 WebGL 2 实例化网格
  4. 04批处理投影阴影
  5. 05调整文字、方块尺寸和运动参数

适用场景

  1. 01制作视频开场的方块标题揭示效果
  2. 02构建响应光标的网格动画
  3. 03自定义标题运动和方块几何

安装

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

$npx skills add https://github.com/heygen-com/hyperframes --skill code-slice-hero

安装后在 Claude Code 中输入/code-slice-hero确认已加载。

包含的文件

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

registry-item.json
surface.js
code-slice-hero.html
shadows.js
assets/
Geist-OFL.txt
GSAP-NOTICE.txt
gsap-3.14.2.min.js

详细介绍

Code Slice Hero

一个完整的方形图块表面承载着一条无缝衔接的标题。一个虚构的光标掠过表面；附近的图块会根据其高斯深度场抬起并倾斜，只有与任一标题轮廓相交的单元格会翻转，显露背面的标题。整个网格通过一次实例化 WebGL 2 绘制完成，使用一对共享的正反面纹理，外加一个批处理投影阴影通道。文案、文字大小和方形单元格大小彼此独立，因此图块不会拉伸。扫过方向、缓动强度、光标半径、衰减、深度、弹跳和阴影均可调整。

Composition id：code-slice-hero。时长 8 s，30 fps，1920×1080。

文件

  • code-slice-hero.html（24 KB）
  • assets/Geist-Bold.ttf（65 KB）
  • assets/Geist-OFL.txt（4 KB）
  • assets/gsap-3.14.2.min.js（128 KB）
  • assets/GSAP-NOTICE.txt（1 KB）
  • shadows.js（10 KB）
  • surface.js（8 KB）

安装

使用 npx hyperframes add code-slice-hero 安装；默认情况下，上述文件会放在 compositions/code-slice-hero/ 下。然后从宿主 index.html 挂载此区块：

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

通过直接指定 composition 文件并使用自定义值进行渲染：

npx --yes [email protected] render 'compositions/code-slice-hero/code-slice-hero.html' --variables '{"headline":"MAKE IT","reverseHeadline":"MATTER."}'

变量

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

| id | type | default | label / range | | ------------------- | ------ | ----------------- | ------------------------------------------------- | -------------- | | headline | string | "MAKE IT" | 文案 · 正面标题，最多 32 个字符 | | reverseHeadline | string | "MATTER." | 文案 · 背面标题，最多 32 个字符 | | direction | enum | "left-to-right" | 动效 · 扫过方向（从左到右 | 从右到左） | | sweepDuration | number | 4.2 | 动效 · 扫过时长 2.6–4.5，步长 0.05 | | sweepEaseStrength | number | 3 | 动效 · 扫过缓动强度 0–3，步长 0.05 | | flipDuration | number | 0.75 | 动效 · 每个图块的翻转时长 0.65–1.65，步长 0.05 | | cursorRadius | number | 210 | 光标 · 影响半径 160–480，步长 10 | | cursorFalloff | number | 1.4 | 光标 · 影响衰减 0.4–3.5，步长 0.05 | | cursorDepth | number | 80 | 光标 · 深度（+ 表示朝向摄像机）-320–320，步长 10 | | tiltStrength | number | 55 | 光标 · 拉动 / 倾斜强度 0–55，步长 1 | | noiseStrength | number | 2 | 动效 · 有机变化 0–2，步长 0.05 | | flipBounce | number | 0.15 | 动效 · 弹性翻转弹跳 0–0.8，步长 0.05 | | cellSize | number | 112 | 切片 · 方形单元格大小 24–120，步长 4 | | formationScale | number | 1 | 切片 · 局部排列缩放 0.94–1，步长 0.001 | | fontSize | number | 310 | 字体 · 最大字号 160–480，步长 5 | | behindColor | color | "#212121" | 表面 · 图块背面背景色 | | shadowStrength | number | 0.19 | 表面 · 投射阴影强度 0–0.65，步长 0.01 | | shadowSoftness | number | 4 | 表面 · 投射阴影柔和度 0.5–4，步长 0.1 |

运行时约定

  • 一个已暂停的 GSAP 时间轴，注册为 window.__timelines["code-slice-hero"]。
  • 在 hf-seek CustomEvent 触发时重新同步；每一帧都是时间的闭式函数（仅使用带种子的 PRNG，不使用 rAF 循环或 Date.now）。
  • 渲染器：GSAP、Canvas 2D、带种子的 PRNG。
  • 外部运行时依赖：无（本地提供）。
  • 本地字体：assets/Geist-Bold.ttf。

编辑规则（来自源项目）

  1. 将 data-composition-variables 保持为单引号属性，并使用普通的 " JSON。切勿通过 Studio 的设计面板保存它。
  2. 不要将 <canvas> 放入静态标记中；应在运行时创建。
  3. 确保每种视觉状态都是 t 的函数；可安全跳转是让该区块可渲染的关键。

评论

支持 Markdown