animated-video

アニメーション動画

複雑さに応じて2つの方法があります。最初に判断し、どちらの方法で進めるかをユーザーに伝えてください。

フェーズ 0 — コンテキストの事前確認（自動検出、質問は最大1つ）

方法 A と B のどちらにするか決める前に、コンテキストを確認します。

1. .claude/design-tokens.json が存在する場合は Read .claude/design-tokens.json
2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — ブランドフォルダーとの一致を確認
3. Glob でコードベースのトークンを確認
4. brief に github / Figma / image / PRD の添付がないか確認 → 取り込みスキルを実行

何も見つからない場合は、AskUserQuestion を1回だけ行います：デザインシステム／コードベース／スクリーンショット／Figma／なし／おまかせ。次のように伝えます。「 を使用します。このまま進めます。」

方法 A — Stage/Sprite を使った単独の HTML

1つの HTML ファイルで完結するアニメーション（解説動画、製品紹介、トランジションシーケンス、ヒーローアニメーションなど。通常60秒未満）に適しています。

starters/animations.jsx の Remotion 互換インブラウザーエンジンを使用します。Remotion と同じメンタルモデルですが、ランタイムが異なります（ビルド手順が不要で、Babel standalone 上で動作します）。

利用可能なプリミティブ：

プリミティブ	役割
<Stage duration width height [id] [loop] [showControls]>	ルートコンポジションです。単一の RAF クロック、フィットするように拡大縮小するキャンバス、シークバー UI、再生／一時停止を管理します。位置を localStorage に読み書きします。
<Sprite start end [easing]>	[start..end]ms の範囲内でのみアクティブになります。子要素には要素、または (localT) => element を指定できます。範囲外になるとアンマウントされます。
useTime({ stopAt? })	現在の時間をミリ秒で返します。Stage 内では共有クロックを読み取ります（負荷なし）。単独では独自の RAF を起動します（負荷が大きくなります）。
useSprite()	現在の Sprite 内におけるローカル t ∈ [0,1] を返します。
Easing	linear、inQuad、outQuad、inOutCubic、outQuart、inOutExpo、spring(stiffness, damping)
interpolate(t, [in], [out], { clamp?, easing? })	区分線形補間です。数値と16進カラーに対応します。
<FadeIn>、<FadeOut>、<SlideIn from=...>、<ScaleIn from=...>、<Reveal from=...>	入場／退場用の簡易プリミティブです。アニメーションの実行範囲が終わっても表示が維持されます（Sprite とは異なります）。
<Transition from to duration>	単独で使う一度限りのラッパーです（Stage は不要）。

手順：

1. 美的な方向性を定めるために Skill: frontend-design を実行します
2. React、Babel、animations.jsx を使って artifacts/<slug>.html を作成します
3. Bash(cp starters/animations.jsx "$(dirname <html>)/") — starter を HTML と同じ場所にコピーします
4. /serve を実行します（外部 .jsx の CORS に必要です）
5. シーンを構成します。例：

function Scene() {
  const t = useTime();  // Stage-shared clock
  // drive properties via interpolate()
  const bg = interpolate(t, [0, 2000, 5000], ['#fef9f3', '#f3d8a8', '#8a5a22'], { easing: Easing.inOutCubic });
  return (
    <div style={{ position: 'absolute', inset: 0, background: bg }}>
      <FadeIn start={0} duration={500}>
        <h1>Entry stays visible after 500ms</h1>
      </FadeIn>
      <Reveal start={400} duration={700} from="bottom" distance={40}>
        <p>Fade + slide combo</p>
      </Reveal>
      <Sprite start={1500} end={3500} easing={Easing.outQuart}>
        {(local) => <div style={{ opacity: local, transform: `scale(${local})` }}>Bounded — disappears after 3500</div>}
      </Sprite>
    </div>
  );
}

function App() {
  return <Stage duration={5000} width={1920} height={1080} loop={false}><Scene/></Stage>;
}

6. /done http://127.0.0.1:4567/artifacts/<slug>.html — シークバーの動作、アニメーションの再生、コンソールにエラーがないことを確認します
7. PPTX 用にフレームを書き出す／シークするには、外部ツールから window.postMessage({ seekMs: N, playing: false }, '*') を送信できます。Stage はこれを受け取り、指定位置にジャンプします

方法 B — Remotion（MP4 書き出し、複数シーンの動画）

長編（60秒超）、複数シーンのストーリー、または MP4 書き出しが必要な場合に適しています。

1. Skill: remotion-best-practices に委任し、Remotion のワークフロー全体に従います
2. 独立した Remotion プロジェクトとして artifacts/<slug>-remotion/ をセットアップします
3. 完了したら、プレビュー HTML と MP4 の成果物を返します

選び方

要件	方法
単一シーン、長さは問わない	A
製品紹介、1分未満の解説動画	A
複数シーンのストーリー	B
MP4 書き出しが必要	B
ブラウザーのみでプレビュー（HTML を納品）	A
正確なフレームタイミング（例：30fps の動画）	B（Remotion はフレームベースです）
物理演算／ジェスチャー駆動	Popmotion の <script src> フォールバックを使う A、または B

Popmotion フォールバック

Easing.spring() で対応できないリアルなスプリング物理演算、キーフレーム計算、ジェスチャー追跡には、次を追加します。

<script src="https://unpkg.com/[email protected]/dist/popmotion.min.js"></script>

そのうえで window.popmotion を直接使用します。

確認

方法 A：/done <url> — シークバーが最後まで到達すること、バーをクリックするとシークすること、再生／一時停止が切り替わること、コンソールにエラーがないことを確認します。このアニメーションの PPTX 用フレームが必要な場合は、スクリーンショットを撮る前に postMessage でシークします。

方法 B：Remotion のプレビューサーバー（localhost:3000）と書き出した MP4。