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ローダーとポリゴンオフセット処理で構築し、カオス度を変数として設定できるポータルバーストを通じて表示されます。2つ目の演出では、単語単位で折り返し、自動的に文字サイズを調整する新しいフレーズに文字を切り替えます。調整可能なイージングカーブと決着時のグリッチを付けて段階的に表示し、オプションで深度フォグも追加できます。

コンポジション ID：wireframe-portal-title。30 fps、1920×1080で8秒です。

ファイル

  • 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）で宣言します。

idtypedefaultlabel / range
titlestring"BREAKTHROUGH"タイトル。最大18文字
replacementPhrasestring"Lets do this sir!"3Dの置き換えフレーズ（自動レイアウト）
phraseDurationnumber1.85フレーズの切り替え時間（秒）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タイムラインを1つ使用し、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です。一度に実行するインスタンスは1つにしてください。
  • 外部ランタイム依存関係：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 対応