mcpField
S
svg-character-animation

svg-character-animation

github.com/calesthioクリエイティブ・メディア72.7k1.3k 回インストール今日更新
リポジトリ

svg-character-animation について

svg-character-animationは、SVGパーツで構成されたキャラクターリグを動かすためのスキルです。GSAPのタイムラインや安定したピボット、Remotionでのフレーム駆動アニメーションを案内し、品質チェック項目も備えます。

主な機能

  1. 01トランスフォームによるキャラクターの動き
  2. 02複数パーツの演技を組むGSAPタイムライン
  3. 03SVG要素の安定したピボット
  4. 04Remotionでのフレーム駆動タイムライン
  5. 05アニメーションの品質チェックリスト

活用シーン

  1. 01SVGパーツで構成されたキャラクターのアニメーション
  2. 02タイムラインに沿った複数パーツの動きの同期
  3. 03現在のフレームに基づくRemotionアニメーション

インストール

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

$npx skills add https://github.com/calesthio/openmontage --skill svg-character-animation

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

詳細

SVG キャラクターアニメーション

SVG パーツで構成されたキャラクターリグをアニメーションさせる際に、このスキルを使用します。

ランタイムのルール

  • レイアウトではなく、トランスフォーム（x、y、scale、rotation）をアニメーションさせます。
  • 複数パーツの演技の動きにはタイムラインを使用します。
  • SVG 要素では、安定したピボット（svgOrigin または適切にスコープされたトランスフォームの原点）を使用します。
  • Remotion では、GSAP を requestAnimationFrame で進行させず、現在のフレームを基準に一時停止したタイムラインを駆動します。

ブラウザーのパターン

gsap.set("#arm_right", { svgOrigin: "390 310" });
const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
tl.to("#head", { rotation: -8, duration: 0.2 })
  .to("#arm_right", { rotation: 35, duration: 0.4 }, "<");

Remotion のパターン

const frame = useCurrentFrame();
const progress = frame / durationInFrames;
timeline.progress(progress);

HyperFrames のパターン

HTML／SVG／GSAP コンポーネントを決定論的なタイムラインで使用し、最終レンダリングの前に HyperFrames CLI で検証します。

品質チェックリスト

  • 動作中もパーツがピボットでつながった状態を保っています。
  • まばたき、視線、口の形が、それぞれ判別できる程度に分かれています。
  • 感情が伝わるよう、ポーズを十分な時間保っています。
  • フレームのサンプリングで、アニメーションが停止しているのではなく、意味のある変化が確認できます。

参考資料

コメント

Markdown 対応