把幻灯片/演示文稿转成带旁白自动播放动画视频（用代码重建而非…

当需要把 pitch deck、课程模块或大纲变成自播放的旁白动画视频，且幻灯片时长必须严格跟随配音时使用。

适用场景

解决思路

1. 不要录屏，而是用代码（Remotion）重建幻灯片为动态图形：逐帧确定性的元素揭示、真正缓动的转场、任意分辨率下清晰的文字、由音频长度驱动的幻灯片时长；把原 deck 当作脚本，视频是新产物。
2. 先定叙事主线再定时间与动效：用一句话说出整个 deck 的唯一核心结论（spine），每张幻灯片都必须推进这句话，否则删掉或移到附录；观众看完一遍应能复述这条主线。
3. 每张幻灯片只讲一个点：标题本身就是这个论点（写成主张，如“Churn is our real growth tax”），而不是标签（如“Churn”）；两个想法就拆成两张幻灯片。
4. 让转场承载逻辑而非只是运动：切页要回答“接下来是什么”——因此、但是、这意味着、这是证据；动效匹配逻辑动作（“还有”用安静淡入，“新一幕”用更大的推入）；不标记逻辑步骤的转场只是装饰。
5. 开头用钩子、结尾用 CTA：第一张幻灯片在约 5 秒内抓住注意力（尖锐问题、惊人数据、利害关系），不要议程或 logo 停留；最后一张陈述唯一想要的行动（如“Start the pilot”“Invest $2M for 15%”），并作为结论帧静止停留。
6. 按张力→解决的 pitch 主线排序：Problem（制造观众能感受到的张力）→ Insight（别人忽略的非显然转折，为解决方案赢得资格）→ Solution（解决前面建立的张力）→ Proof（traction、demo、数字）→ Ask（一个具体 CTA）；在问题落地前不要揭示解决方案。
7. 节奏上让画面构建与配音同步：旁白掌控时钟，揭示按旁白排程，让观众在听到那句话时读到它，绝不提前；一张幻灯片只承载一个点，旁白讲多久它就停留多久，然后转场标记逻辑步骤；某点旁白过长就拆幻灯片，而不是加速构建。
8. 唯一铁律：旁白掌控时钟。每张幻灯片时长 = 其旁白音频真实时长 + 少量余量；用 getAudioDurationInSeconds 测量每个配音片段，转成帧数作为幻灯片长度，绝不凭感觉估“约 5 秒”。
9. 在 Remotion 的 calculateMetadata()/构建步骤中按幻灯片计算：const sec = await getAudioDurationInSeconds(slide.audioUrl); const HANDLE = 0.4; slide.durationInFrames = Math.ceil((sec + HANDLE) * fps); 幻灯片内部的揭示再针对这个时长排程，让要点落在词上而非固定网格。
10. 构建式揭示只用于揭示、绝不用于装饰：在旁白讲到某元素时才显示它，让观众读到正在被说的那行而非提前三行；标题、logo、背景形状保持静止。
11. 动效选择：入场用 fade + 12–24px 上移；单元素时长 0.25–0.5s；要点间错峰 0.15–0.4s；避免 fly-in、spin、bounce、typewriter（读起来像装饰，与配音竞争）。
12. 用 useCurrentFrame() 驱动错峰以与渲染音频保持同步：const STAGGER = 8; const enter = frame# - index * STAGGER; const p = spring({ frame: enter, fps, config: { damping: 200 }, durationInFrames: 12 }); 再据此设置 opacity 与 translateY。
13. 用 @remotion/transitions 的 <TransitionSeries> 串联幻灯片：每张幻灯片是一个带旁白推导 durationInFrames 的 Sequence，之间放 Transition；转场保持安静（短淡入或轻柔滑动），内容才是主角，每刀都花哨擦除很快会累。
14. 只在章节分隔处使用更大的转场（滑动/推入），它标记“新话题”并值得额外动效；转场会借用相邻两侧的帧，若某张幻灯片旁白必须完整播放，要把转场长度加回幻灯片预算。
15. 加入标题卡与章节分隔卡给视频节奏、让观众在密集幻灯片间呼吸：把分隔卡当作自己的短“幻灯片”——大号章节编号/词、章节标题、约 1.5–2s 停留、两侧更明显的转场；保持分隔卡视觉语言（颜色、字体）一致，使其读起来像标点而非另一支视频。
16. 保证文字可读且符合品牌：正文在 1080p 下 ≥ 28–32px，标题 56–80px；若一张幻灯片需要 16px 脚注才能塞下，就拆成两张；对比度 ≥ 4.5:1；所有内容保持在中心 90% 内以经受平台裁切。
17. 把品牌锁进一个 theme 对象：颜色、字体、logo、间距都放在一个 theme 里，使每张幻灯片一致、换品牌只需改一行（如 export const theme = { bg, fg, accent, font, titlePx: 72, bodyPx: 30, maxWidthPct: 90 }）。
18. 工作流：1) 大纲→脚本，一张幻灯片 = 一个想法 + 确切旁白行，作为唯一事实来源；2) 每张幻灯片生成/录制旁白，一个音频文件；3) 测量音频→设定幻灯片时长；4) 用绑定 useCurrentFrame() 的错峰揭示构建幻灯片组件；5) 用 <TransitionSeries> 串联并加标题与章节分隔；6) 把每张幻灯片的音频挂载在其 Sequence 内，使声音与画面永不漂移；7) 可读性/品牌检查后渲染为 MP4。
19. 输出契约：一个注册了 deck 的 Remotion 项目（<Composition> + zod schema + defaultProps），所有运动由帧驱动（无 timers / Date.now() / Math.random()）；每张幻灯片的音频挂载在自己的 Sequence 内；交付物是渲染出的 out/*.mp4（外加项目以便用户用新幻灯片/旁白重渲）；幻灯片时长由旁白推导，在 calculateMetadata 中计算总时长与每张 durationInFrames，绝不手算。
20. 验证循环——先渲染静帧→检查→再编码：用 npx remotion still Deck out/f-title.png --frame=20 --props='{"slides":[...]}' 渲染标题卡稳定态、--frame=240 渲染内容页要点已构建态、--frame=899 渲染最后一帧（durationInFrames - 1）；检查每个 PNG 的保真度（幻灯片文字精确、数字/标签正确、品牌色/字体已应用）与瑕疵（文字溢出、正文字号过小、内容超出中心 90% 安全裁切、缺字体、对比度低、要点卡在构建中途）。
21. 用 npx remotion compositions 读取 deck 的 durationInFrames/fps 以选取结束帧；在每张幻灯片的停留段内取样静帧，不要在转场上取样，以判断已构建状态。
22. 数据驱动/批量时：在渲染每个变体之前，先用静帧验证一个代表性 deck（真实幻灯片 + 旁白），一次性抓到字号或溢出 bug，而不是每个 deck 都抓一遍。
23. 静帧检查通过后再编码：npx remotion render Deck out/deck.mp4 --props='{"slides":[...]}'；可选 npx remotion render Deck out/demo.gif --codec=gif 免费得到 README 演示 GIF。
24. 完成前检查：npx remotion still 在标题、内容页、最后一帧均干净渲染（无错误、无缺字体）；幻灯片文字精确、1080p 下正文 ≥ 28px、对比度 ≥ 4.5:1、每帧内容都在中心 90% 内；仅帧驱动（无 Date.now()/Math.random()/库计时器，CI 中确定性成立）；用实际交付的 props（而非仅 defaultProps）渲染正确——幻灯片正确、旁白已挂载、时长来自音频；完整 MP4 已编码且可播放（声音与画面锁定），可选渲染 GIF。

适用边界 · 注意事项

• 不适用于必须保留原 deck 静态外观或鼠标点击过程的录屏式需求。
• 不适用于没有旁白音频、无法测量音频时长来驱动幻灯片时长的场景。
• 不适用于非 Remotion/代码化视频管线且不愿引入该依赖的项目。