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. 03WebGL 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

詳細

コードスライスヒーロー

正方形タイルが画面全体を覆い、ひと続きの見出しを形作ります。想像上のカーソルが画面上を横切ると、近くのタイルはガウス深度フィールドに反応して浮き上がり、傾きます。また、見出しのシルエットと重なるセルだけが裏返り、背面の見出しを見せます。グリッド全体は、前面と背面で共有するテクスチャのペアを使った単一のインスタンス化 WebGL 2 描画で構成され、投影シャドウのパスもバッチ処理されます。コピー、テキストサイズ、正方形セルのサイズはそれぞれ独立しているため、タイルが引き伸ばされることはありません。スイープ方向、イージングの強さ、カーソル半径、減衰、深度、バウンス、シャドウはすべて変数です。

コンポジション 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>

コンポジションファイルを直接指定すると、カスタム値でレンダリングできます。

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

変数

window.__hyperframes.getVariables() で実行時に読み取れます。コンポジションのルートに 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 タイムラインを 1 つ、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 の Design パネルから保存しないでください。
  2. 静的マークアップに <canvas> を入れないでください。実行時に作成してください。
  3. すべての視覚状態を t の関数にしてください。シーク安全性が、このブロックをレンダリング可能にします。

コメント

Markdown 対応