mcpField
O
orbit-card

orbit-card

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

orbit-card について

フィーチャーカードが登場し、点で構成された球体の周りを回って退場するHyperframesコンポジションスキルです。タイトル、説明、アクセント、軌道角度をカスタマイズできます。

主な機能

  1. 01カードの登場・退場アニメーション
  2. 02点の球体を一周する動き
  3. 03タイトルと説明のカスタマイズ
  4. 04アクセントと軌道角度の調整
  5. 05補間されたBlenderカメラモーション

活用シーン

  1. 01フィーチャー紹介カードのアニメーション
  2. 02製品タイトルと説明の提示
  3. 03カードの軌道角度の変更

インストール

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

$npx skills add https://github.com/heygen-com/hyperframes --skill orbit-card

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

同梱ファイル

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

orbit-card.html
registry-item.json
assets/
Archivo-LICENSE.txt
gsap-3.14.2.min.js
GSAP-NOTICE.txt
orbit-motion.js
orbit-scene.js
Three-LICENSE.txt
three.module.min.js

詳細

Orbit Card

円形の切り抜きからドット状の球体をのぞかせる、中央配置のフィーチャーカードです。カードは右から入ってきて（0.25～1.80 s）、微かな上下動と奥行き方向の移動を続けながら静止し、球体の中心を軸に一周します（4.97～5.97 s の間でスムーズステップ補間）。その後、左へ退出します（7.35～8.55 s）。カメラのパスとカードの F カーブは、承認済みの Blender リグから 30 fps でエクスポートされ、補間されます。球体は独自の平行移動と一定の回転を維持します。タイトル、説明、アクセントカラー、軌道角度は変数です。キーに手を加えなくても、180°や720°に設定できます。

コンポジション ID：orbit-card。長さは10 s、30 fps、1920×1080です。

ファイル

  • orbit-card.html（3 KB）
  • assets/Archivo-LICENSE.txt（4 KB）
  • assets/Three-LICENSE.txt（1 KB）
  • assets/archivo-regular.ttf（108 KB）
  • assets/archivo-semibold.ttf（109 KB）
  • assets/gsap-3.14.2.min.js（128 KB）
  • assets/GSAP-NOTICE.txt（1 KB）
  • assets/orbit-motion.js（59 KB）
  • assets/orbit-scene.js（8 KB）
  • assets/three.core.min.js（554 KB）
  • assets/three.module.min.js（468 KB）

インストール

npx hyperframes add orbit-card でインストールすると、デフォルトでは上記のファイルが compositions/orbit-card/ に配置されます。続いて、ホストの index.html からブロックをマウントします。

<div
  data-composition-id="orbit-card"
  data-composition-src="compositions/orbit-card/orbit-card.html"
  data-start="0"
  data-duration="10"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

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

npx --yes [email protected] render 'compositions/orbit-card/orbit-card.html' --variables '{"feature1Title":"Always in sync","feature1Desc":"Changes reach every screen the moment they happen."}'

変数

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

idtypedefaultlabel / range
feature1Titlestring"Always in sync"カードのタイトル、最大28文字
feature1Descstring"Changes reach every screen the moment they happen."カードの説明、最大110文字
feature1Accentcolor"#4cc9ff"カードのアクセントカラー
cardOrbitDegreesnumber360カードの軌道角度、-36000～36000、刻み幅1

実行時の仕様

  • window.__timelines["orbit-card"] として登録される、再生停止中の GSAP タイムラインを1つ使用します。
  • hf-seek CustomEvent に応じて再同期します。各フレームは時間から求める閉形式関数で決まります（シード付き PRNG のみを使用し、rAF ループや Date.now は使用しません）。
  • レンダラー：GSAP。
  • 外部ランタイム依存関係：なし（ローカルで配信）。
  • ローカルフォント：assets/archivo-regular.ttf、assets/archivo-semibold.ttf。

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

  1. data-composition-variables は、プレーンな " で囲んだ JSON を含むシングルクォートの属性にしてください。Studio の Design パネルから保存しないでください。
  2. 静的マークアップに <canvas> を含めないでください。実行時に作成してください。
  3. すべてのビジュアル状態を t の関数にしてください。シーク安全性によって、このブロックをレンダリング可能にできます。

コメント

Markdown 対応