Flowbar 启动视频 是做什么的？
Remotion 项目，位于 flowbar-launch-video/ 目录中，用于生成一个约 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 # 合成定义（帧率、时长、尺寸）
│ ├── 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 }— UI 元素SPRINGS.heavy—{ damping: 15, stiffness: 80, mass: 2 }— 英雄时刻、LogoSPRINGS.bouncy—{ damping: 12 }— 俏皮的点缀效果
文字组件（来自 AnimatedText.tsx）
WordReveal— 逐词交错显示，结合clip-path遮罩。适用于有力的台词。MaskReveal— 单行clip-path遮罩揭示。适用于标签、描述。ScaleReveal— 缩放 + 模糊到清晰。适用于英雄文本（如“Meet Flowbar.”）。
图层（从底层到顶层）
THEME.bg纯色背景AmbientBackground— nature-loop.mp4 + 渐变叠加（darken 属性：0-1）- 场景内容（TransitionSeries）
FilmGrain— 透明度 0.035，每帧变化
关键经验与陷阱
动效设计
- 不要使用淡入淡出。 使用
scaleBlur过渡或基于弹簧的入场。淡入淡出看起来像 PowerPoint。 - 弹簧需要真实的物理参数。
{ damping: 200 }是临界过阻尼（看不到弹簧效果）。请使用预设值。 - 文字：遮罩揭示 > 淡入 + 滑动。 使用
clipPath: inset()配合translateY的效果比透明度和位移好 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 秒，无 vocals。
渲染
- 高质量：
--crf 18→ 约 14MB（社交媒体） - 网页版：使用
ffmpeg -crf 28 -preset slow -movflags +faststart重新编码 → 约 3MB（网站嵌入，即时流式传输） - 始终先渲染高质量版本，然后压缩——不要渲染两次。
如何添加新场景
- 创建
src/scenes/NewScene.tsx— 导出一个使用AbsoluteFill的 React 组件 - 保持背景透明（全局自然背景会透出）
- 如果需要提高文字可读性，添加暗化叠加层：
<AbsoluteFill style={{ backgroundColor: 'rgba(12,15,13,0.X)' }} /> - 使用
WordReveal/MaskReveal/ScaleReveal处理文字，使用SPRINGS.*处理动画 - 在
FlowbarLaunchVideo.tsx中添加为TransitionSeries.Sequence，并附上scaleBlur()过渡 - 同时更新
FlowbarLaunchVideo.tsx和Root.tsx中的时长计算
如何重新录制片段
- 使用 Screen Studio，设置：最小边距、自动缩放 120%、平滑光标、深色模式、1920x1080 30fps
- 仅录制 Flowbar 窗口（不包括桌面背景——我们已有了自然循环）
- 导出为高质量 MP4，放入
public/目录 - 检查时长：
ffprobe -v error -show_entries format=duration -of csv=p=0 public/clip.mp4 - 更新对应场景的
durationInFrames以匹配（向上取整到最近的秒数 × fps） - 更新
Root.tsx中的时长计算
如何更改功能导览标签
编辑 FeatureTourScene.tsx 中的 LABELS 数组：
const LABELS = [
{ text: '用 Markdown 书写。你的文件始终属于你。', startSec: 0 },
{ text: '来自每条笔记的待办事项。一个地方即可全部勾选。', startSec: 3.5 },
// ...
];
startSec 是相对于功能导览场景开始的时间（而非整个视频）。将它们与 product-tour.mp4 中发生的事件对齐。