motion-design

动效设计

Remotion 会教你 API。这个文件体现的是品味。以下每个数值都来自一部已发布的作品（src/EffortVideo.tsx）；应把它们当作默认值，有意偏离，而不是无意为之。

1. 时间由 timeline.json 决定

• 每个节拍都是 timeline.json 中以秒为单位的命名时间戳，并按场景分组（s1、s2，等等）。组件通过 src/lib.ts 中的 TL 读取它；sfx/cues/ 中的视频提示表也读取同一个文件。这能确保画面和声音同步。
• 绝不要在组件中硬编码开始时间。相对于节拍的偏移（s1.exit + 0.05）可以使用。
• 调整时长 = 编辑 timeline.json，然后运行 npm run sfx，让音频同步跟上。
• 一切都必须是 frame 的纯函数。不要使用 CSS 过渡或关键帧，不要使用 Math.random()（用 rand(n)），也不要使用 Date。其他做法都会导致渲染时闪烁或漂移。

2. 缓动

曲线	用途	来源
easeOut = bezier(0.16, 1, 0.3, 1)	入场、显现，以及任何进入画面的元素	lib.ts
easeIn = bezier(0.6, 0, 0.9, 0.35)	退场——快速离开，不拖沓	lib.ts
easeInOut = bezier(0.65, 0, 0.35, 1)	在两种状态之间移动（翻转、停靠、变形）	lib.ts
超调 bezier(0.55, 0, 0.2, 1.12)	让数值“落定”（如滑块爬升到某个刻度）	effortAt

线性缓动只用于连续运动：旋转、漂移、颗粒、滴答的指针。

使用 prog(t, t0, t1, ease) 处理补间，使用 band(x, a, b) 从另一个值派生动画（例如根据滑块位置驱动字幕），而不是给它单独设置时钟。

3. 弹簧（通过 sp(frame, startSec, config)）

感受	阻尼 / 刚度 / 质量	用途
默认稳定	14 / 140 / 0.8	通用 UI 入场
厚重、沉稳	15–20 / 140–240 / 0.6–1	大面板、倒带
旋钮 / 卡点	12 / 190 / 0.75	控件吸附到某个档位
弹出	9–11 / 200–230 / 0.7	提示框、徽章、成功提示圆点
弹性点缀	8 / 200	每部视频只用一个主打瞬间，不要更多

有实体感的对象（UI、物体）用弹簧。文字和类似镜头的移动用贝塞尔补间。

4. 时序

• **错开出现：**单词间隔约 0.09 s，列表项 / 标签间隔约 0.2–0.25 s，圆环 / 圆点间隔约 0.06 s。
• **逐词显现：**使用 Mask，时长约 0.8 s（从裁剪区域中向上滑出，并略微倾斜）。
• 退场时长约为入场的一半（0.35–0.55 s，而入场为 0.7–1.25 s）。退场使用 easeIn。
• **让场景重叠。**前一个场景完全离开之前，下一个场景就开始绘制（s2.drawOn 为 4.02 s，早于 s1.flipEnd 的 4.4 s）。生硬的空档看起来像“正在加载”。
• **打字：**每个字符约 0.035 s；光标空闲时以约 2.4 Hz 闪烁。
• **留出阅读时间。**每个可读状态稳定后都需要停留：短语至少 1 s，超过三个词后每多一个词增加约 0.25 s，最后的钩子至少 2 s。努力视频的 22 s 剪辑版之所以存在，是因为 15 s 版的文字闪得太快——拿不准时，就延长停留时间，减少动画。

5. 排版

• 字体最多使用三种：展示衬线体（Instrument Serif）、UI 无衬线体（Inter）、用于标签、提示词和数字的等宽字体（JetBrains Mono）。
• 展示字体要大（1080 画布上约 138 px），字距要紧（-0.02em），lineHeight: 1。
• 每行只用一个强调点：用强调色显示一个斜体词，就能突出要点（Same *prompt.*）。
• 等宽标签：大写，letterSpacing: 0.2–0.24em，使用柔和的颜色。它们是装饰；任何必须让观众读到的内容都要放大。
• 手机测试：在 360 px 宽的画面上（X 信息流中的显示尺寸），关键信息仍必须清晰可读。请在联系表中检查。

6. 颜色

• 调色板令牌位于 C（lib.ts）中。不要在组件里引入新的十六进制颜色值。
• 只用一种强调色（珊瑚色），并让它有明确含义：发生变化的事物、答案或胜出者。如果所有东西都是珊瑚色，就什么也强调不了了。
• 根据状态而不是时间驱动辉光（glow = effort）：光效应该讲清故事。

7. 纹理——没有什么是静止不动的

• 叠加胶片颗粒（Grain，不透明度 ≈ 0.09，每隔两帧重新设置随机种子）。
• 暗角加上以每秒几像素的速度漂移的点阵（Background）。
• 在草图风格／低保真状态下使用手绘的“线条抖动”（WobbleFilter），随着质量提升逐渐淡出。
• 空闲元素轻轻律动：滴答作响的时钟、闪烁的插入符、缓慢的旋转。

8. 连贯性与转场

• 优先使用持续存在的对象，而不是剪切。提示词栏、火花和滑块会穿过不同场景并改变用途；这就是设计感的来源，而不是拼装感。
• 每个转场都由画面中的对象推动（五个结果圆点合并成一个，接着变成光圈）。不要使用通用擦除效果。
• 运用速度：通过 value(frame) - value(frame - 1) 推导运动轨迹／挤压效果，而不是伪造。
• 每个视频只安排一个主角时刻（光圈 + 撞击）。逐步铺垫，不要过早用掉它。

9. 反模式

• 所有元素同时淡入，或所有元素使用相同的时长。
• 对任何开始或停止的动作使用线性缓动。
• 文本处于应当供人阅读的状态时仍在移动。
• 每帧出现多个焦点。
• 内容距离画面边缘（安全区域）约 60 px 以内，除非有意裁切。
• 第 0 帧为空白或黑屏——X 会静音自动播放，第一帧就是缩略图。

工作流

1. 先将节拍写入 timeline.json（用数字呈现的分镜）。
2. 在 src/scenes/ 中将场景构建为组件，将共享部分放在 src/components/ 中。
3. 每次有实质性更改后运行 review-loop 技能。
4. 画面时序锁定后运行一次 sound-design 技能。