用途
Walkthrough Video Generator 用于从应用截图或实时站点生成专业的演示视频（walkthrough video）。它使用 Remotion 将一组截图编排成带转场、缩放效果和文字叠加的 MP4 视频，适合制作产品介绍、功能演示等场景。
主要能力
- 在屏幕之间添加平滑转场：fade（淡入淡出）、slide-left、slide-right、slide-up、wipe、none（硬切）。
- 缩放效果，用于高亮特定 UI 区域（zoomTarget）。
- 文字叠加，包含标题、描述和标注（callout）。
- 进度指示器，显示当前在演示中的位置。
- 可选的旁白音轨。
- 支持添加背景音乐、动画标注圆圈、片头与片尾卡片。
- 输出格式：MP4（H.264）、WebM（VP8）、GIF（需配合 ffmpeg）、PNG 序列。
使用方式
前置条件：Node.js 18+；应用截图，或一个正在运行的应用/公开 URL 用于截图。无需 Remotion 经验，技能会生成全部代码。
工作流：
-
收集截图。三种方式：
- 从已有截图读取（如 .design/screenshots/、.jez/screenshots/ 或用户指定目录），按文件名或用户指定顺序排序。
- 从本地运行的应用捕获：启动 Playwright CLI 会话，依次导航并截图，推荐 1280x720，保存到 video/public/screens/。示例命令： playwright-cli -s=walkthrough open http://localhost:3000 playwright-cli -s=walkthrough resize 1280 720 playwright-cli -s=walkthrough screenshot --filename=video/public/screens/01-home.png
- 从公开 URL 捕获，方式同上。
-
创建 screens.json 清单，描述每个屏幕的 id、title、description、imagePath、durationSeconds、transition、zoomTarget 等字段。
-
搭建 Remotion 项目（若不存在）： mkdir -p video cd video npm init -y npm install remotion @remotion/cli @remotion/transitions react react-dom npm install -D typescript @types/react 项目结构包含 src/（Root.tsx、WalkthroughComposition.tsx、components/、config.ts）、public/screens/、screens.json、remotion.config.ts、tsconfig.json、package.json。
-
生成 Remotion 组件，包括 Root.tsx、ScreenSlide.tsx、TextOverlay.tsx、ProgressBar.tsx、ZoomEffect.tsx 等，并使用 @remotion/transitions 的 TransitionSeries 实现转场。
-
预览与调整： cd video npx remotion studio 检查每个屏幕的时长、转场是否平滑、文字是否可读、缩放目标是否正确、进度条是否准确。
-
渲染视频： npx remotion render Walkthrough output.mp4 --codec h264 更高质量：--quality 90；Web 优化：--codec vp8 输出 .webm。
适用场景
- 产品功能演示与走查视频。
- 应用界面介绍、落地页展示。
- 需要将截图快速转为带转场和文字说明的视频。
限制与注意事项
- 需要 Node.js 18+ 环境。
- 截图尺寸需保持一致，否则会出现缩放问题；public/ 资源应使用 staticFile()。
- 建议 1280×720、每屏 3-5 秒、总时长不超过 90 秒，否则注意力会下降。
- 转场建议只选 1-2 种并保持一致，fade 最安全。
- 文字叠加需要足够对比度（text-shadow 或半透明背景）。
- 渲染前先用 remotion studio 预览可节省时间。
- 关于收费、价格、平台支持等具体信息，资料中暂未提供。