dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/mgstyles/BRIEF-TEMPLATE.md

@@ -0,0 +1,63 @@
+# mg-styles brief 模板
+
+每份 brief 是「一个风格如何**在 DrawAI 的 Remotion 工程里**被做出来」的可执行说明书。
+它不是上游提示词的翻译，而是**换了一套渲染栈之后的落地手册**：上游用 HTML 页 +
+`renderAt(t)` + puppeteer 截帧，DrawAI 用 React 场景 + Remotion 逐帧渲染。同一个
+"每帧是 t 的纯函数"的心智模型，但 API、约束、可用的近似手段全都变了。
+
+## 硬性要求
+
+- 8 节，顺序固定，标题一字不差（`mg_style` 工具和校验脚本按标题取内容）。
+- 全文 6–11KB（超过 12KB 就砍第 6 节的措辞，不要砍第 5 节和判据）。宁可少写，不要把上游提示词整段抄过来 —— 提示词原文由 `mg_style read`
+  另外返回，brief 只写"换到 Remotion 之后要注意什么"。
+- 每个技术判断都要能在 `demos/<slug>/` 的源码里找到依据（写文件名/函数名），
+  或者明确标注"这是近似手段"。
+- 颜色一律给 hex，并注明角色（纸/墨/主色/副色）。不要写"暖色调"这种没法执行的描述。
+- 动效参数要可检验：帧数、角度、缓动函数名、错峰帧数、网格模数。
+
+## 八节
+
+### 1. 一眼认出
+3–5 条**判据**，不是形容词。反例：「有节奏感」；正例：「所有落点都在 240px 网格线上」。
+
+### 2. 色板
+表格：角色 / hex / 用在哪。再给一句"禁止色"（这个风格里绝对不能出现的颜色倾向）。
+
+### 3. 字体与字排
+原片用什么字体（查 `assets/fonts/fonts.css` 与 demo 源码里的 font-family）；
+DrawAI 里没有这个字体时用什么替代（给具体 font-family 栈）；字号/字重/字距/竖排/
+中英混排的规则。替代会损失什么，直说。
+
+### 4. 动效语法
+- 节拍：BPM、每拍几帧（30fps 下 120BPM = 15 帧/拍）。
+- 缓动：曲线名 + 参数；明确禁用哪些（比如包豪斯禁 overshoot）。
+- 签名动作 3–5 个，每个给：做什么、多少帧、什么缓动、错峰多少帧。
+- 组成规则：网格模数、安全边距、图层顺序。
+
+### 5. Remotion 落地配方
+这一节最重要。写清楚：
+- 用哪些 API（`useCurrentFrame` / `interpolate` / `Easing` / `spring` /
+  `@remotion/motion-blur` / `@remotion/three` / `random(seed)`）。
+- 上游哪些写法**必须换掉**：`requestAnimationFrame` → 帧函数；`Date.now()` /
+  `Math.random()` → 种子随机；CSS transition/animation → 每帧算出的样式；
+  Canvas 2D 逐帧绘制 → 可以用，但要在 `useEffect` 里按 `frame` 重绘（给骨架代码）。
+- WebGL/着色器后处理（纸纹、套印、发光）：`three/addons` 的后处理链在场景里是
+  **允许**的（EffectComposer + SSAOPass / UnrealBloomPass），不要再默认写成 CSS 假发光。
+  确实要换近似方案（CSS filter、SVG feTurbulence、mix-blend-mode）时必须写清
+  「损失是什么、在哪一帧看得出来」，并在 `STYLE.md` 落一条 `偏离：` 行。
+- 累积采样：`render.samples`（场景从 `props.render` 读）+ `scene-kit/det.ts` 的
+  `jitter()`（Halton(2,3)，禁 `Math.random()`）；写明这一镜要几个样本、为什么。
+- 运动模糊：`render.shutter` 的多快门采样，或 `@remotion/motion-blur` 的
+  `CameraMotionBlur`；说明适用/不适用的镜头。
+- 给一段 15–30 行的骨架代码（真实可跑，不是伪代码），展示这一镜的核心结构。
+
+### 6. 镜头结构模板
+按秒给意图（不是内容）：0–0.5s 钩子、…、结尾定格多少秒。写"这一镜要完成什么"，
+让 agent 能替换成自己的内容。
+
+### 7. 坑
+3–6 条，每条一句话，都是会在渲染时真的出问题的事：字体回落、细线 shimmer、
+渐变 banding、`staticFile` 路径、粒子/物理不确定、跨镜状态泄漏、超大 DOM 节点。
+
+### 8. 版权与素材
+上游 MIT；可用素材的范围；品牌名必须虚构；哪些图形是"通用几何"可以自由用。

package/lib/motion/mgstyles/briefs/01-flat-vector.md

@@ -0,0 +1,104 @@
+上游：`demos/01-flat-vector/index.html`（76.7KB 单文件，SVG 场景图 + 每帧 `setAttribute`，无 js 目录）+ `demos/01-flat-vector/cues.json`（120BPM，build:4.0，drop:6.0，outro:8.0）。1920×1080 / 30fps / 10.000s。提示词原文用 `mg_style {action:"read",slug:"01-flat-vector"}` 取。
+
+## 1. 一眼认出
+1. 整幅背景是一块 `#2B2BFF` 纯平蓝（`C.U` 的 10000×10000 rect），画面里没有渐变、阴影、描边，全是实心色块叠在一起。
+2. 色阶只有五档：蓝 / 珊瑚 `#FF5A4E` / 向日葵 `#FFC62B` / 薄荷 `#2EE6A8` / 奶油 `#FFF6E9`，任何一块都不混色。
+3. 每次落地都压扁：触地前后 2–6 帧竖向压到 60%、横向撑到 136% 再弹回。
+4. 同一时刻只有一个主体在动，`cues.json` 的 40 余个帧键几乎不重叠。
+5. 圆角模数统一：楼房 rx 6–10，云是 rx 28 的胶囊 + 两个圆，球是正圆 r=74。
+
+## 2. 色板
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| 纸（天） | `#2B2BFF` | `C.U`，铺满 world 的底rect |
+| 地面 / 云 | `#FFF6E9` | `C.CR`，地面台、云、窗内墙 |
+| 墨 | `#151433` | `C.INK`，主角楼 BLD[4]、鸟、门洞 |
+| 主色 | `#FF5A4E` | `C.CO`，球/太阳、12 道光芒、第 3 栋楼 |
+| 副色 | `#FFC62B` | `C.SU`，第 4/7 栋楼、地面 lead bar |
+| 副色 | `#2EE6A8` | `C.MI`，第 1/6 栋楼、8 棵树 |
+| 远景 | `#4D4DFF` + 窗 `#6060FF` | tone-on-tone，只比背景亮一档 |
+| 层级 | `#1F1FCC` / `#3B3BFF` / `#A3A3FF` | 只在窗内房间与 UI 里分前后 |
+
+禁止色：任何中性灰与 `#000000`；最深的墨只到 `#151433`，再深平涂会脏。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 标题和英文优先 Fredoka，中文优先 Resource Han Rounded；字形圆润时保持原片的定位和字距。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+- 上游：`Fredoka` 700（拉丁标志 `popwıse`、数字、`¥`）+ `Resource Han Rounded` 700/900（「每天，聪明一点点」）。`assets/fonts/fonts.css` 只被 `<link>` 引用，vendored 的 `demos/` 下没有字体文件。
+- 替代：display `"Arial Black","Segoe UI Black","Microsoft YaHei",sans-serif`，中文 `"Microsoft YaHei","Microsoft YaHei UI",sans-serif` 700，等宽 `"Consolas","JetBrains Mono",monospace`（片中未用，留给 UI）。
+- 损失：Fredoka 是圆头几何体，Arial Black 末端是方的、字面窄约 8%，要 `letter-spacing:0.01em`、字号 +4% 才接近；Windows 没有圆体中文，雅黑会把「圆胖」变「方黑」，可爱度掉一档——别用描边补偿。
+- 字排：标志固定 900px 宽、tracking 0；副标 70px、逐字加 7px；tagline 30px/600/字距 2px。
+
+## 4. 动效语法
+- 120 BPM，一拍 15 帧；所有事件落在 3 帧网格（`bldStagger=3`）。
+- 缓动只有四条：`E.pop = bezier(0.34,1.56,0.64,1)` 入场；`spring(f=2,z=.4)` 生长；`kick(f=3,z=.35)` 落地震动；`E.outQt` 抛物线。相机推镜用幂 2.2 的 ease-in，回弹用 `E.outB(1.2)` 做速度匹配。
+- 禁用：linear；任何超过 10 帧的 ease-in-out（主体会「软」）。
+- 签名动作：
+ 1. **单点落地**（0–15 帧）：g=2040 px/s²，13 帧触地，`sy=1-0.4q, sx=1+0.36q`，首弹 78px、`k=.09` 拉伸；第 24 帧二落只有 40% 幅度。
+ 2. **预备-冲出-回弹**：antic 27 → launch 31（4 帧），冲出前 `sy*=1-0.3a`（压 30%），之后立刻 pop。所有角色入场都是这三段。
+ 3. **楼房生长**（44 帧起，9 栋，错峰 3 帧）：以底边 `(cx,820)` 为锚 `scaleY=s`，同时 `scaleX=1/(1+k)` 反挤；顶盖 slab 跟 `max(s,0)/(1+k)`，屋顶装饰再延 2 帧。
+ 4. **推镜穿窗**（86→112 帧）：`camAntic 86 / push 90 / glass 105 / arrive 112`，幂 2.2 推到 30 倍（`S1=1920/64`），穿过后 `E.outB(1.2)` 速度匹配；窗内是同一套矢量语言按 1920×1080 画好再 `scale(64/1920)` 塞进去（INT 组）。
+ 5. **字母落下**（243 帧起，`letterStagger=1`）：逐字 `pop(f=5,z=.65)`，落点叠 `dip=10*kick(...,3.2,.4)`；i 的点在 247–255 帧脱开成 r=74 圆点，成为最终句号。
+- 网格：2×2 四宫格 = 960×540，冲击波算到格角；安全边距 74px（`R0`）；层级自下而上：天 → 远景 → 太阳与光线 → 楼群 → 地面 → 云/鸟/树 → 窗内房间 → 四宫格 icon → 标志。
+
+## 5. Remotion 落地配方
+必须换掉：
+- `document.createElementNS` 建树 + 每帧 `setAttribute`：改成 React 元素 + 内联 `transform`，让 React 每帧重算 style。
+- `await fetch(cues.json)` 与 `document.fonts.load`：cues 直接 `import`，字体落到系统栈，不要等 `fonts.ready`。
+- `Math.random()` 排窗灯：换成 `mulberry(seed)` 或模块顶层生成一次的固定数组。
+- `measureText` 反算字号：改成固定 `fontSize` + `letterSpacing`，宽度用容器顶住。
+- 时间与随机：上游是 `renderAt(t)` 纯函数，**没有** `requestAnimationFrame` / `Date.now()`，别在 Remotion 里用 `useEffect` 把它们加回来；`crisp()` 的量化与 `Math.random()` 的窗灯全部改由 `f` 决定。CSS `transition/animation` 一律不用，所有值由 `interpolate` 每帧算出。
+
+```tsx
+const FPS = 30;
+const spring = (tau: number, f = 2, z = 0.4) => {      // 上游 spring() 闭式解
+  if (tau <= 0) return 0;
+  const w = 2 * Math.PI * f, wd = w * Math.sqrt(1 - z * z);
+  return 1 - Math.exp(-z * w * tau) * (Math.cos(wd * tau) + (z * w / wd) * Math.sin(wd * tau));
+};
+const bldY = (f: number, i: number) => spring((f - (44 + i * 3)) / FPS, 2, 0.4); // bldStart 44 / 错峰 3
+const squash = (f: number) => f < 13 ? 0 : 0.4 * Math.exp(-(f - 13) / 4) * Math.cos((f - 13) * 0.6);
+
+export const FlatVector: React.FC = () => {
+  const f = useCurrentFrame(); const { fps } = useVideoConfig();
+  const zoom = f < 90                                        // 0–30 帧 1.4→1.12；90–112 推到 30 倍
+    ? interpolate(f, [0, 30], [1.4, 1.12], { easing: Easing.bezier(0.65, 0, 0.35, 1), extrapolateRight: "clamp" })
+    : interpolate(f, [90, 105, 112, 124], [1.12, 20, 30, 28.8], { easing: Easing.bezier(0.2, 0, 0.8, 1) });
+  const k = squash(f);
+  return (
+    <AbsoluteFill style={{ background: "#2B2BFF", overflow: "hidden" }}>
+      <div style={{ position: "absolute", left: 960, top: 540, transform: `scale(${zoom}) translate(-960px,-540px)` }}>
+        {BLD.map((b, i) => { const s = Math.max(bldY(f, i), 0);
+          return <div key={i} style={{ position: "absolute", left: b.cx - b.w / 2, top: 820 - b.h,
+            width: b.w, height: b.h, background: b.c, transformOrigin: "50% 100%",
+            transform: `scale(${1 / (1 + k)}, ${s * (1 + k)})` }} />; })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+```
+（`zoom` 与 `k` 就是这一镜的全部状态；楼群只读 `bldY`。）
+
+## 6. 镜头结构模板
+| 秒 | 帧 | 意图 |
+| --- | --- | --- |
+| 0.0–0.5 | 0–15 | 珊瑚圆点从画外砸进蓝底，落地压扁后二弹 |
+| 0.5–1.4 | 15–42 | 点变太阳升到 (1300,230)，12 道光芒 0.14 rad/s 慢转；远景天际线先起 |
+| 1.4–2.9 | 42–88 | 9 栋楼错峰 3 帧长出，窗灯 64–82 帧依次亮，云/鸟/树跟随 |
+| 2.9–3.7 | 86–112 | 推镜 30 倍穿进 64×36 的窗，105 帧闪白，112/113 两帧 arrival shake |
+| 3.7–5.5 | 112–165 | 窗内四宫格 bar/check/heart/coin 依次跳起，180/195/210/225 各放一次冲击波 |
+| 5.5–6.0 | 165–180 | 四格收拢成一点，为转场蓄力 |
+| 6.0–8.0 | 180–240 | 标志擦入，字母 243 帧起逐帧落，点从 tittle 变句号 |
+| 8.0–9.0 | 240–270 | 副标 259 帧、EN 266 帧，270/285 两次 beatBob |
+| 9.0–10.0 | 270–300 | 定格 + 4% 缓推，最后一帧回 1.0 便于 loop |
+
+## 7. 坑
+- `E.pop` 在 u=0 导数极大，直接喂 scale 会第 1 帧就跳 20%，像 pop 了两次；用 `pop()` 的 `pin=.9` 把残余钉回 1。
+- 推到 30 倍后所有 stroke/圆角都要除以 `zoom`，否则窗框线变成 30px 黑边（demo 里每个 stroke 都写了 `/z`）。
+- 窗灯用随机序会让每帧重排、闪成雪花，必须固定成数组；`scaleY` 的锚点必须是底边，否则整排楼陷进地里。
+- 四宫格冲击波要算到格角（`qR`），固定半径会露空档；大色块平涂易 banding，整帧加 2% 噪声。
+
+## 8. 版权与素材
+上游 `mg-styles-15` 为 MIT；`popwise` 与「每天 聪明一点点」是虚构品牌，商用必须换名，无点 i 也是品牌记号。Fredoka 与 Resource Han Rounded 已随 DrawAI 内置。全片无位图素材，噪点与光晕都是程序生成；音乐按 120BPM / F 大调用 `motion_audio` + `motion_sfx` 重做。

package/lib/motion/mgstyles/briefs/02-line-art.md

@@ -0,0 +1,97 @@
+上游：`demos/02-line-art/film.js`（47.0KB，Canvas2D 一笔画 + 一组隐藏 SVG 只为 `getTotalLength()` 采样）+ `demos/02-line-art/cues.json`（72BPM，1/8=0.4167s，fill:7.5，poster:7.8）。1920×1080 / 30fps / 10.000s。提示词原文用 `mg_style {action:"read",slug:"02-line-art"}` 取。
+
+## 1. 一眼认出
+1. 全片只有一根线，从地平线一路画到屋顶、浪、环、拱，中间不抬笔（`PIECES` 的 23 段首尾相接）。
+2. 线宽在屏幕上恒定 4.5px（`?lw=4.5`，默认 3）、圆头圆角；越新越亮，新墨 `#FFF6DC`，旧线退到 40% 并偏成 `#967D50`。
+3. 背景是 `#0B1320` 的深蓝夜，只有一层很淡的径向光晕、44 颗尘点，没有第二个光源。
+4. 笔尖永远带一团暖白光晕，停顿那一下还会鼓一下。
+5. 7.5s 时那根圆环从中心「胀」成金币，线转成面，表面有一道 1.5px 的斜高光。
+
+## 2. 色板
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| 纸 / 夜 | `#0B1320` | `NAVY`，整幅 `fillRect` |
+| 墨线 | `#E9D7A5` | `GOLD`，主线常态 |
+| 旧线 | `#967D50` | `AGED`，`lineColor(b)` 在 b=0.4 时的端点 |
+| 新墨 | `#FFF6DC` | `HOT`，刚画过 1.5s 内（b>1）向这里插值 |
+| 币面 | `#F2E0AE` → `#DDC284`(42%) → `#CCAB6C`(70%) → `#A8874E` | 135° 线性渐变 |
+| 斜面 | `#FFF6DC` / `#6E5428` | 1.5px 高光弧 + 1px 暗边 |
+
+禁止色：任何高饱和色（红/品红/荧光绿）与纯白 `#FFFFFF`；最亮只到 `#FFF6DC`。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 拉丁标题使用 Cormorant Garamond，中文使用 Noto Serif SC；保留细字重与宽字距。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+- 上游：`Cormorant Garamond` 500（`ATELIER LINEA`，50px，字距 0.46em）与 `Noto Serif SC` 300（「始于一线」26px，字距 0.5em）。两者都不在 Windows。
+- 替代：display 用 `"Constantia","Cambria","Georgia",serif`；中文用 `"Source Han Serif SC","Noto Serif SC","SimSun",serif`；等宽 `"Consolas","JetBrains Mono",monospace`（片中未用）。
+- 损失：Cormorant 的高对比 hairline 在 Windows 上没有等价物，Constantia 小写更宽更厚，要字号 -8%、字距加到 0.52em 才不散；`SimSun` 只有 Regular，300 的细衬线中文在 26px 以下会糊成一团。
+- 字排：全大写 + 宽字距是这套的记号；逐字母从「散开」收拢（`spread=(1-e)*0.22*size*(i-mid)`，`stagger=0.045`），中轴对齐 (925,868)。
+
+## 4. 动效语法
+- 72 BPM，一拍 25 帧，1/8 = 12.5 帧；27 个 draw marker 都落在 0.4167s 的网格附近。
+- 缓动：`easeIO = bezier(0.65,0,0.35,1)` 是签名（转角略减速）；`easeOut = (0.16,1,0.3,1)`；`easeSwell = (0.24,0.3,0.2,1)` 线转面；`easePulse = (0.45,0,0.2,1)` 回流脉冲。
+- 禁用：back / elastic / spring —— 线不能过冲、笔尖不能倒退；也不能用 linear 画长段，会匀速得像机器。
+- 签名动作：
+ 1. **连续落笔**：`headS(t)` 把时间经 `monotone()` 单调三次样条映射到弧长，笔头永远单调前进；采样步长 `STEP=0.5` 世界 px，`TOTAL` 是总弧长。
+ 2. **停顿标点**：重复 marker（roof 2.083→2.233、tower2 3.5→3.65、sky2 4.75→4.9）让笔停 0.15s；停顿前 0.133s 相机先刹车。
+ 3. **旧线衰减**：`b = FLOOR+(1-FLOOR)*(1-smooth(0.2,1.5,age))`，地景 `FLOOR=0.4`、logo 段 0.96；颜色随 b 从 `#E9D7A5` 移到 `#967D50`。
+ 4. **线转面**（7.5s）：evenodd 双圆，内圆 `ri = MR*(1-easeSwell(u))` 从 0 扩到 MR，0.367s 由环带填满成金币；`destination-out` 挖门洞。
+ 5. **相机追笔**：33 点高斯加权（σ=0.3、lead 0.08s）；zoom 5.8→1.1（对数样条），浪段有 `-0.016 rad` 侧倾。
+- 网格：线宽 4.5px；起笔 taper 前 130 世界 px；字距 0.46em；构图围绕 (925,540)，标题 (925,868)，logo 中心 (925,392)。
+
+## 5. Remotion 落地配方
+必须换掉：
+- `getTotalLength()/getPointAtLength()`：渲染时没有 SVG DOM 度量。用 `pathLength={1}` 归一化，`strokeDasharray="1 1"` + `strokeDashoffset={1-p}` 画进度；笔尖坐标改为构建期采样好的点表（`tools/dump_timing.mjs` 那套）。
+- `ctx.filter='blur(16px)'` 三层离屏合成：改成三条同 `d` 的 path，`strokeWidth` 12/6/3、`opacity` 0.10/0.18/1。损失是没有真正高斯 bloom，叠加偏「贴纸」。
+- `createConicGradient` 的币面光泽：用两条相交线性渐变 + 一条 `mix-blend-mode:screen` 的窄白条模拟 18° glint。
+- 逐帧 `mulberry(f*7919+13)` 噪声：改成一张 `staticFile("grain.png")`，每帧 `translate` 由 `f` 决定。
+- Canvas 2D 逐帧重绘整条线：换成静态 `<path>` + 只改 `strokeDashoffset`，不每帧重建 `d`；上游的 `renderAt(t)` 本身就是纯函数，没有 `requestAnimationFrame`/`Date.now()`，别加回去，CSS `transition/animation` 也不要用。
+- `ctx.measureText` 排版：改成逐字母 `<span>` + `letterSpacing`，宽度不反算。
+
+```tsx
+const D = "M-160 740 L272 740 …";                 // 23 段拼成的单条 path，构建期生成
+export const LineArt: React.FC = () => {
+  const f = useCurrentFrame(); const { fps } = useVideoConfig();
+  const t = f / fps;
+  const p = Math.min(1, t / 7.5);                  // draw 阶段：0→7.5s 画完
+  const zoom = interpolate(t, [0, 0.22, 1.116, 2.533, 3.85, 5.135, 7.5, 10],
+                              [5.8, 3.49, 2.8, 1.45, 1.3, 1.16, 1.46, 1.1]); // cues.zoom
+  const tip = SAMPLE[Math.floor(p * (SAMPLE.length - 1))];   // 构建期采样的 [x,y]
+  return (
+    <AbsoluteFill style={{ background: "#0B1320" }}>
+      <svg viewBox="0 0 1920 1080"
+           style={{ transform: `scale(${zoom})`, transformOrigin: `${tip[0]}px ${tip[1]}px` }}>
+        <path d={D} fill="none" stroke="#E9D7A5" strokeLinecap="round" pathLength={1}
+              strokeWidth={4.5 / zoom} strokeDasharray="1 1" strokeDashoffset={1 - p} />
+        <circle cx={tip[0]} cy={tip[1]} r={9 / zoom} fill="#FFF6DC" opacity={t < 7.5 ? 1 : 0} />
+      </svg>
+    </AbsoluteFill>
+  );
+};
+```
+（`p` 是这一镜唯一的进度；线宽写了 `/zoom`，所以镜头推拉不改变屏幕线宽。）
+
+## 6. 镜头结构模板
+| 秒 | 帧 | 意图 |
+| --- | --- | --- |
+| 0.0–0.7 | 0–21 | 一笔从左侧画进地平线，镜头贴到 5.8 倍，笔尖点亮 |
+| 0.7–2.08 | 21–62 | 芽 → 三节枝 → 檐口，roof 处停 0.15s |
+| 2.08–3.85 | 62–116 | 亭 → 塔 → 天际线，镜头退到 1.3 倍；建筑线直、植物线抖 |
+| 3.85–5.14 | 116–154 | 地平线向右拉满 1600px，起浪的第一笔 |
+| 5.14–6.46 | 154–194 | 浪 → 卷 → 抬升，镜头上摇并侧倾 -0.016 rad |
+| 6.46–7.5 | 194–225 | 环 → 足 → 拱，镜头收紧到 1.46 倍，为填金预备 |
+| 7.5–8.33 | 225–250 | 圆环胀成金币（0.367s），反向脉冲扫回起点，门洞挖出 |
+| 8.33–9.25 | 250–278 | 字标逐字母收拢（0.045s），副标跟上 |
+| 9.25–10.0 | 278–300 | 两侧各一条 24px 金线，暗角 + 噪点上满，末段 +3% 微推 |
+
+## 7. 坑
+- `getTotalLength()` 在 Remotion 的渲染环境里不存在，任何「运行时量路径」的写法都会直接抛错。
+- 线宽不除 `zoom`，5.8 倍时是 26px 粗带，退到 1.1 倍又细成发丝。
+- 旧线用 `opacity` 降会在 `#0B1320` 上变脏灰，必须换色到 `#967D50`（demo 的 `lineColor`）。
+- 三层 blur 每帧跑三次全屏高斯，渲染会慢 3–5 倍，能用描边就别上 filter。
+- 停顿用普通 `interpolate` 会回弹一下，必须保证「时间→弧长」单调（`monotone()` 的斜率限制）。
+
+## 8. 版权与素材
+上游 `mg-styles-15` 为 MIT；`ATELIER LINEA` 是虚构时装屋名，文案「始于一线」也不要照抄。Cormorant Garamond 与 Noto Serif SC 已随 DrawAI 内置（见第 3 节）。噪点图 `grain_fine_2048.png` 可通过 `motion_assets library` 搜索并导入，其上游许可尚未逐项明确；也可用工程自带 `builtin/grain.svg`。音乐按 72BPM 铺一条极简钢琴/弦乐，乐器采样是单音，需要自行编排。

package/lib/motion/mgstyles/briefs/03-isometric.md

@@ -0,0 +1,108 @@
+上游：`demos/03-isometric/js/`（`world.js` 80.5KB 场景与纯时间更新、`render.js` 9.2KB 累积采样器、`anim.js` 4.0KB 纯函数、`title.js` 8.5KB 地面挤出字）+ `cues.json`（120BPM，drop:6.0，pullback:7.75–8.75）。1920×1080 / 30fps / 10.000s，three.js + 正交相机 + 累积采样（SPP 16）。提示词原文用 `mg_style {action:"read",slug:"03-isometric"}` 取。
+
+## 1. 一眼认出
+1. 真等轴：`OrthographicCamera` 沿 `DIR=(1,1,1)` 看，立方体三条可见棱在屏幕上呈 2:1 斜率，没有一处透视收缩。
+2. 12×12 的瓦片岛，瓦片顶面是奶白陶土 `#F1EEFA`，侧面才是彩色；空瓦片在冲击波经过时翻面。
+3. 光很软：暖白主光 `#FFF3E6` + 淡紫半球光 `#C9BFF0`，阴影没有硬边（16 次子采样抖动出的面积光）。
+4. 所有生长都是「底座先落 → 墙长 → 屋顶晚 0.375s 掉下来」，没有一处均匀缩放；收尾一定拉远成浮岛，标题平躺在等轴地面上。
+
+## 2. 色板
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| 纸（背景） | `#EEEAFC` / `#DAD3F7` / `#C4BAEF` | `bgTop/bgMid/bgLow` 竖向渐变 |
+| 地面点阵 | `#A79EE2` | `PAL.dot`，等轴地板的圆点 |
+| 草 | `#94DFBD` `#8CDBB6` `#9DE3C4` `#86D6B0`，深 `#74CBA3` | 瓦片草坪 |
+| 广场 / 路 | `#F4F1FD` `#ECE8FB` / `#8781D0`，标线 `#FBFAFF` | 环路与虚线 |
+| 水/陶土 | `#8CC6FF` / `#F1EEFA` `#D0D4EE` | 水面瓦片与生长中的素模 |
+| 点缀 | `#FFC4AC` `#A8D2FF` `#B7ECD6` `#D9D1FA` | 浮块与楼体 |
+| 窗 | 灭 `#98ACEE`、亮 `#FFF0C8` | `winOff/winOn` |
+| 数据青 | `#62F0F2` | 冲击波、数据流、ping |
+| 墨 | `#2C2960` | 标注文字、CORE 主体 |
+| 土层 | `#FFFFFF` → `#CBC3F3` → `#B2A8EC` → `#9F95E1` | `soil1–4` strata |
+
+禁止色：纯黑 `#000000` 与高饱和红（最暖只到 `#FF9E86`）；阴影不要压到 20% 亮度以下，会失去棚拍感。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 英文标题使用 Unbounded，中文用 HarmonyOS Sans SC，数字和单位用 JetBrains Mono。参考帧中的 Unbounded 可变字体不一定与上游 800 静态实例完全一致。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+- 上游：`Unbounded` 800（`ISOPOLIS`、数字）、`HarmonyOS Sans SC` 700/500（中文标签与标注卡）、`JetBrains Mono` 500（`CITY OS`、单位、EN 小标）。标题用 opentype.js 把 `assets/fonts/Unbounded-800-static.ttf` 读成 glyph 路径再挤出 3D。
+- 替代：display `"Arial Black","Impact",sans-serif`；中文 `"Microsoft YaHei","PingFang SC",sans-serif`；等宽 `"Consolas","JetBrains Mono",monospace`。
+- 损失：Unbounded 是超宽几何无衬线，Arial Black 窄约 12%、圆弧更钝，要 `letter-spacing:0.04em` 并 +8% 字号；HarmonyOS 700 比雅黑 700 更匀，中文标签会略挤；挤出字换字体就换了字面宽度，tracking 要重调。
+- 字排：`ISOPOLIS` size 2.2、depth 0.36、bevel 0.035、tracking 0.035（世界单位）；副标走 canvas decal（4096×720）；mono 字距 0.12em。
+
+## 4. 动效语法
+- 120 BPM = 15 帧/拍；cues 走 1/16 秒网格（0.0625s = 1.875 帧），不要按整帧对齐。
+- 缓动：`smoother` 是默认（`track()` 不传 ease 就用它）；道路 `easeOutCubic`；墙 `WALL = spring(tau,14.8,0.61)`（8 帧到峰、9% 过冲）；落体 `drop()`；pop `spring(tau,22,.42,v0=19)`。
+- 禁用：linear 生长、任何 fov/透视变化、back 曲线用在墙高上（会穿模）。
+- 签名动作：
+ 1. **瓦片波浪落下**（0.25–1.5s，6 个环）：`drop(tau,0.3,h0=2.2,rot0≈-1.4,bounce=.075)` —— 0.3s 下落、`y=h0(1-u²)`、旋转 `rot0(1-u)^2.2` 触地归零；落地 `sy=1-0.3*exp(-tau/.05)*cos(40tau)`，再两次微弹 0.16/0.10s。
+ 2. **楼房生长**（2.25–4.44s）：底板 0.1s 内 `scaleXZ 0.12→1` 落地，墙 `WALL(tau-1/30)` 弹到 1.09 再回，屋顶延 `roof_lag=0.375s` 用 `drop()` 扣上。
+ 3. **冲击波**（drop 6.0）：`PULSE_T=drop-0.015`，从 CORE 足迹 `r=1` 以 `pulse_speed=15` 向外；物体在 `hopPatch` 顶点着色器里抬一下，窗色与描边按 `flashDelay(x,z)` 延迟点亮、0.4s 后消失。
+ 4. **相机 Hermite**：三通道 `[t,value,'e']` 关键帧（`CAM.x/y/z`），x 0→-3.2→3.0→0.45→2.2→-5.75，z 3.1→1.72→1.0；drop 前 2% 反向预备、之后 `+6%` punch 两帧、12 帧 `easeOutExpo` 落回。
+ 5. **收尾拉远**（7.75–8.75s）：正交 zoom 1.8→1.0 露出浮岛；8.5s 标题板从地面长起，8.5625s 起字母每 0.0625s 一个，9.0s 定格。
+- 网格：tile 0.955×0.34×0.955、间距 1.0、12×12；iso 面 `Scale(1,.866)` → `Shear(±30°)` → `Rotate(∓30°)`；z 序按画面 y；正交视高 VH=18，岛占 12。
+
+## 5. Remotion 落地配方
+这三条是**能力**，不是损失——用 `scene-kit/` 与 `render.samples` 实现；降级必须写进 STYLE.md（`偏离：累积 1×`）：
+- `Accumulator` 的 16 次子渲染：改成同帧内 N 次 draw + 亚像素抖动（`render.samples`，等轴斜边建议 4–8），jitter 用 `det.ts` 的 Halton(2,3)，禁 `Math.random()`；累积缓冲用 `HalfFloatType`。判据：1:1 裁切里竖窗边阶梯 ≤2 级。
+- `SSAOPass` / `UnrealBloomPass`：`three/addons` 后处理在场景里是**允许**的（`style-engine.js` 的 three 指引原文如此）。SSAO `kernelRadius` 8–12 世界单位；bloom `(resolution, 0.35–0.6, 0.4, 0.85)`；发光值 ≤0.9，禁纯白。
+- grain + vignette：用 `look.tsx` 的 `<Grain>` / `<Vignette>`（feTurbulence 是确定性噪声，不消耗逐帧随机数）。
+这些确实没法照搬，要换掉：
+- `URLSearchParams` 的 v5/night 分支：全部变成 props（`variant: "day" | "night"`）。
+- `document.fonts.load` + opentype.js 挤字：改用 OFL 字体直接排版（Unbounded 比 Arial Black 宽 12%，按这个调字号），或把标题预渲成 PNG 贴平面。
+- `world.js` 80KB 手摆坐标：只留 `MAP` 的 12 行字符表与 `tx(i)=i-5.5 / tz(j)=j-5.5`，其余程序生成。
+- 时间源：上游 `window.renderAt(t)` 是纯函数，没有 `requestAnimationFrame`/`Date.now()`；R3F 的 `useFrame` 也不能用（它不跟 Remotion 帧走），CSS `transition/animation` 不用，一切由 `useCurrentFrame()` 推。
+
+```tsx
+const FPS = 30;
+const drop = (tau: number, h0 = 2.2, fall = 0.3) => {   // 上游 drop()：下落 + 落地压扁
+  if (tau < 0) { const u = (tau + fall) / fall;
+    return { y: h0 * (1 - u * u), rot: -1.4 * Math.pow(1 - u, 2.2), sy: 1, sxz: 1 }; }
+  const sq = Math.exp(-tau / 0.05);
+  return { y: 0.075 * Math.sin(Math.PI * Math.min(1, tau / 0.16)), rot: 0,
+           sy: 1 - 0.3 * sq * Math.cos(tau * 40), sxz: 1 + 0.12 * sq * Math.cos(tau * 40) };
+};
+
+export const Isopolis: React.FC = () => {
+  const f = useCurrentFrame(); const { fps, width, height } = useVideoConfig();
+  const t = f / fps;
+  const tiles = useMemo(() => TILES, []);                 // 12×12，tl 由 cues.sweep 铺开
+  return (
+    <ThreeCanvas width={width} height={height} orthographic
+                 camera={{ position: [120, 120, 120], zoom: 100, near: 1, far: 400 }}>
+      <color attach="background" args={["#EEEAFC"]} />
+      <hemisphereLight args={["#F6F3FF", "#C9BFF0", 0.75]} />
+      <directionalLight position={[-0.42, 1, 0.62]} intensity={2.25} color="#FFF3E6" castShadow />
+      {tiles.map((tl) => { const d = drop(t - tl.tl);
+        return <mesh key={tl.k} position={[tl.x, 0.17 + d.y, tl.z]} rotation={[0, 0, d.rot]}
+                     scale={[d.sxz, d.sy, d.sxz]} castShadow receiveShadow>
+          <boxGeometry args={[0.955, 0.34, 0.955]} />
+          <meshStandardMaterial color={tl.col} roughness={0.82} />
+        </mesh>; })}
+    </ThreeCanvas>
+  );
+};
+```
+（`drop()` 同时给出高度、翻转、压扁；瓦片、楼、树、车共用它，全片手感都在这。）
+
+## 6. 镜头结构模板
+| 秒 | 帧 | 意图 |
+| --- | --- | --- |
+| 0.0–0.9 | 0–27 | 青色蓝图网格画出，相机 3.1 倍贴近 |
+| 0.25–1.5 | 7–45 | 6 圈瓦片按 0.25s 间隔波浪落下，落地压扁 |
+| 1.62–1.75 | 48–52 | 土层挤出 strata，道路 loop 画出 |
+| 2.25–4.44 | 67–133 | 14 栋房、4 台风机、轻轨、市中心 12 栋生长，屋顶延后 0.375s |
+| 4.625–5.75 | 139–172 | 车流出现、塔楼分段拔高、天线与光环 |
+| 6.0–7.0 | 180–210 | drop：CORE 冲击波、6% punch、曝光 -0.15EV 预备 / +0.3EV 命中 || 6.25–7.7 | 187–231 | 4 架无人机、数据流、3 张标注卡 ENERGY/COMMUTE/DATA |
+| 7.75–8.75 | 232–262 | 拉远 1.8→1.0，浮岛露出，青色 ping 追到岛影 |
+| 8.5–10.0 | 255–300 | 标题板长起，字母每 0.0625s 一个，9.0 定格后 hold |
+
+## 7. 坑
+- 正交相机的 `zoom` 和 shadow camera 是两套：拉远时阴影相机仍按 ±20 裁剪，岛边会突然没影子。
+- 等轴下不能靠 z 排序：透明瓦片/水面必须 `depthWrite:false` + 显式 `renderOrder`。
+- `spring(tau,14.8,.61)` 有 9% 过冲，屋顶不等 `roof_lag=0.375s` 就扣会穿出墙顶。
+- cues 是 1/16 秒网格（0.0625s=1.875 帧），用 `Math.round(t*30)` 取帧会让最后几个字母挤在一起。
+## 8. 版权与素材
+上游 `mg-styles-15` 为 MIT；`ISOPOLIS`、`CITY OS · 144 TILES · ONLINE` 都是虚构品牌，换掉再用。Unbounded、HarmonyOS Sans SC 与 JetBrains Mono 已随 DrawAI 内置；上游 800 静态字重与内置可变字体并非完全相同。背景渐变、点阵地板、浮岛阴影全是 shader 生成，没有位图。

package/lib/motion/mgstyles/briefs/05-cel-boil.md

@@ -0,0 +1,145 @@
+# 05-cel-boil · 逐帧手绘 / 线条沸腾
+
+上游：`demos/05-cel-boil/js/scene.js`（117KB，2036 行 Canvas2D）+ `js/engine.js`（13.8KB，笔刷与 boil 引擎）+
+`cues.json`（120BPM，`strike_start:0.333`，`burst:6.5`，`title_settle:8.5`）。1920×1080 / **24fps** / 10.000s。
+`index.html` 只有一块 canvas；**`assets/` 整个不在仓库**：`scene.js:1327` 要 `paper_base.jpg`、
+`paper_tooth.png`、`dust_ink_01..04.png`。提示词原文用 `mg_style {action:"read",slug:"05-cel-boil"}` 取。
+
+## 1. 一眼认出
+
+- **是一叠纸，不是一个背景**：`drawPaper` 把纸放大 1.045 铺满，`drawTooth` 再叠一层 multiply 的纸齿，
+  位置按画号换：`ox=hs(v,51)*470`、`oy=hs(v,52)*310`。
+- **线条每张画重抖一次**：`boil(pts, seed, amp=2.4, scale=70)` 用 simplex 噪声平移中线，seed 跟 drawing id
+  走；`step===3` 时只循环 3 张（`bv(D)=D.id%3`），其余 4 张。
+- **一拍二**：`SCHED` 11 段，开场 `[0,8,2]` 只有 4 张画，`[108,120,3]` 的 ta-da 是 3 帧一张。
+- **手涂没对准**：`REG = {dx:-5, dy:4}`，填色层偏左 5px、偏下 4px，墨线压在上面。
+- **可变宽墨线**：`outline(pts, wfn)` 把中线往两侧各推半个宽度；撇从 `W0*1.12` 收到 `W0*0.5`。
+
+## 2. 色板
+
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| 纸（page） | `#f4e9d0` | `body` 底与 `PAL.cream`，占 60% 以上 |
+| 纸白（surface） | `#fff6e2` | `PAL.hi`，高光与撕口 |
+| 墨（text） | `#1c1613` | 所有线条、标题、落款 |
+| 番茄（accent） | `#e5402b` | 火柴头、外焰、红圈、箭头 |
+| 阳光（accent2） | `#ffc425` | 填色层主色（比墨线偏 5px） |
+| 铅笔红（muted） | `#d9573f` | `PAL.pencil`，辅助线、阴影边缘 |
+
+`theme.ts`：`page`→`#f4e9d0`，`text`→`#1c1613`，`accent`→`#e5402b`；另两色是这套画具的固定颜料。
+
+**禁止色**：任何冷色（蓝/青/紫），连阴影都不许用蓝灰；纯白 `#fff` 也不行，最亮只到 `#fff6e2`。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 中文用 LXGW Marker Gothic 或 Long Cang，英文手写用 Caveat；原片中手绘路径标题仍应按路径实现，不用字体冒充。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+**标题「手作」不是字体**：`CHAR_SHOU` 4 笔 + `CHAR_ZUO` 7 笔，每笔是中线的点列（unit 空间 0..1，y 向下），
+分 `h` 横 / `v` 竖 / `p` 撇 / `g` 竖钩；`TITLE = {cx:960, cy:440, S:352, gap:18}`，两字转 `-0.045` / `+0.035`
+rad、错 ±8px。宽度由 `strokeWidth(k,u,W0)` 给：撇 `W0*(1.12-0.62u^1.4)`，钩在 `u>0.8` 后收到 0.5 倍。
+**这条必须照搬**，换成字体就变成字幕。
+
+字幕用 `'64px "LXGW Marker Gothic"'`、`'600 42px "Caveat"'`、`'400 86px "Long Cang"'`。替代：
+拉丁 `'"Ink Free","Segoe Script",cursive'`；中文 `'"KaiTi","STKaiti","Microsoft YaHei",serif'`。
+损失：Ink Free 是等宽单线，没有 Caveat 的笔压与连笔；楷体是印刷楷，等粗、有顿笔，字面还小一号（字号 +6%）。
+
+## 4. 动效语法
+
+- **节拍**：一拍 = 12 帧，16 分 = 3 帧，`bar_anchor:0.5`。`exposure` 表把每段标成 on 1s / 2s / 3s ——
+  先定「每张画几帧」，再谈运动。
+- **缓动只在一张画内部**：`E.out2` 管镜头推拉与贴纸滑入；线条 boil 是**阶跃**，没有插值。
+- 签名动作：
+  1. **擦火柴**（`strike_start:0.333`）：`strike_scrape:[0.333,0.458]` 只有 3 帧，线拉长 150–300% 只留 1 帧；
+     `ignite:0.5` 火焰出现，`match_land:1.0` 才落稳。
+  2. **醒**（1.0–2.0，on 2s）：`eyes_open:1.25`、`blink:1.417`、`look_left:1.5`、`look_right:1.667` 全在
+     16 分上，每 3 帧换视线；`crouch:1.75` 是起跳前的 squash。
+  3. **跳**（`jump:2.0`→`land:2.5`）：12 帧，离地 3 帧到顶，落地 2 帧压到 `sy 0.92`，下一张弹回 1.04。
+  4. **舞**（2.5–4.5）：`hops:[3.0,3.5,4.0]` 每拍一跳，`twirl:[3.75,4.0]` 半圈，`shimmy:[4.083,4.25,4.417]`
+     在 16 分上左右摆 6px；`tada:4.5` 定格成 on 3s。
+  5. **爆 + 重组成字**（6.25–8.5）：`squash:6.25` → `burst:6.5` → `impact_frames:[6.5,6.542]` 两帧反白 →
+     `box_blown:6.583` → 11 段 `strokes`（7.25 起每 3 帧一笔）→ `title_settle:8.5`。
+- **组成规则**：舞台 `STAGE={s:1.4, X:960, Y:1002}`；相机切点 f12/30/48/60/108/132（`CLOSE 2.6` →
+  `WAKE 1.75` → `STAGE` → `LOW 1.5` → `MED 2.05`）；安全边距 60px；图层：纸 → 大形色块 → 墨线 →
+  填色（-5,+4）→ 高光 → tooth/dust 顶层。
+
+## 5. Remotion 落地配方
+
+必须换掉的六处：
+1. Canvas2D 逐帧绘制 → 两条路：(A) SVG `<path>`，几十条 path 让 React diff，最省心；(B) `<canvas>` +
+   `useLayoutEffect`，依赖 `drawing(f).fq` 而不是 `f`，否则一帧画两遍。
+2. `requestAnimationFrame` → `frame`；`Math.random()` → `hs()` / `mulberry32(seed)`；`Date.now()` 删掉。
+3. **CSS `transition`/`animation` 全禁**：会在 24fps 之间插出平滑假帧，一拍二立刻消失。
+4. 纸纹/尘土（不在仓库）→ `feTurbulence baseFrequency=0.85 numOctaves=3` 的 256px tile +
+   `mixBlendMode:'multiply'`、opacity 0.12。损失：没有真实纤维的断续走向，特写会「太干净」。
+5. 线宽：SVG `stroke-width` 不能沿路径变 → 真要变宽得把中线 offset 成多边形（`outline()` 移植，约 30 行）；
+   偷懒叠两遍 stroke（0.9 粗 + 0.6 细）造假压力，收笔处会露馅。
+6. `motionBlur.samples:1` 等于没有；smear 是手画的一帧拉伸，不是后期模糊。
+
+```tsx
+const SCHED: [number, number, number][] = [[0,8,2],[8,24,1],[24,48,2],[48,60,1],[60,108,2],
+  [108,120,3],[120,132,2],[132,168,1],[168,224,2],[224,230,1],[230,240,3]];
+const drawing = (f: number) => { let id = 0;
+  for (const [a, b, s] of SCHED) {
+    if (f >= b) { id += Math.ceil((b - a) / s); continue; }
+    const k = Math.floor((f - a) / s); return {fq: a + k * s, id: id + k, step: s};
+  } return {fq: 239, id, step: 3};
+};
+const wob = (pts: [number, number][], seed: number, amp = 2.4) => pts.map(([x, y]) => [
+  x + amp * Math.sin(x * 0.014 + y * 0.006 + seed * 2.1) * Math.cos(y * 0.011 - seed * 1.3),
+  y + amp * Math.cos(x * 0.009 - y * 0.013 + seed * 1.7),
+]);
+const Stroke = ({pts, seed, w}: {pts: [number, number][]; seed: number; w: number}) => (
+  <path d={wob(pts, seed).map(([x, y], i) => `${i ? 'L' : 'M'}${x} ${y}`).join(' ')} fill="none"
+    stroke="#1c1613" strokeWidth={w} strokeLinecap="round" strokeLinejoin="round" />
+);
+export const HandMade = () => {
+  const f = useCurrentFrame();
+  const D = drawing(f);                       // 真正的时间是 D.fq，不是 f
+  const seed = D.id * 0.37 + 1;               // 同一张画内所有笔画共用一个 boil seed
+  return <AbsoluteFill style={{background: '#f4e9d0'}}>
+    <svg width={1920} height={1080} viewBox="0 0 1920 1080">
+      <filter id="tooth"><feTurbulence baseFrequency={0.85} numOctaves={3} /></filter>
+      <rect width="100%" height="100%" filter="url(#tooth)" opacity={0.12}
+        style={{mixBlendMode: 'multiply', transform: `translate(${(D.id % 4) * -37}px, ${(D.id % 3) * -29}px)`}} />
+      <g transform="translate(960 440)">      {/* 每笔一条中线折线；变宽要自己 offset 成多边形 */}
+        <Stroke pts={[[-330, 0], [0, -40], [330, 0]]} seed={seed} w={58} />
+        <Stroke pts={[[0, -300], [0, 300]]} seed={seed + 1} w={46} />
+      </g>
+    </svg>
+  </AbsoluteFill>;
+};
+```
+
+填色层：同一组 `Stroke` 再画一遍，`stroke="#ffc425"`、平移 `(-5, 4)`、压在墨线下面。
+
+## 6. 镜头结构模板
+
+| 秒 | 帧 | 意图 |
+| --- | --- | --- |
+| 0.0–0.333 | 0–8 | 火柴躺在盒侧，2 帧一张，只有呼吸 |
+| 0.333–1.0 | 8–24 | 擦：3 帧 smear + 翻转，on 1s |
+| 1.0–2.0 | 24–48 | 睁眼、眨眼、左右看、下蹲，全在 16 分上 |
+| 2.0–2.5 | 48–60 | 跳：一拍一，12 帧一个起落 |
+| 2.5–4.5 | 60–108 | 跳舞，每拍一个 hop；LOW 机位压到 1.5 |
+| 4.5–5.0 | 108–120 | ta-da 定格，on 3s |
+| 5.0–6.5 | 120–156 | 二次弹跳 → 蓄力旋转 → 压扁 |
+| 6.5–7.25 | 156–174 | 两帧反白 + 冲击框，然后烟团/火星/速度线 |
+| 7.25–8.5 | 174–204 | 11 段笔画重组成「手作」 |
+| 8.5–10.0 | 204–240 | 落款 → 回拉到 84% → 翻纸 → 眨眼，on 3s |
+
+## 7. 坑
+
+- 一拍二不是「每 2 帧取整」，是 `drawing(f).fq` 回到这张画的起始帧；镜头仍按 `f` 算，混用才抖得对。
+- 拿 `f` 而不是 `D.id` 当 boil seed，hold 段会变成 24fps 抖，节奏全散。
+- 填色偏移是**屏幕**像素：特写 `s=2.6` 时不除 scale 会错位 13px（`GLOBAL.amp`/`GLOBAL.ink` 管这个）。
+- 纸纹每张画换位置，否则看起来是「一张纸」而不是「一叠纸」。
+- `strokes` 落在 `7.25 + 0.125k`，正好 3 帧一笔；一帧一笔会糊成一坨。
+- 标题换成字体 = 放弃这个风格；`CHAR_*` 的笔画顺序与粗细剖面是这份片子的身份证。
+
+## 8. 版权与素材
+
+上游 MIT。`LXGW Marker Gothic`、`Caveat`、`Long Cang` 已随 DrawAI 内置；火柴盒、火焰精灵、
+「手作」字样是这个 demo 自己的角色与文案，客户项目里要换；星爆、烟团、速度线、反白冲击框是通用漫画
+语汇。纸纹自己拍/扫或用 `feTurbulence` 生成，别抓别人的扫描件。