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

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

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 のほうが速く、後で「タイトルを変更して」と指示しても再生成不要で対応できます。