Remotion プロダクトデモ動画
Remotion を使用して、Apple キーノートスタイルの本格的なプロダクトデモ動画を作成します。
クイックスタート
プロジェクト: ~/Projects/tails-video/
テンプレート: src/templates/GlassPhoneDemo.tsx
cd ~/Projects/tails-video
npx remotion render src/index.ts GlassPhoneDemo out/demo.mp4 \
--codec=h264 --crf=18
カスタムコンテンツは --props で:
npx remotion render src/index.ts GlassPhoneDemo out/custom.mp4 \
--props='{"scenes":[{"type":"hero","durationInSeconds":3}],"brand":{"name":"YourBrand"}}'
テンプレート: GlassPhoneDemo
スキーマ (Zod)
{
scenes: Array<{
type: 'hero' | 'voice' | 'typing' | 'cards' | 'detail' | 'dropdown' | 'endCard',
title?: string,
subtitle?: string,
text?: string, // typing シーン
cards?: Array<{ name, category, detail?, emoji? }>, // cards シーン
items?: Array<{ name, price? }>, // detail シーン
options?: Array<{ label, sublabel?, icon? }>, // dropdown シーン
durationInSeconds: number // デフォルト 3
}>,
accentColor: string, // デフォルト '#3B82F6'
bgStyle: 'light' | 'warm' | 'cool',
deviceAngle: number, // デフォルト 8 (Y軸回転の角度)
brand?: { name: string, tagline?: string }
}
シーンタイプ
| タイプ | ビジュアル | 主なプロパティ |
|---|---|---|
| hero | 「タップして入力」＋アクションボタン付きの電話画面 | — |
| voice | マイクアイコン＋連続リップルリング | — |
| typing | カーソル付きの1文字ずつ表示されるテキスト | text |
| cards | 段階的に表示されるカードリスト（レストランスタイル） | cards[], title |
| detail | フィルターピル＋価格付きアイテムグリッド | items[], title, subtitle |
| dropdown | ガラスモーフィックなオプションピッカー | options[], text |
| endCard | 電話がフェードアウトし、ブランドが中央に表示 | — (トップレベルの brand を使用) |
推奨シーンフロー
典型的なデモは次の順序に従います: hero → voice → typing → results → detail → typing → dropdown → endCard
時間配分の目安: hero 3秒, voice 2秒, typing 3秒/コマンド, cards/detail 4秒, dropdown 3秒, endCard 2秒。
ビジュアルスタイルルール
references/apple-aesthetic.md で完全なスタイルガイドを参照してください。
主なルール:
- 背景: 放射状グラデーション、スペキュラーハイライト、キャストシャドウを持つソフトな3D球体
- 電話: iPhoneスタイルのメタルベゼルグラデーション、Dynamic Island、サイドボタン、ホームインジケーター、ガラス反射オーバーレイ、接地シャドウ
- 色: モノクロの白/グレー＋設定可能な単一のアクセントカラー
- モーション: すべて
useCurrentFrame()とspring({damping: 200})で実現。CSSアニメーションは使用しません。
アニメーションパターン
references/animation-patterns.md でスプリング設定、タイミング計算式、イージングパターンを参照してください。
主なパターン:
- 登場:
spring({ frame: sceneFrame, fps, config: { damping: 200 } })→ opacity + translateY - 段階表示: 各アイテムを
i * 6フレーム遅延 - 浮遊:
Math.sin(globalFrame / 45) * 12で優しいドリフト - タイピング:
Math.floor((sceneFrame - delay) * 0.55)文字数分表示 - リップル: モジュロ演算で連続:
(frame + ring * offset) % cycleDuration - クロスフェード: シーンを重ねて、
-transitionFramesから0でフェードイン、dur - transitionFramesからdurでフェードアウト
改善バックログ
現状: 良好だが、完璧ではない。既知のギャップ:
- Three.js 背景球体 — CSS 放射グラデーション球体は最大 7/10。適切な照明を備えた本物の
@remotion/three= 9/10 - 実際の画像 — 色付きプレースホルダーブロックを
<Img>コンポーネントを使った Unsplash/Pexels の料理写真に置き換える - 可変タイピング速度 — 一般的な単語は速く、スペースで少し間を置く
- 画面のグロー — 電話画面の端から漏れる微妙なアンビエントライト
- 定数ファーストパターン — すべてのマジックナンバーをファイル上部の名前付き定数に抽出（Remotion 公式推奨）
新しいテンプレートの作成
新しいプロダクトデモテンプレートを構築する場合:
- 参照動画をフレームごとに分析（1秒間隔で抽出）
- ビジュアルコンポーネントを特定: 背景、デバイス、コンテンツ、トランジション
- Zod スキーマを定義 シーンタイプと設定可能なプロパティを含める
- コンポーネントをボトムアップで構築: 背景 → デバイスフレーム → シーン → トランジション
- 各ステップでテスト — フル動画の前に個々のフレームをレンダリング
- ビジョンモデルで QA — フレームを抽出し、品質を評価、反復
Remotion のルールに厳密に従ってください: skills/remotion-best-practices/ のルールファイルを参照してください。