triptu/flowbar

Flowbar 發布影片

位於 flowbar-launch-video/ 的 Remotion 專案，製作一段約 28 秒的產品發布影片，用於社交媒體和網站嵌入。

快速指令

cd flowbar-launch-video

# 在瀏覽器中預覽
npm run studio            # 開啟 http://localhost:3000

# 渲染高品質（社交媒體用）
npx remotion render FlowbarLaunchVideo out/flowbar-launch-hq.mp4 --codec h264 --crf 18

# 壓縮用於網路（啟用 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、時長、尺寸）
│   ├── FlowbarLaunchVideo.tsx  # 主要合成 — 圖層：背景、音訊、場景、顆粒
│   ├── theme.ts                # 顏色（與網站一致）、彈簧預設
│   ├── fonts.ts                # Instrument Serif + DM Sans（Google 字型）
│   ├── scenes/
│   │   ├── ProblemScene.tsx    # 第一幕：兩個純文字痛點卡片
│   │   ├── RevealScene.tsx     # 第二幕：主鏡頭加上「Meet Flowbar」疊加文字
│   │   ├── FeatureTourScene.tsx# 第三幕：連續產品展示 + 切換標籤
│   │   └── ClosingScene.tsx    # 第四幕：Logo、標語、網址
│   ├── components/
│   │   ├── AmbientBackground.tsx  # 自然循環 + 漸層疊加 + 底片顆粒
│   │   └── 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	RevealScene	6 秒	the-reveal.mp4 + 底部「Meet Flowbar.」+ 標語
3	FeatureTourScene	16 秒	連續播放 product-tour.mp4 + 頂部 5 個標籤
4	ClosingScene	5 秒	Logo + 文字商標 + 描述 + 網址

場景間使用 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 } — 介面元素
• SPRINGS.heavy — { damping: 15, stiffness: 80, mass: 2 } — 主角時刻、Logo
• 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 的效果比透明度加位移好上十倍。
• 退場應該快速。 入場使用彈簧物理（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 檢查時長。
• 當影片短於場景時，最後一幀會凍結 — 這是預期行為。

背景

• 自然循環在所有場景背後全域播放（在 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 生成。提示：溫暖極簡電子樂，柔和的模擬 pad，88bpm，約 35-40 秒，無人聲。

渲染

• 高品質： --crf 18 → 約 14MB（社交媒體）
• 網頁：使用 ffmpeg -crf 28 -preset slow -movflags +faststart 重新編碼 → 約 3MB（網站嵌入，即時串流）
• 總是先渲染高品質，再進行壓縮 — 不要渲染兩次。

如何新增場景

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 中作為帶有 scaleBlur() 過渡的 TransitionSeries.Sequence 添加
6. 同時更新 FlowbarLaunchVideo.tsx 和 Root.tsx 中的時長計算

如何重新錄製片段

1. 使用 Screen Studio，設定：最小邊距、自動縮放 120%、平滑游標、深色模式、1920x1080 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 的時長計算

如何更改功能導覽標籤

編輯 FeatureTourScene.tsx 中的 LABELS 陣列：

const LABELS = [
  { text: "用 markdown 書寫。你的檔案永遠屬於你。", startSec: 0 },
  { text: "來自每則筆記的待辦事項。在同一個地方打勾完成。", startSec: 3.5 },
  // ...
];

startSec 是相對於功能導覽場景開始的時間（非整個影片）。需要與 product-tour.mp4 中的內容同步。