# Claude による短尺アニメーションクリップの生成 — GSAP コンポジションの能力と制約

> VideoBuff の add_composition 機能は、Claude に SVG + GSAP コードを書かせて、ブラウザ内 iframe + WebCodecs で MP4 アニメーションクリップを生成し、タイムラインに直接挿入する仕組みです。キネティックタイポグラフィ、アニメーションタイトル、簡易モーショングラフィックスに使えます。能力範囲、現状の出力品質、制約、推奨ワークフローを率直に解説します。

_Last updated: 2026-05-04 · First published: 2026-05-04_

## 技術的に何をしているのか

add_composition は、Claude に SVG マークアップ + GSAP timeline スクリプトを書かせ、それをブラウザ内のオフスクリーン iframe にマウントしてタイムラインを 1 フレームずつ seek、各フレームを SVG として画像化してから WebCodecs で MP4 に encode し、出来上がったクリップを動画トラックに挿入する仕組みです。

生成されたアウトプットは普通の MP4 クリップなので、その後はトリミング・カラグレ・トランジション付加など他の VideoBuff 機能と組み合わせて編集できます。「特殊な動的オブジェクト」ではなく、ただの動画クリップです。

レンダリングは VideoBuff のタブを開いている自分のブラウザ内で完結します。サーバーには SVG / GSAP コードもアウトプットも送信されません。GSAP は Webflow が公開している標準ライセンスの下で同梱しています(詳細は「オープンソースライセンス」ページを参照)。

## うまく機能するケース

現状の出力品質で実用に耐えるのは、機能的に明確な短尺アニメーションです。

- **アニメーションタイトル** — タイトル文字がフェード/スケール/スライドインしてくる、3〜5 秒程度のオープニング
- **キネティックタイポグラフィ** — 単語ごとに stagger でリズムよく現れる短い文字列(数語〜10 語程度まで)
- **ローワーサード** — 名前/肩書が左下からスライドインするテロップ
- **数字カウンター** — 0 → 1,000,000 のように数字が動的に増えるカウントアップ表現
- **シンプルなパスモーフィング** — アイコンや図形が別の形状に滑らかに変形(MorphSVG)
- **モーションパス上の移動** — 矢印やシンボルが曲線軌道に沿って移動

要するに「動きの目的が明確で、要素数が少なく、タイポグラフィ中心の短尺カット」が得意領域です。

## 苦手なケース・現状の出力品質

期待値合わせのため率直に書きます。**現時点の出力は After Effects / Cinema 4D / Lottie のプロ制作物に勝てる水準ではありません**。

機械操作部分(add_clip / カラグレ / トランジション等) と同様、抽象的な美的指示は依然として弱いままです。

- 「映画的に」「プロっぽく」「TikTok っぽく」「クール感のあるイントロ」のようなトーン指定だけでは、ありがちな fade in 程度の結果に着地しがち
- フォント選定とレイアウトのセンスは依然 Claude の判断に左右され、ハマるときとハマらないときの差が大きい
- 複雑なシーン構成、立体感、3D 風カメラワーク、リアルなテクスチャ、パーティクルエフェクトのような表現は構造的に不可能(SVG ベースのため)
- 動画素材のオーバーレイ、写真の合成、ビデオエフェクトとの統合は composition では扱えない(別途 add_clip で重ねる)

**追加の構造的制約**:

- 最大 30 秒、最大 60fps、出力解像度は 4K まで
- SVG-only。HTML / foreignObject は WebCodecs の tainted canvas 制約で使えません
- Scroll / pointer / wheel イベントは encode 環境では発火しないため、ScrollTrigger / Draggable 系は構造的に動きません
- 文字を直接編集できない(MP4 化されているため、テキストを差し替えるには再生成が必要)

長尺で凝ったモーショングラフィックスや「カッコいい感じに任せたい」要件には現状応えられません。意図を具体的な動きの言葉(「左から 0.4 秒で slide-in、その後 0.6 秒待ってから次の単語」)で渡すほど結果は安定します。

## ワークフロー：dryRun → 本番

composition の本番 encode は SVG ラスタライズ + WebCodecs エンコードで数秒かかります。試行錯誤のたびに毎回フル encode を回すのは時間が溶けるので、dryRun fast-path を活用します。

**dryRun: パース + 検証 + 診断のみ**

`add_composition` 呼び出し時に `options.dryRun: true` を渡すと、レンダラは iframe を立てて SVG / GSAP timeline をマウントするところまで実行し、エラーや警告を返した上で encode をスキップします。タイムラインへのクリップ挿入も発生しません。返ってくる診断は次の 3 種類:

- **script-error** — agent の `<script>` が uncaught exception を投げた(timeline 構築途中で死亡など)
- **no-animation** — GSAP timeline の duration が 0 (何も tween が登録されていない、=「静止画クリップ」相当)
- **text-overflow** — `<text>` 要素のいずれかがキャンバス境界を超えてはみ出している(フォントサイズ過大 or テキスト過長)

**推奨フロー**

1. dryRun でいくつかバリエーションを書いてもらう
2. 診断を見て、no-animation や text-overflow が出たプロンプトを破棄
3. 残ったものだけ `options.dryRun: false` で本番 render

これで「encode してから "あ、文字はみ出してる" に気付く」を回避できます。本番 render は dryRun と同じ診断も同時に返してくるので、レンダリング後でも警告は確認できます。

## 使える GSAP 機能

composition iframe には以下の GSAP プラグインがプリ登録されています(別途 `registerPlugin` 不要):

- **DrawSVGPlugin** — SVG パスのストロークを順次描画(線が引かれていくアニメーション)
- **MorphSVGPlugin** — シェイプ間のスムーズなモーフィング
- **MotionPathPlugin** — 任意のパスに沿った要素の移動
- **TextPlugin** — テキスト内容を 1 文字ずつ書き換え(タイプライター効果)
- **ScrambleTextPlugin** — 文字をスクランブルしながら徐々に確定文字に収束
- **Physics2DPlugin / PhysicsPropsPlugin** — 重力 / 速度ベクトル / 摩擦による物理シミュレーション
- **CustomEase / CustomBounce / CustomWiggle** — 任意のイージングカーブ生成
- **EasePack** — 拡張イージングセット (rough, slowMo, expoScale 等)

**意図的に同梱していないもの**

- **SplitText** — HTML DOM 前提で、SVG `<text>` には子ラッパーを注入できないため動作しない
- **ScrollTrigger / ScrollSmoother / ScrollToPlugin / Observer / Draggable / Inertia** — スクロール / ポインタイベントが encode 環境で発火しないため意味がない
- **Flip** — `getBoundingClientRect` ベースでオフスクリーン iframe SVG では機能しない
- **GSDevTools / MotionPathHelper** — エディタ GUI 用 dev tool で、本番 render には出番なし

GSAP の core API (`gsap.to` / `gsap.from` / `gsap.fromTo` / `gsap.timeline` / `stagger` / 全標準 ease) は当然そのまま使えます。

## add_clip + transition との使い分け

composition は強力ですが、最初のリーチではないことが多いです。シンプルな表現は `add_clip` + `transition` のほうが軽くて再編集も楽です。

**`add_clip` + `transition` で十分なケース**

- 静的なテキストにフェード/ズーム/ブラー/ディゾルブの単発エフェクトをかけたい
- 後から文字内容を直接編集したい(composition は MP4 化済みなので再生成が必要)
- カラーグレーディングや音声エフェクトと組み合わせて使いたい

**`add_composition` が必要なケース**

- 文字単位の stagger(単語が 1 つずつ出てくる、文字が踊るようなキネティックタイポグラフィ)
- 複数要素が時間軸に沿って絡み合うシーケンス(タイトル → サブタイトル → 矢印 → アイコン の連続演出)
- パスモーフィング、モーションパス上の軌道、物理シミュレーション
- 数値カウンター、スクランブルテキストのような動的テキスト処理

**判断基準**: 「動きが timeline.to(...).to(...).to(...) と複数並ばないと表現できないか?」と自問して、Yes なら composition、No なら add_clip + transition のほうが安いことが多いです。

Claude にざっくり「タイトルアニメーション作って」と渡すと composition に流れがちですが、例えば「白文字でタイトル + 1 秒のフェードイン」程度なら add_clip + transition のほうが速く、後で「タイトルを変更して」と指示しても再生成不要で対応できます。