triptu/flowbar

Flowbar ローンチビデオ

Remotion プロジェクト（flowbar-launch-video/）で、ソーシャルメディアと Web サイト埋め込み用の製品ローンチビデオ（約 28 秒）を制作します。

クイックコマンド

cd flowbar-launch-video

# ブラウザでプレビュー
npm run studio            # http://localhost:3000 が開く

# 高品質レンダリング（ソーシャル向け）
npx remotion render FlowbarLaunchVideo out/flowbar-launch-hq.mp4 --codec h264 --crf 18

# Web 向け圧縮（ストリーミング用 faststart）
ffmpeg -i out/flowbar-launch-hq.mp4 -c:v libx264 -crf 28 -preset slow -c:a aac -b:a 128k -movflags +faststart out/flowbar-launch-web.mp4 -y

アーキテクチャ

flowbar-launch-video/
├── public/                     # 静的アセット（ビデオ、オーディオ）
│   ├── nature-loop.mp4         # 環境背景（全体でループ）
│   ├── the-reveal.mp4          # ヒーローショット：デスクトップ → Fn → Flowbar 登場（5.9 秒）
│   ├── product-tour.mp4        # 単一の連続スクリーンレコーディング（15.6 秒）
│   └── audio.mp3               # 背景音楽
├── src/
│   ├── Root.tsx                # コンポジション定義（fps、duration、dimensions）
│   ├── FlowbarLaunchVideo.tsx  # メインコンポジション — 背景、オーディオ、シーン、グレインを重ねる
│   ├── theme.ts                # 色（Web サイトと統一）、スプリングプリセット
│   ├── fonts.ts                # Instrument Serif + DM Sans（Google Fonts）
│   ├── scenes/
│   │   ├── ProblemScene.tsx    # ACT 1：テキストのみのペインカード 2 枚
│   │   ├── RevealScene.tsx     # ACT 2：ヒーローショット＋「Meet Flowbar」オーバーレイ
│   │   ├── FeatureTourScene.tsx# ACT 3：連続プロダクトデモ＋ラベル切り替え
│   │   └── ClosingScene.tsx    # ACT 4：ロゴ、タグライン、URL
│   ├── components/
│   │   ├── AmbientBackground.tsx   # 自然ループ＋グラデーションオーバーレイ＋FilmGrain
│   │   └── AnimatedText.tsx        # WordReveal、MaskReveal、ScaleReveal
│   └── transitions/
│       └── scaleBlur.tsx       # カスタム遷移：スケール＋ブラー（フェードではない！）
└── out/                        # レンダリング出力

ビデオ構造とタイミング

Root.tsx で計算された長さ：(5 + 6 + 16 + 5) * 30fps - 45 (遷移) - 60 (トリム) = 855 フレーム ≈ 28.5 秒

幕	シーン	長さ	内容
1	ProblemScene	5 秒	自然背景の上にテキストカード 2 枚。単語ごとの表示。
2	RevealScene	6 秒	the-reveal.mp4 ＋下部に「Meet Flowbar.」＋タグライン
3	FeatureTourScene	16 秒	product-tour.mp4 連続再生 ＋上部に 5 つのラベル
4	ClosingScene	5 秒	ロゴ＋ワードマーク＋説明＋URL

幕間の遷移は scaleBlur() と springTiming({ damping: 18, stiffness: 120 }) を使用します。

デザインシステム

カラー（theme.ts、flowbar.tushar.ai と統一）

• 背景：#0c0f0d
• テキスト：#ede9df
• ミュート：#9a9488
• アクセント：#c99b6d / #ddb88a

スプリングプリセット（theme.ts より）

• SPRINGS.smooth — { damping: 200 } — テキスト表示、さりげない登場
• SPRINGS.snappy — { damping: 20, stiffness: 200 } — UI 要素
• SPRINGS.heavy — { damping: 15, stiffness: 80, mass: 2 } — ヒーローモーメント、ロゴ
• SPRINGS.bouncy — { damping: 12 } — 遊び心のあるアクセント

テキストコンポーネント（AnimatedText.tsx より）

• WordReveal — 単語ごとに clip-path マスクで段階表示。インパクトのある行に使用します。
• MaskReveal — 単一行の clip-path 表示。ラベル、説明に使用します。
• ScaleReveal — スケール＋ぼかしからシャープへ。ヒーローテキスト（「Meet Flowbar.」）に使用します。

レイヤー（下から上）

1. THEME.bg 単色
2. AmbientBackground — nature-loop.mp4 ＋グラデーションオーバーレイ（darken プロパティ: 0-1）
3. シーンコンテンツ（TransitionSeries）
4. FilmGrain — 不透明度 0.035、フレームごとにずれる

主要な学びと落とし穴

モーションデザイン

• フェードは使わない。 scaleBlur 遷移またはスプリングベースの登場を使用。フェードは PowerPoint のようになります。
• スプリングには現実の物理法則が必要。 { damping: 200 } は過減衰（バネ効果が見えない）。プリセットを使用してください。
• テキスト：マスク表示 > フェード＋スライド。 clipPath: inset() と translateY の組み合わせは、opacity+translate より 10 倍見た目が良くなります。
• 終了は素早く。 登場はスプリング物理（12-18 フレーム）、終了はクイックリニア（5-8 フレーム）。
• シリーズの最後のラベル：終了フェードをスキップ。 isLast フラグを渡して、シーン終了まで最終ラベルを保持します。

ビデオ処理

• objectFit: "contain"（"cover" ではなく）を使用して、メニューバーを含む録画全体を表示。背景を THEME.bg で塗りつぶします。
• この Remotion バージョンでは pauseWhenBuffering は使用できません。使用しないでください。
• シーン長はビデオ長以上でなければなりません。そうしないとビデオが途切れます。ffprobe -v error -show_entries format=duration -of csv=p=0 file.mp4 で確認してください。
• ビデオがシーンより短い場合、最後のフレームが静止する — これは意図された動作です。

背景

• 自然ループはすべてのシーンの背後で GLOBAL に再生されます（FlowbarLaunchVideo.tsx 内、シーンごとではありません）。
• シーンは透明 — 上にオーバーレイします。
• クロージングシーンは独自の rgba(12,15,13,0.7) 暗転レイヤーを追加し、背景を押し下げてテキストの可読性を確保します。
• 問題提起シーンは rgba(12,15,13,0.35) の暗転を追加します。

オーディオ

• ファイル：public/audio.mp3。staticFile("audio.mp3") で参照。
• 音量：最初の 1 秒でフェードイン（0→0.5）、最後の 2 秒でフェードアウト（0.5→0）。
• Gemini または Suno で生成。プロンプト：温かみのあるミニマルエレクトロニック、ソフトなアナログパッド、88bpm、約 35～40 秒、ボーカルなし。

レンダリング

• HQ：--crf 18 → 約 14MB（ソーシャルメディア向け）
• Web：ffmpeg -crf 28 -preset slow -movflags +faststart で再エンコード → 約 3MB（Web サイト埋め込み、即時ストリーミング）
• 常に最初に HQ をレンダリングし、その後圧縮 — 2 回レンダリングしない。

新しいシーンの追加方法

1. src/scenes/NewScene.tsx を作成 — AbsoluteFill を使用した React コンポーネントをエクスポート
2. 背景を透明に保つ（グローバル自然背景が透けて見える）
3. テキストの可読性が必要な場合は暗転オーバーレイを追加：<AbsoluteFill style={{ backgroundColor: "rgba(12,15,13,0.X)" }} />
4. テキストには WordReveal / MaskReveal / ScaleReveal を、アニメーションには SPRINGS.* を使用
5. FlowbarLaunchVideo.tsx に TransitionSeries.Sequence として追加し、scaleBlur() 遷移を設定
6. FlowbarLaunchVideo.tsx と Root.tsx の両方で duration 計算を更新

クリップの再録画方法

1. Screen Studio を使用し、最小パディング、自動ズーム 120%、スムーズカーソル、ダークモード、1920×1080 30fps に設定
2. Flowbar ウィンドウのみを録画（デスクトップ背景は不要 — 自然ループがあるため）
3. 高品質 MP4 としてエクスポートし、public/ に配置
4. 長さを確認：ffprobe -v error -show_entries format=duration -of csv=p=0 public/clip.mp4
5. 対応するシーンの durationInFrames を合わせる（最も近い秒 × fps に切り上げ）
6. Root.tsx の duration 計算を更新

機能ツアーラベルの変更方法

FeatureTourScene.tsx の LABELS 配列を編集：

const LABELS = [
  { text: "マークダウンで書く。あなたのファイルはあなたのまま。", startSec: 0 },
  { text: "すべてのノートから Todo。一箇所でチェック。", startSec: 3.5 },
  // ...
];

startSec は機能ツアーシーンの開始を基準としています（ビデオ全体ではありません）。product-tour.mp4 の内容に合わせてタイミングを調整してください。