rendydev404/motion-reel

motion-reel 是做什么的？

生成一个 1920×1080、30 fps 的 MP4 视频，采用编辑风格的动态短片样式。一个现成的引擎位于 template/ 目录下。您复制它，编写一个配置文件 (src/reel.config.ts)，渲染，检查帧，然后发送视频。

参数：$ARGUMENTS

1. 阅读请求

根据参数和对话内容，确定以下内容：

• **主题：**哪个产品或功能。如果您在其代码库内，请阅读真实的文案（i18n 文件、页面组件、README），以便视频展示产品的实际功能。
• 颜色：
  • 预设名称：lime（参考样片）、coral、ocean、sunset、violet、night（深色）。
  • 或十六进制值，映射到 accent（荧光笔色，突出的颜色），然后是 secondary（第二品牌色），可选地还有 paper（背景色）和 ink（文字色）。
  • 仅提供一种颜色，则将其视为强调色。
  • 如果项目有品牌标识（例如 globals.css），则将其作为 secondary 提供。
  • 未提供任何颜色：使用 lime，并在最终消息中说明。
• **文案语言：**与用户语言匹配（如果用户用印尼语写作，则默认为印尼语）。
• **输出文件夹：**会话临时文件夹，除非用户指定了文件夹。切勿将其放在产品仓库内，除非用户要求。

仅当主题本身不明确时才提问。颜色和持续时间有默认值。

2. 搭建项目

cp -r "<this skill dir>/template" "<out>/reel"
cd "<out>/reel" && npm install && npm run sfx

• npm install 大约需要 2 分钟。如果有其他工作要做，可以在后台运行。
• 如果产品有 Logo，将其复制到 public/ 目录，并将 brand.logo 设置为其文件名。否则，设置 brand.initials。

3. 编写 src/reel.config.ts

• 设置 theme: makeTheme(presets.coral) 或 makeTheme({ accent, secondary, paper, ink })。所有其他 token 会自动派生。
• 选择场景。字段列表、默认持续时间以及文案长度限制都在 references/config.md 中；在编写文案之前请阅读它。
• 推荐场景弧（约 45 秒）：spark → word → tagline → bento → checklist → steps → formula → showcase → stats → kinetic → logo。删除不适合产品的场景。简短版本（约 20 秒）是 spark → word → tagline → kinetic → logo。
• **事实：**只展示产品真实做出的承诺。切勿编造诸如“10,000 用户”或“99% 可用性”等指标。示例内容（帐户名、示例帖子）应是虚构的且明显是通用的，绝不能是真实的客户数据。
• 标题： title.sans 是陈述句，title.serif 是斜体转折句。mark 是斜体部分中会获得荧光笔强调的一个词。

4. 检查并渲染

npx tsc --noEmit
npm run render        # → out/reel.mp4, 使用 --port=3917
npm run frames        # → out/frames/sheet*.jpg, 每 1.5 秒一帧

阅读每一张联系表。检查：

• 文本溢出卡片或帧
• 元素重叠
• 看起来为空白的场景
• 荧光笔标错了词
• 自定义颜色对比度低（例如浅色背景配浅色强调色）

修复配置文件，或必要时修复引擎，然后再渲染一次。不要循环渲染。

5. 交付

• 使用 SendUserFile (display: "render") 发送 out/reel.mp4。
• 报告持续时间、文件大小、每个场景的一行摘要、使用的颜色以及配置文件路径，以便后续编辑。
• 明确说明未听取音频。只检查了时间点和音量。

样式规则（扩展引擎时）

• 调色板角色： paper 背景色，ink 文字色和深色药丸形状，accent 仅用于高亮和活动状态（切勿用于纸张上的大段文字），secondary 用于色块和 Logo 强调词。
• 字体：
  • Inter Tight 800 用于陈述句。
  • Instrument Serif 斜体用于转折句。
  • Archivo Black 仅用于动态文字。
  • JetBrains Mono 13–20px 带字母间距用于标签和 HUD。
• 动效：
  • 入场使用 Expo-out bezier(0.16,1,0.3,1)，移动使用 in-out bezier(0.65,0,0.35,1)。
  • 退场使用方向模糊 (Smear) 加速退出。
  • 文本从遮罩中升起 (overflow: hidden + translateY)。
  • 数字使用垂直模糊滚动 (Roll)。
• **转场：**涂抹进出，标语后浸入墨水色，缩放模糊穿过，强调色卡片在动态文字块之前展开至全屏，以及动态文字之间的硬切。无抖动，无白色闪光。
• HUD： 标签在左上角，时间码在右上角，章节标签加进度线在左下角，分辨率在右下角，角落有括号。在深色色块上切换为浅色文字。
• 每个场景保持可读文本至少 1.5 秒。

Remotion 陷阱（经验教训）

• 所有动效都来自 useCurrentFrame()。CSS 过渡和动画无法渲染。
• 端口 3000 经常被开发服务器占用。始终传递 --port 参数。
• Remotion 捆绑的 ffmpeg 缺少 fps 和 tile 滤镜。使用 -ss 逐帧抓取帧（scripts/frames.mjs 执行此操作）。
• React.useId() 包含冒号。在用于 url(#id) 之前需进行清理。
• 方向模糊：SVG feGaussianBlur stdDeviation="x y"。CSS blur() 只能是均匀模糊。
• 音频：每个提示使用一个 <Sequence from> + <Html5Audio>，并将 durationInFrames 设置为片段长度。
• color-mix() 和 clip-path: circle() 可在 Remotion 的 Chrome 环境中工作。