mcpField
G
glass-shard-title

glass-shard-title

github.com/heygen-comクリエイティブ・メディア74.7k10.5k 回インストール今日更新
リポジトリ

glass-shard-title について

Hyperframes向けの、回転するガラス片で見出しを組み立て、カメラ前へ飛ばすコンポジションです。ガラスのタイル状シルエットと奥行きの動きを見せる短いタイトル演出に適しています。

主な機能

  1. 01Voronoi分割の破片で見出しを形成
  2. 02破片が奥から回転して飛来
  3. 03ガラス片がカメラ前を通過して退出
  4. 04タイル数を調整
  5. 0512.16秒、1080pのコンポジション

活用シーン

  1. 01ガラス片によるタイトル演出
  2. 02タイル状の見出しシルエット作成
  3. 03奥行きのある破片アニメーション

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/heygen-com/hyperframes --skill glass-shard-title

インストール後、Claude Code で/glass-shard-titleを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

build-bundle.mjs
glass-shard-title.html
registry-item.json
assets/
glass-main.mjs
Three-LICENSE.txt
assets/fonts/
CormorantGaramond-OFL.txt
Geist-OFL.txt

詳細

Glass Shard Title

ボロノイ分割されたガラス片が奥から回転しながら飛来し、見出しのシルエットをタイル状に形作って着地した後、カメラの前を通り過ぎて飛び去ります。各破片は、ジッターを加えたブロブをボロノイセルに対してクリップした Sutherland–Hodgman クリッピングによって作られるため、ピースが常に文字全体を覆います。ガラスとマットキャップのサーフェスにはフラグメントごとにフォグが適用されます。破片が奥行きを移動する様子がはっきり見えるよう、Z 軸方向の飛行はイージングから切り離されています。タイル数を 1 にすると、単一のガラス板になります。

コンポジション ID：glass-shard-title。長さは 12.16 秒、30 fps、1920×1080 です。

ファイル

  • glass-shard-title.html（16 KB）
  • assets/ferndale_studio_01_1k.hdr（1.6 MB）
  • 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）
  • assets/fonts/cormorant-garamond.woff2（37 KB）
  • assets/fonts/CormorantGaramond-OFL.txt（4 KB）
  • assets/glass-main.js（549 KB）
  • assets/Three-LICENSE.txt（1 KB）
  • assets/matcap-1.png（インストール時に CDN から取得）

インストール

npx hyperframes add glass-shard-title でインストールします。デフォルトでは、上記のファイルは compositions/glass-shard-title/ に配置されます。次に、ホスト側の index.html からブロックをマウントします。

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

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

npx --yes [email protected] render 'compositions/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Designed in glass","tileCount":8}'

変数

実行時に window.__hyperframes.getVariables() で読み取ります。コンポジションのルートに data-composition-variables として宣言します（シングルクォートで囲まれた属性で、プレーンな JSON を指定します）。

idtypedefaultlabel / range
headlinestring"Designed in glass"見出し、最大 40 文字
tileCountnumber8タイル数 1～400、ステップ 1
roundnessnumber0.4丸み（0～1）、ステップ 0.01
bevelnumber0.35ベベル（0～1）、ステップ 0.01
meshSmoothnumber0.6サーフェスの滑らかさ（0～1）、ステップ 0.01
flyInTimenumber2.3飛来時間（秒）0.2～6、ステップ 0.05
flyOutTimenumber2.4飛び去る時間（秒）0.2～6、ステップ 0.05
staggernumber0.27時間差（0～1）、ステップ 0.01
flyInRotationnumber5飛来時の回転（0～60）、ステップ 0.1
flyOutRotationnumber6飛び去る際の回転（0～6）、ステップ 0.1
chaosnumber0.25アウトラインの乱れ（0～1）、ステップ 0.01
paddingnumber1エッジの余白（0～1）、ステップ 0.01
sizeVariancenumber0.35サイズのばらつき（0～1）、ステップ 0.01
gapnumber0.03タイル間の隙間 0～0.3、ステップ 0.002
easePownumber10飛来位置のイージング（1～10）、ステップ 0.1
sideDistnumber3横方向の飛行距離 0～60、ステップ 0.5
zDistnumber-42Z 軸の飛来元（負の値）-400～0、ステップ 2
zOutnumber14Z 軸の飛び去り先（＋はカメラの前を通過）-400～60、ステップ 2
fognumber36フォグの距離（0 = オフ）0～400、ステップ 2

ランタイムの仕様

  • 一時停止状態の GSAP タイムラインを 1 つ、window.__timelines["glass-shard-title"] に登録します。
  • hf-seek CustomEvent で再同期します。各フレームは時間の閉形式関数です（シード付き PRNG のみを使用し、rAF ループや Date.now は使用しません）。
  • レンダラー：three.js 0.181.2（バンドル済み）、GSAP 3.14.2、Canvas 2D、GLSL シェーダー、HDR 環境、Matcap、シード付き PRNG、d3-delaunay、シャドウマップ。ライブインスタンスあたりの予算は約 350 MB です。一度に 1 つだけ実行してください。
  • 外部ランタイム依存関係：https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js、https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-delaunay.min.js。
  • ローカルフォント：assets/fonts/Geist-Regular.ttf、assets/fonts/Geist-SemiBold.ttf、assets/fonts/Geist-Bold.ttf。
  • バンドル済みコードはコンポジションにインライン化されています（assets/glass-main.js）。.mjs ソースを編集した後は、esbuild で再ビルドし、再度インライン化してください。

編集ルール（ソースプロジェクトより）

  1. data-composition-variables は、プレーンな " の JSON を含む単一引用符の属性にしてください。Studio の Design パネルから保存しないでください。
  2. 静的マークアップに <canvas> を入れないでください。実行時に作成してください。
  3. すべてのビジュアル状態を t の関数にしてください。シークセーフであることが、このブロックをレンダリング可能にする条件です。

コメント

Markdown 対応