dsh-creation-mode 3.0.0 → 3.0.1

package/references/text-animation.md

@@ -0,0 +1,213 @@
+# 文字动画
+
+字是最贵的画面元素：它承载信息，也最容易做砸。
+
+这一份讲：进场、出场、强调、跟随，以及什么时候**不要**动。
+
+---
+
+## 一、先问一句：这个字需要动吗
+
+| 情况 | 动不动 |
+|---|---|
+| 主标题首次出现 | 动（这是全片的「定调」） |
+| 副标题补充说明 | 轻动（淡入即可） |
+| 正文 / 字幕 | **不动**（动了读者跟不上） |
+| 数据 / 数字 | 动（滚动到目标值） |
+| 重复出现的界面文字 | 不动 |
+
+一条片子里，需要「炫技」的文字动画最多两处。其余全部用淡入 + 位移。
+
+---
+
+## 二、进场
+
+### 2.1 淡入 + 上浮（最稳）
+
+```js
+const u = easeOutCubic(tween(t, start, 0.45));
+ctx.globalAlpha = u;
+ctx.fillText(text, x, y + 24 * (1 - u));   // 从下方 24px 浮上来
+ctx.globalAlpha = 1;
+```
+
+位移量 20–30px。超过 60px 会像「掉下来」，少于 10px 看不出在动。
+
+### 2.2 遮罩揭示
+
+文字被「擦」出来，比淡入有力，适合主标题：
+
+```js
+ctx.save();
+ctx.beginPath();
+ctx.rect(0, y - fontSize, W, fontSize * 1.35 * u);
+ctx.clip();
+ctx.fillText(text, x, y);
+ctx.restore();
+```
+
+方向：从下往上（最常见）、从左往右（像被写出来）。
+
+### 2.3 逐字进场
+
+```js
+function drawChars(t, text, x, y, start, perChar = 0.03, dur = 0.35) {
+  let cursor = x;
+  for (let i = 0; i < text.length; i++) {
+    const u = tween(t, start + i * perChar, dur);
+    const w = ctx.measureText(text[i]).width;
+    if (u > 0) {
+      ctx.globalAlpha = easeOutCubic(u);
+      ctx.fillText(text[i], cursor, y + 14 * (1 - easeOutBack(u)));
+      ctx.globalAlpha = 1;
+    }
+    cursor += w;
+  }
+}
+```
+
+参数纪律：
+
+| 参数 | 范围 | 超了会怎样 |
+|---|---|---|
+| 每字延迟 | 20–40ms | 60ms 以上变成「一个一个蹦」 |
+| 单字时长 | 0.3–0.4s | 太长整句拖沓 |
+| 位移 | ≤ 字高 30% | 太大像掉字 |
+
+### 2.4 缩放落定
+
+从 1.15 倍缩到 1.0，配合淡入，像「砸」在屏幕上：
+
+```js
+const u = easeOutQuint(tween(t, start, 0.4));
+ctx.translate(cx, cy);
+ctx.scale(1 + 0.15 * (1 - u), 1 + 0.15 * (1 - u));
+ctx.translate(-cx, -cy);
+ctx.globalAlpha = u;
+ctx.fillText(text, x, y);
+```
+
+---
+
+## 三、出场
+
+出场比进场更需要克制。观众已经读完了，快走就行。
+
+| 方式 | 时长 | 说明 |
+|---|---|---|
+| 淡出 | 0.2–0.3s | 最稳 |
+| 上移淡出 | 0.3s | 有「翻页」感 |
+| 缩小淡出 | 0.25s | 有「退后」感 |
+| 硬切 | 0 帧 | 卡点上用，最干净 |
+
+**不要**做出场动画比进场还花哨——那是本末倒置。
+
+---
+
+## 四、强调
+
+### 4.1 高亮扫过
+
+一条色块从左扫到右，字变亮：
+
+```js
+const u = easeInOutCubic(tween(t, start, 0.5));
+ctx.save();
+ctx.beginPath();
+ctx.rect(x - 8, y - fontSize * 1.1, (w + 16) * u, fontSize * 1.35);
+ctx.clip();
+ctx.fillStyle = accent;
+ctx.fillRect(x - 8, y - fontSize * 1.1, w + 16, fontSize * 1.35);
+ctx.restore();
+```
+
+### 4.2 下划线生长
+
+```js
+const u = easeOutCubic(tween(t, start, 0.4));
+ctx.fillRect(x, y + 10, w * u, 4);
+```
+
+### 4.3 圈注 / 手绘感
+
+```js
+// 椭圆逐段画出
+const u = easeOutCubic(tween(t, start, 0.6));
+ctx.strokeStyle = accent;
+ctx.lineWidth = 3;
+ctx.beginPath();
+ctx.ellipse(cx, cy, rx, ry, -0.1, -Math.PI / 2, -Math.PI / 2 + Math.PI * 2 * u);
+ctx.stroke();
+```
+
+手绘感靠两点：轻微的不规则（用固定种子扰动半径）+ 端点圆角。
+
+### 4.4 抖动强调
+
+字被「震」一下，适合冲击性内容：
+
+```js
+const shake = 6 * Math.sin(t * 60) * Math.exp(-(t - start) * 8);
+ctx.fillText(text, x + shake, y);
+```
+
+幅度 4–8px，衰减要快（0.3s 内归零）。
+
+---
+
+## 五、数字
+
+### 5.1 滚动
+
+```js
+const u = easeOutQuint(tween(t, start, 0.9));
+const shown = target * u;
+ctx.fillText(format(shown), x, y);
+```
+
+### 5.2 单位与符号
+
+单位、百分号、正负号**在滚动开始前就固定**，不要最后才出现——那会让数字宽度
+跳动，眼睛跟不上。
+
+### 5.3 等宽
+
+数字用等宽字体，否则 1 和 8 的宽度差会让数字左右抖：
+
+```js
+ctx.font = '700 96px ui-monospace, "SF Mono", Menlo, monospace';
+```
+
+---
+
+## 六、多语言与混排
+
+- 中英混排时，英文用西文字体，中文用中文字体，`font-family` 里中文放后面兜底
+- 日文假名和中文汉字宽度接近，可以共用一套
+- 阿拉伯语 / 希伯来语是 RTL，Canvas 需要 `ctx.direction = 'rtl'`
+
+---
+
+## 七、常见错误
+
+| 错误 | 后果 |
+|---|---|
+| 每个字都弹跳 | 廉价、拖沓 |
+| 字幕做动画 | 读不完 |
+| 进场 1.2s | 观众等得不耐烦 |
+| 出场比进场花哨 | 本末倒置 |
+| 数字宽度跳动 | 眼睛跟不上 |
+| 逐字延迟 80ms | 变成「一个一个蹦」 |
+| 强调色用三种 | 没有重点 |
+
+---
+
+## 八、自检清单
+
+- [ ] 需要炫技的文字动画 ≤ 2 处？
+- [ ] 字幕没有做动画？
+- [ ] 逐字延迟 20–40ms？
+- [ ] 进场位移 ≤ 30px（或字高 30%）？
+- [ ] 最后一句留了 6 帧静止？
+- [ ] 数字用等宽字体，单位提前固定？
+- [ ] 出场时长 ≤ 进场时长？

package/references/timbre.md

@@ -0,0 +1,182 @@
+# 音色配方（28 条，已逐个试听校准）
+
+「听感」那栏是它应该听起来像什么。如果你写出来的东西和这栏不符，说明配方用错了，重写。
+
+**禁令：任何音色都不许做低频扫频（把正弦从一两百赫兹一路滑到三四十赫兹）。**
+这种声音听感像放屁，不是鼓。底鼓要「咚」就给一个固定频率的低正弦加一层鼓皮噪声，
+让包络去做冲击，不要让频率去滑。自写配乐同样适用，没有例外。
+
+| 音色 | 听感 | 做法 |
+|---|---|---|
+| 底鼓 kick | 低频「咚」，一击即止，音高不滑动 | 噪声过 220Hz 带通衰 0.05s（鼓皮），叠 62Hz 正弦**固定频率**衰 0.13s |
+| 军鼓 snare | 中频「沙」加一点鼓皮音 | 2200Hz 带通噪声衰 0.07s，叠 190Hz 与 330Hz 正弦短衰减 |
+| 闭合踩镲 | 极短极亮，只有「呲」一声 | 7000Hz 高通噪声，衰减 0.012s |
+| 开镲 open hat | 同样高频，但尾巴拖长 | 同上，衰减 0.18s |
+| 通鼓 tom | 有明确音高的鼓，比军鼓低沉 | 正弦 170→105Hz，衰减 0.22s |
+| 吊镲 crash | 宽频金属噪声，尾巴很长 | 4200Hz 高通噪声乘非谐波调制，衰减 0.42s |
+| 古筝拨弦 | 明亮拨弦，「啪」的起音加金属余韵 | Karplus-Strong，循环反馈 0.998，见示例一 |
+| 清音吉他 | 同一类拨弦但更闷、衰更快 | Karplus-Strong 反馈 0.982，输出再过 1800Hz 低通 |
+| 失真主音 | 沙哑持续，有攻击性 | 两路失谐锯齿叠加，tanh 硬削波，再过 900Hz 带通 |
+| 竹笛 | 柔和持续音，带明显气声和轻微颤动 | 正弦加 0.4% 颤音，混 2400Hz 带通噪声 0.35，60ms 渐入 |
+| 弦乐铺底 | 慢起音、宽而厚、无节奏 | 三路失谐锯齿加一个八度，1400Hz 低通，350ms 渐入 |
+| 低频贝斯 sub | 极低频，音高明确但更像震动 | 55Hz 正弦加 110Hz 二次谐波 0.25 |
+| 钟铃 bell | 金属非谐波，不是乐器音 | FM：载波 660Hz，调制比 3.51，调制指数从 6 指数衰到 0 |
+| 马林巴 | 木头味，短促，有余音共鸣 | 523Hz 正弦衰 0.22，叠 4 倍频衰 0.06 与 9.2 倍频衰 0.02 |
+| 上行扫频 riser | 亮度和音高一起往上冲 | 噪声过 400→7400Hz 扫频低通，叠 200→1100Hz 正弦 |
+| 落重音 impact | 比底鼓更重更长，用在切点 | 52Hz 正弦**固定频率**衰 0.42，叠 2600Hz 高通噪声衰 0.3 与 240Hz 短瞬态 |
+| 808 底鼓 | 长拖尾，有音高，但音高不滑动 | 62Hz 正弦**固定频率**，衰减 0.55s，轻微饱和，叠 4ms 噪声瞬态 |
+| 酸性贝斯 303 | 锯齿过强共振，每个音「呜」一下 | 锯齿过 Q=11 状态变量滤波，截止 240→2840Hz 指数衰 0.075s，见示例二 |
+| 超级锯齿 supersaw | 多层失谐，宽、亮、有合唱感 | 七路锯齿失谐 ±0.09 半音叠加，6000Hz 低通，见示例三 |
+| 合成拨弦 pluck | 起音很亮然后瞬间变闷 | 锯齿过 Q=3 状态变量滤波，截止 400→5600Hz 衰 0.05s |
+| 琶音 arp | 十六分音符快速跑动，每个音很短 | 方波每个十六分一个音，滤波截止瞬开瞬关 |
+| FM 贝斯 | 低频但起音带金属「叮」 | 载波 55Hz，调制比 2，调制指数 420 指数衰 0.035s |
+| 门限铺底 trance gate | 和弦被节奏切成一格一格 | 锯齿和弦过 2200Hz 低通，再乘八分音符硬门限 |
+| 芯片方波 chip | 单薄、刺耳，红白机味 | 25% 占空比方波，短音符 |
+| 抖动贝斯 wobble | 周期性「哇—哇—」 | 锯齿过 Q=9 状态变量滤波，截止被 4Hz LFO 在 200–2400Hz 扫动 |
+| 下坠噪声 downlifter | 亮度往下掉，只掉亮度不掉音高 | 噪声过 7000→500Hz 反向扫频低通；**不要再叠低频正弦** |
+| 侧链泵动 sidechain | 铺底每拍被压下去再弹回 | 铺底增益按 0.18 + 0.82 × (拍内相位 / 0.55) 起伏 |
+| 四踩律动 four-on-floor | 每拍一记底鼓，二四拍军鼓 | 底鼓每拍，二四拍噪声军鼓，八分音符踩镲 |
+
+#### 完整示例一：拨弦（古筝 / 吉他）
+
+~~~js
+// Karplus-Strong：噪声填一个周期长度的循环缓冲，每绕一圈丢一点高频。
+// 这个衰减过程就是「被拨动的弦」和「一个 beep」的区别。
+function pluckBuffer(freq, seconds, feedback) {
+  const n = Math.floor(seconds * ctx.sampleRate);
+  const buf = ctx.createBuffer(1, n, ctx.sampleRate);
+  const d = buf.getChannelData(0);
+  const period = Math.max(2, Math.round(ctx.sampleRate / freq));
+  const line = new Float32Array(period);
+  for (let i = 0; i < period; i++) line[i] = rand() * 2 - 1;
+  let prev = 0;
+  let idx = 0;
+  for (let i = 0; i < n; i++) {
+    const cur = line[idx];
+    line[idx] = 0.5 * (cur + prev) * feedback;
+    prev = cur;
+    idx = (idx + 1) % period;
+    d[i] = cur;
+  }
+  return buf;
+}
+// 古筝：feedback 0.998，余音长且带金属感
+// 清音吉他：feedback 0.982，再接一个 1800Hz 低通，更闷更短
+~~~
+
+#### 完整示例二：酸性贝斯（滤波器扫动）
+
+~~~js
+// 状态变量滤波器，截止频率可以逐样本变化。
+// biquad 做不到平滑扫频（系数按 buffer 固定），而扫频正是 acid 和 wobble 的灵魂。
+function svf(input, cutoffAt, q) {
+  const out = new Float32Array(input.length);
+  const maxFc = ctx.sampleRate / 8; // 再高会不稳定
+  let low = 0;
+  let band = 0;
+  for (let i = 0; i < input.length; i++) {
+    const fc = Math.max(20, Math.min(maxFc, cutoffAt(i / ctx.sampleRate)));
+    const f = 2 * Math.sin((Math.PI * fc) / ctx.sampleRate);
+    const high = input[i] - low - (1 / q) * band;
+    band += f * high;
+    low += f * band;
+    out[i] = low;
+  }
+  return out;
+}
+
+function sawBuffer(freq, seconds) {
+  const n = Math.floor(seconds * ctx.sampleRate);
+  const buf = ctx.createBuffer(1, n, ctx.sampleRate);
+  const d = buf.getChannelData(0);
+  for (let i = 0; i < n; i++) d[i] = 2 * (((freq * i) / ctx.sampleRate) % 1) - 1;
+  return buf;
+}
+
+// 303：锯齿过 Q=11 的滤波器，截止从 2640Hz 在 75ms 内指数关掉
+const raw = sawBuffer(55, 0.25).getChannelData(0);
+const acid = svf(raw, (t) => 240 + 2400 * Math.exp(-t / 0.075), 11);
+~~~
+
+#### 完整示例三：超级锯齿（宽亮主音）
+
+~~~js
+// 七路失谐锯齿叠加，这是 trance / EDM 那种「宽」的来源。
+const detunes = [-0.09, -0.06, -0.03, 0, 0.03, 0.06, 0.09];
+const mix = new Float32Array(Math.floor(duration * ctx.sampleRate));
+for (const d of detunes) {
+  const v = sawBuffer(261.6 * Math.pow(2, d / 12), duration).getChannelData(0);
+  for (let i = 0; i < mix.length; i++) mix[i] += v[i] / detunes.length;
+}
+// 再接 6000Hz 低通削掉刺耳高频
+~~~
+
+上面的示例只演示关键部分：master、sawBuffer 这些辅助函数要在你自己的代码里完整定义。
+
+写完用 renderAt 自检首帧、中段、尾帧：不是黑屏、文字不溢出、不同时间画面确实在动。
+把"未走分镜确认"之类的提示当回事——那是流程被跳过的信号。
+
+---
+
+## 编曲：从音色到一条完整的配乐
+
+有了音色还不够，还得排成一条有起伏的配乐。这一段讲层次、密度和收尾。
+
+### 层次（同一时刻最多 4 层）
+
+| 层 | 作用 | 音量 | 例子 |
+|---|---|---|---|
+| 低频 | 地基 | −12dB | 贝斯根音、底鼓 |
+| 中频 | 主体 | −9dB | 和弦、主旋律 |
+| 高频 | 空气感 | −18dB | 踩镲、铃声、噪声铺底 |
+| 点状 | 强调 | −6dB | 重击、转场音效 |
+
+层次超过 4 层会糊成一团。**同一时刻不要有两个乐器抢同一个频段**：
+电钢琴和吉他都在 200–800Hz，同时弹就打架，错开八度或错开时间。
+
+### 密度曲线
+
+配乐的密度必须跟着画面走：
+
+| 段落 | 密度 | 做法 |
+|---|---|---|
+| 开场 | 低 | 只有铺底 + 一两个点缀 |
+| 铺垫 | 中 | 加节奏，鼓组进来 |
+| 高潮 | 高 | 全编制，重音密集 |
+| 收尾 | 低 | 撤掉鼓，只留和弦散开 |
+
+全程一个密度，观众听 20 秒就走神了。
+
+### 卡点处的三种处理
+
+| 处理 | 听感 | 什么时候用 |
+|---|---|---|
+| 加一层重击 | 有力 | 普通卡点 |
+| 撤掉所有声音 0.15s | 屏息 | 高潮前 |
+| 只留高频 + 一记低频 | 空间感 | 转场 |
+
+**不要每个卡点都用同一种处理。** 连续三次同样的重击，第四次就没感觉了。
+
+### 收尾
+
+最后 0.5s 做三件事：
+
+1. 鼓组停
+2. 和弦延长（不要断）
+3. 整体音量线性衰减到 0
+
+```js
+master.gain.setValueAtTime(0.9, t0 + duration - 0.5);
+master.gain.linearRampToValueAtTime(0, t0 + duration);
+```
+
+硬切会「啪」一声。
+
+### 自检
+
+- [ ] 同一时刻不超过 4 层？
+- [ ] 没有两个乐器抢同一频段？
+- [ ] 密度有起伏（开场低、高潮高、收尾低）？
+- [ ] 卡点处理有变化（不是每次都同一招）？
+- [ ] 结尾有 0.5s 衰减？
+- [ ] 全曲峰值 ≤ −1dBFS？

package/references/transitions.md

@@ -0,0 +1,231 @@
+# 转场
+
+镜头之间怎么接，决定了片子是「一段一段」还是「一条」。这一份讲：接法有哪些、
+时长怎么定、时间轴怎么算、转场时画面该守什么纪律。
+
+---
+
+## 一、三种时间关系
+
+先把概念分清。两个镜头 A（0–3s）和 B（3–6s），接法不同，总时长不同：
+
+| 接法 | 时间关系 | 总时长 |
+|---|---|---|
+| 硬切 | B 从 A 结束的那一帧开始 | 6s（不变） |
+| 叠化 | A 与 B 重叠 d 秒 | 6 − d |
+| 推/擦除 | B 在同一时刻覆盖 A | 6s（不变） |
+
+**叠化会吃掉时长**，这是最容易出错的地方。分镜写的是 0–3、3–6，实际叠化 0.4s 后
+总长变成 5.6s，后面所有卡点、配乐小节线全部要跟着挪。
+
+要么在分镜阶段就预留重叠（A: 0–3.4，B: 3.0–6），要么干脆用硬切。
+
+---
+
+## 二、硬切
+
+0 帧转场，最干净、最有力。快节奏片子应该以硬切为主。
+
+### 2.1 对齐
+
+切点两侧的构图重心尽量落在同一位置，切过去才不跳。
+
+```js
+// A 场结尾：主体在画面中央偏左
+// B 场开头：主体也在中央偏左
+```
+
+### 2.2 节奏
+
+硬切必须落在节拍上。BPM 120 时一拍 0.5s，切点放在 0.5 的整数倍上，
+观众会觉得「踩上了」；放在 0.37s 就会觉得「怎么这时候切」。
+
+### 2.3 切点前后的微调
+
+- 切点前 2 帧：画面开始「收」（轻微压暗或缩小 2%）
+- 切点后 2 帧：画面「放」（从 98% 弹到 100%）
+
+这两帧的呼吸感让硬切不像「断了」，而像「换了口气」。
+
+---
+
+## 三、叠化
+
+### 3.1 实现
+
+```js
+function drawCrossfade(t, a, b, start, dur) {
+  const u = clamp01((t - start) / dur);
+  // A 淡出用 ease-in，B 淡入用 ease-out，交叉点更自然
+  const aAlpha = 1 - easeInCubic(u);
+  const bAlpha = easeOutCubic(u);
+  if (aAlpha > 0) { ctx.globalAlpha = aAlpha; a(t); }
+  if (bAlpha > 0) { ctx.globalAlpha = bAlpha; b(t); }
+  ctx.globalAlpha = 1;
+}
+```
+
+**不要两条都是线性**，中间会有一段时间两边都是 50%，画面发灰。
+用 ease-in / ease-out 交叉，总亮度更稳。
+
+### 3.2 时长
+
+| 节奏 | 叠化时长 |
+|---|---|
+| 快（BPM > 110） | 0.15–0.25s |
+| 中速 | 0.3s |
+| 慢 / 抒情 | 0.4–0.6s |
+| 超过 0.8s | 拖沓，除非刻意做「时间流逝」 |
+
+### 3.3 白闪 / 黑场叠化
+
+叠化到一个纯色再叠出来，比直接叠化更有仪式感，而且不改变时间轴：
+
+```js
+// 0–0.15s 叠到白，0.15–0.3s 从白叠出
+if (u < 0.5) {
+  ctx.fillStyle = `rgba(255,255,255,${easeInCubic(u * 2)})`;
+} else {
+  ctx.fillStyle = `rgba(255,255,255,${1 - easeOutCubic((u - 0.5) * 2)})`;
+}
+ctx.fillRect(0, 0, W, H);
+```
+
+---
+
+## 四、推 / 擦除 / 划像
+
+同一时刻 B 覆盖 A，不改变时间轴。
+
+### 4.1 横向擦除
+
+```js
+function drawWipe(t, a, b, start, dur, dir = 1) {
+  const u = easeInOutCubic(clamp01((t - start) / dur));
+  a(t);
+  ctx.save();
+  ctx.beginPath();
+  if (dir > 0) ctx.rect(0, 0, W * u, H);      // 从左往右露出 B
+  else         ctx.rect(W * (1 - u), 0, W * u, H);
+  ctx.clip();
+  b(t);
+  ctx.restore();
+}
+```
+
+### 4.2 推镜
+
+B 从右侧推入，A 同时向左退出 20%，有纵深感：
+
+```js
+const u = easeOutQuint(clamp01((t - start) / dur));
+ctx.save(); ctx.translate(-W * 0.2 * u, 0); a(t); ctx.restore();
+ctx.save(); ctx.translate(W * (1 - u), 0);  b(t); ctx.restore();
+```
+
+### 4.3 圆形扩散
+
+从一点向外扩，适合「聚焦到某个细节」：
+
+```js
+ctx.save();
+ctx.beginPath();
+ctx.arc(cx, cy, Math.max(W, H) * u, 0, Math.PI * 2);
+ctx.clip();
+b(t);
+ctx.restore();
+```
+
+---
+
+## 五、不占时长的光效
+
+闪白、漏光、暗场推进、色带扫过——这些是**叠在切点上**的效果，几帧成本就能
+让硬切看起来像「被打断」。
+
+### 5.1 闪白
+
+```js
+// 切点前 2 帧到后 3 帧，全屏白，alpha 从 0 冲到 0.8 再落回 0
+const cut = 3.0;
+const u = (t - (cut - 0.066)) / 0.166;
+if (u >= 0 && u <= 1) {
+  ctx.fillStyle = `rgba(255,255,255,${0.8 * Math.sin(u * Math.PI)})`;
+  ctx.fillRect(0, 0, W, H);
+}
+```
+
+### 5.2 漏光
+
+一道暖色斜向光带扫过，0.3s：
+
+```js
+const u = clamp01((t - start) / 0.3);
+const x = -W * 0.5 + (W * 2) * easeInOutCubic(u);
+const g = ctx.createLinearGradient(x, 0, x + W * 0.4, H);
+g.addColorStop(0, 'rgba(255,180,90,0)');
+g.addColorStop(0.5, 'rgba(255,180,90,0.35)');
+g.addColorStop(1, 'rgba(255,180,90,0)');
+ctx.globalCompositeOperation = 'screen';
+ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+ctx.globalCompositeOperation = 'source-over';
+```
+
+### 5.3 故障
+
+三帧内随机偏移色块 + RGB 分离，适合科技/赛博题材：
+
+```js
+const u = tween(t, cut - 0.1, 0.1);
+if (u > 0 && u < 1) {
+  const off = 8 * Math.sin(u * Math.PI * 6);
+  ctx.globalCompositeOperation = 'lighter';
+  ctx.fillStyle = 'rgba(255,0,80,0.5)';  ctx.fillRect(off, 0, W, H);
+  ctx.fillStyle = 'rgba(0,220,255,0.5)'; ctx.fillRect(-off, 0, W, H);
+  ctx.globalCompositeOperation = 'source-over';
+}
+```
+
+---
+
+## 六、纪律
+
+### 6.1 转场期间只做一件事
+
+前一秒在放大标题、后一秒又推镜头又换配色，观众的注意力会被撕开。
+
+### 6.2 一个片子最多两种转场手法
+
+三种以上显得没有章法。硬切 + 叠化已经能覆盖 90% 的场景。
+
+### 6.3 转场不解决问题
+
+如果两场之间接得生硬，八成是内容没接上（上一场没交代完，下一场突然开始），
+换更花哨的转场只会让问题更明显。
+
+---
+
+## 七、和配乐的关系
+
+每个切点都应该是配乐的一个重音（`beats` 里标出来）。切点落下去、鼓也落下去，
+观众才觉得「这一下是故意的」。
+
+反过来：如果配乐在切点上是空的，那就不要在那个切点做花哨转场，硬切反而更干净。
+
+| 转场 | 配乐 |
+|---|---|
+| 硬切 | 短促打击（kick / hit），同帧 |
+| 叠化 | 不需要重音，让音乐自然过渡 |
+| 擦除 / 推 | 上行扫频（whoosh），提前 0.1s 起 |
+| 闪白 | 白噪声瞬态 + 低频撞击 |
+
+---
+
+## 八、自检清单
+
+- [ ] 叠化有没有偷偷改变总时长？卡点要不要跟着挪？
+- [ ] 切点是否落在节拍上？
+- [ ] 叠化交叉的两条曲线是不是一条 ease-in、一条 ease-out？
+- [ ] 一个片子里转场手法是否 ≤ 2 种？
+- [ ] 转场期间是否只有一件事在变化？
+- [ ] 每个切点在 `beats` 里都有对应重音吗？