motion-design：工作坊（Remotion、主题、声音、音乐）
一切都是本地化和确定性的：相同的代码 = 相同的MP4。没有由AI生成的图像或视频。
技术栈
| 组件 | 工具 | 位置 |
|---|---|---|
| 动画 | Remotion 4.0.529（React / TSX），版本锁定在 package.json | src/；使用 npx remotion add <package> 添加更多模块 |
| 主题 | 颜色、字体、尺寸、边距 | src/illustration/theme.ts（由 src/illustration/scenes/kit.tsx 中的 C 和 F 常量读取），字体位于 public/fonts/ |
| Remotion 模块 | 转场、特效、gsap、three、噪声、路径、形状、运动模糊、漏光、星爆、粗略注释、字幕、布局工具、lottie | package.json |
| 图形构图 | BrandedVideo（全屏场景）、LowerThirdTrack（字幕条、章节标题）、Screencast（站点演示）、Scene（场景目录）、ControleTexte（文本检查）、FondAnime（循环动画背景；其颗粒由 scripts/make-grain.py 生成） | src/illustration/，在 Compositions.tsx 中声明，在 src/Root.tsx 中连接 |
| 共享线索 | 以秒为单位的关键时间点，动画和声音均可读取 | src/<project>/cues.json |
| 音乐 | 在Python中编写的乐谱，基于numpy合成器（scripts/synth.py：FM电钢琴、铺底音色、贝斯、打击乐、黑胶噼啪声、混响） | music/<project>.py，模型：music/example_pad.py |
| 音效 | 合成音色调色板：在添加任何声音之前，请先阅读 reference/sound-palette.md。合成配方 scripts/make-sfx.py -> public/sfx/*.wav + palette.json；手势词汇 scripts/son.py（一个计划命名一个手势，从不直接引用文件；列表默认是一个放置一个卡片项，son.LISTES；son.releve：一个视频中所有声音的编号列表，供按编号审阅）；scripts/palette-import.py（真实录音的调色板，使用相同的文件名，默认回退到合成版本）；scripts/sfx.py（一些额外的声音：快门声、对焦滴答声、嗖嗖声） | scripts/ |
| 混音 | 音乐 + 音效 + 人声，音乐在人声下自动闪避，EBU R128目标响度，真峰值限制到-1.5 dBTP（过采样限制器，仅当超出时启用） | scripts/mix.py |
| 检查 | 每八度音程的音调平衡、响度 | scripts/ltas.py、mix.py |
许可协议。 Remotion 对个人及不超过3名员工的公司免费；超出此范围的公司需要企业许可（remotion.pro）。在大型公司中商业使用此工具包前，请阅读其 LICENSE.md 文件。Inter和Source Serif 4字体遵循OFL协议（public/fonts/OFL-*.txt）；声音和示例音乐均为此处合成，不涉及第三方权利。如果使用了其他地方的音乐：请检查其许可协议（在盈利频道上不得使用CC-BY-NC协议）。
设置，以及 node_modules 行的作用
此插件通过以下命令安装一次：
bash "${CLAUDE_PLUGIN_ROOT}/install.sh" --data "${CLAUDE_PLUGIN_DATA}"
（Claude Code 在读取此文件时会将两个变量替换为实际路径。）为什么要用数据文件夹：插件文件夹在每次插件更新时都会被替换，而 node_modules 大约有1 GB。因此 npm ci 在插件的数据文件夹（${CLAUDE_PLUGIN_DATA}）中运行一次，该文件夹在更新后仍然存在，然后 skills/motion-design/node_modules 是指向它的一个符号链接。如果插件更新后 node_modules 丢失（新插件文件夹中没有链接），请重新运行上面的命令：它只会补充缺失的部分并在一秒内重新建立链接。
手动安装（将四个 skills/ 文件夹并排复制到 ~/.claude/skills/ 中）：从工具包根目录运行 bash install.sh；此时 node_modules 是由 npm ci 安装的普通文件夹。Python 端：python3 -m pip install numpy scipy soundfile pillow，以及 brew install ffmpeg。详细信息和整个链路的检查：请参阅工具包的 INSTALL.md。
从工作坊文件夹（skills/motion-design）运行此技能的所有命令。
完整动效设计视频的制作流程
- 确定框架：时长、格式（默认1920x1080，30 fps；竖屏1080x1920；方形1080x1080）、用途、平台限制。编写
src/<project>/cues.json：关键时间点同时驱动画面和声音。 - 制作动画：每个交付物在
src/<project>/中对应一个构图，在src/Root.tsx中声明，属性用zod进行类型约束。所有内容都基于useCurrentFrame()：不得使用自由的CSS动画，不得使用Math.random()（使用random(seed)或noise2D）。仅使用主题颜色和字体。 - 无需等待渲染即可检查画面：对关键帧执行
npx remotion still src/index.ts <Id> out.png --frame=N，然后生成MP4的联系表（ffmpegtile）。以手机屏幕大小评判：图像缩小到390像素宽时仍应保持清晰可读。 - 画外音（如果有）：由用户录制（48 kHz WAV），使用
--voice-at放置。此工具包不进行语音克隆。 - 音乐和音效：
python3 music/<project>.py <duration> music.wav；通过son.py添加声音，放置在与画面相同的时刻（计划调用son.releve(...)来写入供聆听的编号列表）；使用python3 scripts/ltas.py music.wav进行检查（与平缓下降曲线相比，任何频段的凹陷不得深于约6 dB）。 - 混音：
python3 scripts/mix.py --music ... --sfx ... [--voice ... --voice-at s] --lufs -16 --out public/audio/<project>_mix.wav（轮播视频用-14，YouTube用-16；--sfx-voix-ref -22根据实际人声重新调整音效电平）。 - 渲染：
npx remotion render src/index.ts <Id> out.mp4 --props='{"audio":"audio/<project>_mix.wav"}' --codec=h264 --crf=16 --audio-bitrate=320k。 - 交付：不要覆盖已有的交付物（添加后缀
-v2），并提供预览。
在Premiere中放置的渲染图形（图形元素）
- 场景、全屏图形或字幕条中不要包含Logo：这会无端加载图像。
- 用于29.97 fps序列的文件必须覆盖其剪辑的整个时长：n个序列帧持续 n x 1.001 / 30 秒。
src/illustration/中的构图接受tailFrames参数：TenirFin组件（src/illustration/tenir-fin.tsx）在其持续时间内播放动画，然后保持最后一帧；退出动画不会移动。overlays技能的scripts/render-segments.py会计算tailFrames的值。 - 图形构图由
overlays技能的scripts/render-segments.py、scripts/screencast-render.py和scripts/montage-tella.py渲染（工作文件夹 = 此工作坊，PNG序列帧，4个核心），不得在remotion still检查之外手动执行。通过staticFile调用的媒体应放在public/scenes/<video>/中。
自定义（更改主题）
此工具包附带了一个中性主题：蓝色强调色 #2F5BEA、Inter和Source Serif 4字体、一个主题文件 src/illustration/theme.ts。要使用您自己的品牌：
- 颜色：
src/illustration/theme.ts（color：基础色、对比色、墨水柔和色、静音色、表面色、线条色、强调色、强调深色、强调浅色、深色背景、暖纸色）；场景通过C读取这些颜色。强调色及其浅色调在少数地方仍然是硬编码的：grep -rn "#6B8CFF\|rgba(47,91,234\|rgba(214,224,252" src/（在preuves.tsx、Screencast.tsx、compositions/FondAnime.tsx的PALETTES变体中），以匹配新的强调色。使用一种强调色，仅用作信号，绝不作为填充色。 - 字体：将
.woff2文件放入public/fonts/，然后更改加载列表（src/illustration/scenes/kit.tsx、compositions/BrandedVideo.tsx、compositions/LowerThirdTrack.tsx、compositions/Screencast.tsx）和theme.ts中的文件名和字体族名（font.display、font.sans）。确保字体包含数字和重音符号（单独的 "latin-ext" 子集既不包含数字也不包含基本字母，所有内容会回退到Georgia）。字体族名中不要包含数字（或在CSS中加引号）。 - 动画曲线：
scenes/kit.tsx中的easeStd和scripts/make-sfx.py中的EASING必须保持一致（声音跟随画面的曲线）。 - 检查：执行
npx tsc --noEmit，然后对每个构图（引文、字幕条、章节卡片、数字……）执行remotion still，然后在下一次运行render-segments.py时使用--force参数（其缓存已经跟随src/illustration/的代码）。
添加场景或声音
- 场景：在
src/illustration/scenes/opaque.tsx（全屏）或alpha.tsx（叠加层）中添加组件，在其上方以注释形式编写data契约，在注册表scenes/Scene.tsx中添加一行，在overlays技能的SKILL.md目录中添加一行。每个时刻都来自cues。检查：在多个帧上执行remotion still，并将叠加层合成到剪辑的一个帧上。 - 声音：参考
reference/sound-palette.md中的“添加或调整声音”部分。
同步文件夹陷阱
如果工作坊位于同步文件夹（Dropbox、iCloud、Drive等）中，另一台机器可能会发回一个文件的旧版本，并将好文件重命名为“冲突副本”。症状：Could not find composition with ID ...。对策：find . -name '*conflicted copy*' -not -path './node_modules/*'，比较，保留最新版本。webpack缓存（node_modules/.cache）也可能冲突：删除它，Remotion会重新构建。更好：将 node_modules 排除在同步之外。