reels-motion

reels-motion 是做什么的？

生成一个竖屏 Reel（1080×1920，30 fps，时长约 40-50 秒），采用“终端波普”风格：深色网格背景、单一强调色、逐词显示的大号文字（关键词高亮在色块中）、一个执行动作的像素宠物、一个 01 / 04 进度计数器，以及一个关键词行动号召结尾。

此技能包含的文件（相对于此文件夹的路径）：

• references/motion_system.md：调色板、字体、运动、过渡、构图和节奏。设计前请先阅读。
• template/：一个完整且可运行的 Remotion 项目（关于“什么是技能”的“Cartuchos”Reel）。请将其作为基础，不要从零开始。
• template/README.md：项目结构、命令和设置。

流程

1. 理解需求

仅询问缺失的信息：主题、目标受众、账号 @、CTA 关键词、评论后提供的奖励、是否使用配音（以及 ElevenLabs 的哪种声音），以及大致时长。

2. 脚本和分镜（先展示并等待确认，再进行动画）

• 结构： 吸引钩子（≤ 2 秒）→ 4 个带有 HUD 01-04 的部分 → CTA（约 4 秒）。
• 吸引钩子： 3 次文字闪现，最后一次的关键词位于色块中，并且宠物在该次闪现时做一个动作。
• 配音台词： 每句 ≤ 14 个词，口语化，不照读屏幕上的文字。屏幕上每句 ≤ 6 个词。
• 宠物： 每个部分都需要一个能解释概念的动作（如插上、选择、扫描等），而非装饰。
• CTA： “评论关键词，我会发送给你 X”，关键词置于强调色块中。

3. 创建项目

cp -r <此技能路径>/template <用户文件夹>/<reel名称>
cd <用户文件夹>/<reel名称>
npm install

请用户提供一个短路径。在 Windows 上，过长的路径（超过约 200 个字符）会阻止 Remotion 用于渲染的 Chrome 启动。

4. 适配主题

• src/config/texts.ts： 所有屏幕文本和 BRAND.handle。[词语] = 强调色块。
• src/config/voiceover.ts： 按场景划分的脚本，分成 blocks（每个 block 一句台词）。
• src/config/theme.ts： 强调色和位置。
• src/scenes/S2…S5： 这是“Cartuchos”的示例。对于其他主题，请复用 components/（Headline、Appear、Bit、Cartridge、Terminal、Pill、CommentBar、Transitions、Sfx）和 lib/anim.ts 重写每个部分的动作。保持模式：每个阶段以 cue('scene', n, fallback) 开始，这是该场景配音中第 n 句台词的开始帧。
• Bit： src/components/Bit.tsx 中的 MAP 矩阵（16×16）定义了它的形状；如果该账号有其他宠物，请更改它。

5. 音效

npm run sfx 会合成 public/sfx/ 中的 .wav 文件。使用 <Sfx name="…" at={frame} /> 与动画常量一起放置它们。音量和开关在 src/config/audio.ts 中。

6. 配音（选择一种方式）

• 自有 API 密钥： 在 .env 中设置 ELEVENLABS_API_KEY，在 VOICE.voiceId 中设置语音 ID，然后运行 npm run voiceover。它会为每个场景生成一个 MP3，并写入 src/config/voiceover.generated.ts，其中包含每句台词的精确开始帧。
• Claude 中的 ElevenLabs 连接器： 使用其 blocks 的连接文本生成每个场景，并将 MP3 下载到 public/voiceover/<reel>/。连接器不提供时间戳，因此：
  1. 将每个 MP3 解码为 WAV（npx remotion ffmpeg -i x.mp3 -ac 1 -ar 16000 x.wav）。
  2. 在 Node 中测量 10 毫秒窗口内的能量，检测 80 毫秒或更长的停顿。
  3. 将每句台词分配给与其预期位置（按字符比例）最近的停顿。
  4. 手动编写 voiceover.generated.ts，包含 duration（讲话结束，无尾部静音）和 blockStarts。
• 无配音： 设置 VOICE_TIMINGS = {}，场景将使用每个 cue 的 fallback。

7. 节奏

每个场景的持续时间等于其台词长度 + 0.2–0.4 秒的呼吸时间，直到下一句配音开始： SCENES.x ≈ (讲话结束帧 + 0.3 秒) × 30。吸引钩子 ≤ 2 秒。CTA 在配音后留出约 1.5 秒以便阅读。 配音永远不会被截断：每个 MP3 与其场景同时开始，其尾部静音可在下一个场景中继续播放。 如果某个动画显得局促，请简化它，而不是加快速度。

8. 交付前检查

1. npx tsc --noEmit。
2. 渲染关键帧（吸引钩子、每个部分和 CTA）并检查：文字是否断行、重叠，安全区域（上方 120 像素，下方 340 像素，两侧 64 像素）以及 @ 是否适合一行。
3. 音量混合： 分别渲染两条 WAV 轨道（--codec=wav），一条设置 sfxEnabled = false，另一条设置 voiceEnabled = false，每 0.1 秒比较它们的音量。当有配音时，音效应至少低于配音 10 dB；否则，降低 audio.ts 中该音效的增益。 Remotion 的 ffmpeg 不包含 volumedetect：请解码为 WAV 并在 Node 中测量。
4. 最终渲染：npx remotion render ReelCartuchos out/<名称>.mp4。

9. 缩略图和发布

• 缩略图： npm run thumbnail（合成 Miniatura，帧 29）。内容必须适合 4:5 裁剪区域（285–1635）。
• 文本： 提供适用于 TikTok（简短、CTA、3–5 个话题标签）和 Instagram（逐步价值、CTA、最多 5 个话题标签）的描述、替代文本以及用于关键词的自动 DM 消息。

已知错误

• Windows 上 Failed to launch the browser process … ENOENT： 路径过长。请使用短文件夹或 --browser-executable=<短路径>/chrome-headless-shell.exe。
• 帧 0 的静态图像中标题不可见： 入场从透明度 0 开始。请在帧 29 渲染缩略图。
• generate-*.ts： 需要 Node 22.18+（原生 TypeScript）。