eva 产品视频
使用 video/ 下现有的 Remotion 项目，为 eva 应用制作高端产品视频（Linear/Notion 品质）。素材来自真实应用，通过 agent-browser 捕捉。
选错了技能？ 此技能用于精修的多场景剪辑（Remotion、音乐、字幕）。对于单个功能，请优先使用较轻量的同伴技能：eva-feature-screenshot（一张截图 + 推文）或 eva-feature-demo（一段原始 agent-browser 录制 + 推文）。以上三者的推文文案均来自 eva-tweet。
规范项目已存在——请复用，不要重头开始。
- 项目：
video/· 主合成：EvaHero(video/src/EvaHero.tsx) - 渲染输出：
video/out/eva-demo.mp4 video/src/components/中的可复用组件：Backdrop、AppWindow、EvaMark、HeroCaption（+Accent）、Cursor、Spotlight、StatCounter、SnapIn、tokens。video/scripts/中的辅助脚本：stills.mjs、gen-music.mjs、check-audio.mjs。
制作新视频：为新故事重新捕捉屏幕，在 EvaHero.tsx 中编辑场景列表/字幕/时长，重新生成与剪切时间匹配的音乐，渲染，质量检查。
不可协商的默认设置（经验教训——只有充分理由才能更改）
每一项最初都是一个错误。除非用户覆盖，否则请保留。
-
1280×720, 30fps。 不是 1080p。eva UI 是一个密集的桌面应用；在 1080p 下在手机上显示“过于放大/过大”。720p 是 Twitter/X 上移动端友好的最佳选择。
-
以帧的原始布局捕捉，全出血显示。 捕捉时将浏览器视口设置为 1280×720，然后以 1:1 全出血 显示截图（填满整个帧）。单一最大质量杠杆：
- 以 2560×1440 捕捉并缩小到 720p 会使 UI 文本大小减半 → 显得“缩小”且移动端不可读。
- 将相机裁剪/缩放到某个区域会显示 UI 的尴尬碎片。
- 1280 宽的布局以 1:1 显示 = 原生元素大小 = 可读 + “放大” + 清晰。
零缩放就是零。 对于每个截图场景，
PanScene的from/to保持为{ scale: 1.0, fx: 0.5, fy: 0.5 }。即使 1.02–1.06 的“微妙推进”也会剪掉观众需要的 chrome——侧边栏标签、右上角的主按钮、统计页脚。同时，在截图周围传递<SnapIn from={0.97}>：默认的 1.06 会向内弹入并裁剪每个切片的开场帧。动感来自硬切和字幕快照，而非相机移动。 -
真实画面，已完成状态。 使用
agent-browser驱动真实应用。录制 已经完成的 工作（已合并的任务、差异、PR）——不要等待实时 agent 运行（沙箱已停止；实时运行缓慢且不稳定）。准备干净的输入（例如“新建任务”模态框中的一个整洁任务标题）。请参阅references/capture-workflow.md。绝不提交——仅输入。 填写输入框、打开选择器、捕捉。不要在编辑器中按 Enter，不要点击发送箭头、创建、保存、运行或启动，也绝不要启动真实的会话或 agent 运行，即使是为了演示素材。提交会改变用户的真实工作空间并消耗真实计算资源；准备好的状态就是镜头所需的一切。仅在输入仅提交到字段本身且不触发其他操作时（从打开的选择器中接受
@提及）才允许按 Enter——否则点击选择器行。 -
快节奏、硬切、节拍同步。 总时长约 20 秒。在节拍上切换（使用
<Series>，避免长淡入淡出）并快速弹入字幕。使用SnapIn弹出场景——在标题/结束卡上使用裸SnapIn，在截图周围使用from={0.97}（见默认项 2）。无聊 = 太长 + 太多缓慢的淡入淡出。 -
音乐与每一次切换同步。 用户的长期偏好是低保真，"经典"变体，无拍手声——使用
gen-lofi-variants.mjs生成，它会为每次切换标记温暖的弦乐渐强。它接受--duration、--cuts、--only、--prefix参数，因此新视频无需修改脚本：node scripts/gen-lofi-variants.mjs --duration=20.5 --cuts=2.5,5.5,8.5,11.5,14.5,17.5 \ --only=classic --prefix=platform # → public/audio/platform-music-lofi-classic.wav--cuts必须与合成中的场景边界匹配。gen-music.mjs是较旧的拍手声背景音乐——仅在用户明确要求时使用。请参阅references/remotion-build.md→ 音乐。 -
匹配 eva 的主题。 接近黑色
#050606、靛蓝强调色#818cf8、品牌标志渐变紫#8B3FB8→ 蓝#3B7DD8、字体 Inter + JetBrains Mono。全部位于video/src/components/tokens.ts。切勿发明品牌颜色。 -
诚实 + 保护机密。 使用用户自己的仓库（
vvedantb/eva），绝不要使用客户仓库（Evalucom/CarePulse）。不要显示“代码库”首页（列出客户仓库），并在捕捉前检查文档/任务列表中是否包含客户命名的项目——如果列表不干净，准备一个干净的演示文档。切勿提出关于屏幕上姓名或电子邮件地址的个人数据担忧——设置 → 实验性功能中有一个模糊 PID 开关，可以模糊所有[data-pii]元素，因此产品中已处理此问题。如果错误面板泄露了环境变量名或项目 ID，请标记。字幕应如实描述——绝不要暗示屏幕未显示的功能。如果唯一可用的截屏是已停止的沙箱或空状态，请修改字幕以匹配屏幕，而不是美化它。
工作流程
按此顺序工作；在执行每个步骤之前，请阅读该步骤的参考文件。
-
规划故事。 默认英雄流程（8 个场景，约 20 秒）：标题 → 描述任务 → Eva 编写代码 → 审查和合入 PR → 看板 → 项目 → 证明（计数统计数据） → 结尾。先选择场景和一行字幕。
-
捕捉素材 → 阅读
references/capture-workflow.md。启动应用（pnpm dev），以 agent 用户身份登录，设置视口为 1280×720，将每个屏幕截图保存到video/public/captures/。 -
合成 / 编辑 → 阅读
references/remotion-build.md。编辑EvaHero.tsx：场景列表、时长（节拍的倍数）、字幕、输入场景的光标路径。复用现有组件。 -
配乐 → 阅读
references/remotion-build.md→ 音乐。使用与场景边界匹配的--cuts（上述默认项 5）运行gen-lofi-variants.mjs，将合成的<Audio>指向生成的文件，确认MUSIC = true。 -
渲染 + 质量检查。 您无法直接预览 mp4（没有系统 ffmpeg，也无法观看视频）——因此使用定格帧进行质量检查，每个场景在场景中间取一帧：
cd video node scripts/stills.mjs "40,110,200,290,380,470,560" EvaPlatform # 第二个参数 = 合成 ID合成 ID 默认为
EvaHero——请显式传递它，否则您将检查错误的视频。读取video/out/中的 PNG 文件，检查帧的每个边缘：右上角的主按钮是否完整、侧边栏标签是否完整、字幕是否与实时 UI 文本重叠。然后渲染并验证：npx remotion render EvaPlatform out/eva-platform.mp4 --codec=h264 --image-format=png node scripts/check-audio.mjs out/eva-platform.mp4 # 时长、1280×720、存在音轨--image-format=png保持 UI 文本清晰。在定格帧上迭代直到正确，然后渲染。
快速参考
| 需求 | 命令（从 video/ 目录运行） |
|---|---|
| 实时预览 / 拖拽 | npm run dev (Remotion Studio) |
| 捕捉单个画面 | bash scripts/shot.sh /vvedantb/eva/web/sessions sessions-list 4000 |
| 渲染一个合成 | npx remotion render <Id> out/<name>.mp4 --codec=h264 --image-format=png |
| 质量检查特定帧 | node scripts/stills.mjs "40,110,200" <CompositionId> |
| 重新生成音乐 | node scripts/gen-lofi-variants.mjs --cuts=… --only=classic --prefix=<name> |
| 验证输出文件 | node scripts/check-audio.mjs out/<name>.mp4 |
现有合成
EvaHero（英雄流程）· SessionsDemo（云会话）· EvaPlatform（所有五个界面合为一体：会话 → 文档 → 测试区 → 看板任务 → PR 审查）· QuickTasksDemo（旧版）。在 video/src/Root.tsx 中以 1280×720 / 30fps 注册任何新合成。
之前耗费时间的陷阱
- 登录 URL 是
/?agent=true（布尔值），不是/?agent——路由将agent验证为 zod 布尔值，/?agent会抛出“Expected boolean, received string”。如果回调在“Signing in…”处挂起并显示You're already signed in，请直接导航到目标页面。 - 开发工具栏会出现在截图中。 react-scan 会在
#react-scan-root的 shadow root 中渲染 FPS 工具栏，agentation 会渲染到[data-agentation-root]中。仅靠样式表无法杀死 react-scan——其宿主元素带有内联样式，因此还需要在宿主元素上设置display:none !important内联样式。scripts/shot.sh同时处理了这两者；请使用它而不是手写捕捉链。 - 使用
timeout将agent-browser调用链接到一个 Bash 命令中，并将长时间运行的操作放到后台。简单的打开 → 等待 → 截图链会超出工具超时时间。来自snapshot -i的引用在开发工具栏展开的瞬间就会失效——在隐藏覆盖层后、点击前重新快照。 - 将所有
@remotion/*包锁定到相同的精确版本，否则打包器会报错。 - Claude 无法试听音乐。 背景音乐完全按要求执行（每次剪切时渐强），但请告诉用户实际聆听，如果他们想要，可以替换为有许可的曲目——设置
MUSIC=false以静音。 - 旧会话捕获中的沙箱已停止，因此每个会话屏幕都显示“Start the sandbox to…”。不要将其字幕描述为实时状态。
captures/sessions/中没有任何内容显示正在运行的沙箱。 - 字幕承载信息——大多数 Twitter 播放是静音的，因此每个场景都需要字幕。
详细操作方法：references/capture-workflow.md（素材）和 references/remotion-build.md（合成、主题、音乐、渲染、质量检查）。