dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/mgstyles/briefs/06-collage.md

@@ -0,0 +1,149 @@
+# 06-collage · 拼贴剪贴 / NOGGIN
+
+上游：`demos/06-collage/index.html`（66.5KB，889 行，**全部内联 Canvas2D**）+ `assets/gen/layout.json`（16 张抠图的
+尺寸与铰链点）+ `cues.json`（90BPM，`pop:4.0`，`tear:7.5`）。1920×1080 / **30fps 渲染但只走 12fps 网格** / 10.000s。
+片子专用 `assets/gen/*.png`（16 张）、`page_kraft.jpg`、`page_red.jpg` 未收录；共享的
+`grain/washi/dust` 纹理可在 `motion_assets library` 搜索并导入；来源信息记录于素材清单。提示词原文用 `mg_style {action:"read",slug:"06-collage"}` 取。
+
+## 1. 一眼认出
+
+- **运动是 12fps 的，不是 30**：`K(t)=Math.floor(t*12+1e-4)`，所有位移/角度先落到 `Q(t)=K/12` 再取整；
+  30/12=2.5 帧一步，所以实际是 2 帧、3 帧交替。
+- **每个元素自己会抖**：`jit(id,t,amp=2)` 给 x/y ±2px、rot ±0.4°；不动的元素 `boil(false)` 降到 6fps、±1.1px。
+- **白描边是「剪」出来的**：`rimmed(img,r)` 沿半径 3.5px 的圆画 28 遍再 `source-in` 填 `#F4EFE4`，不是 stroke。
+- **要么拍上去要么贴上去**：`slap(t,t0,pre=3)` 前 3 步放大到 1.38 且 `lift` 到 1，落点过冲 0.972，再回弹 1.01。
+- **影子是纸的影子**：`shadow(c,lift)` 的 blur `5+34*lift`、offset `3+24*lift`、alpha `0.36+0.08*lift`。
+
+## 2. 色板
+
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| 纸（page） | `#F2ECDF` | 剪贴块的纸白、`cutQuad` 的底 |
+| 版心纸（surface） | `#EFE8DA` | `tornStrip(900,250,53,16)` 的刊头、圆章 |
+| 牛皮（field） | `#E3CFAE` | `page_kraft.jpg` 的底色，整张底 |
+| 墨（text） | `#16130F` | 所有字、撕边、胶带下的暗部 |
+| 脏金（muted） | `#7A5516` | 旧报纸的泛黄区、半调暗部 |
+| 印刷红（accent） | `#D2261C` | 红圆盘、`PAT.red`、NOGGIN 的 A |
+| 撕口（border） | `#C4A077` | 卷边背面的纸芯 |
+
+`theme.ts`：`page`→`#F2ECDF`，`text`→`#16130F`，`accent`→`#D2261C`，`field`→`#E3CFAE`；`#3F6FA8` 只给太空楔形的地球边缘。
+
+**禁止色**：任何高饱和的冷光/霓虹（青、品红、荧光绿）—— 这套片子只有油墨四色 + 纸。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 英文大标题用 Anton，章印小字可用 Bebas Neue，中文使用 Noto Serif SC；Alimama ShuHeiTi 未内置，需粗黑时可选 Noto Sans SC。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+原片：`'400 124px "Anton"'`（构成主义斜带）、`'400 238px "Anton"'`（NOGGIN 刊头）、`'900 132px "Noto Serif SC"'`
+（脑洞季刊）、`'700 190px "Alimama ShuHeiTi"'`（四个 212×212 的字块）、`'500 19px "IBM Plex Mono"'` 加
+`letterSpacing 3px`（kicker）、`'400 22px "Bebas Neue"'`（圆章小字）。
+DrawAI 替代：
+- Anton → `'"Arial Black","Impact",sans-serif'`；Bebas → `'"Impact","Arial Narrow",sans-serif'`。
+- 中文重黑 → `'"Microsoft YaHei","PingFang SC",sans-serif'` 700；宋体 → `'"SimSun","STSong",serif'` 900。
+- mono → `'"Consolas","JetBrains Mono",monospace'`。
+- 损失：Arial Black 比 Anton 宽 ~8%，124px 的长句要收到 108px 才不撞边；Impact 没有 Bebas 的几何骨架；
+  雅还没有 Alimama 的字面厚度，190px 会显空；SimSun 没有 900 字重，合成粗体把笔画糊死。
+  `letterSpacing` 3px 在 Consolas 上要减到 2px。
+
+## 4. 动效语法
+
+- **节拍**：90BPM，一拍 = 20 帧，16 分 = 5 帧；视觉网格 12fps（2.5 帧/step）。两套网格只在 0.5s 公倍，
+  `cues.json` 的事件都是两边同时对齐的（`hero:[6.667,6.833,7.0,7.167]` 就是每 1/6s 一块字）。
+- **缓动**：`eOut = 1-(1-x)^3`、`eIO` 三次；但多数动作不是缓动，是**阶跃** —— 12fps 上只有 3–4 个姿态。
+- 签名动作：
+  1. **大手把肖像拍上来**（`slap_portrait:0.333`、`slap_circle:0.667`、`slap_news:1.0`）：`IN` 四档
+     `[1100,-100]→[560,-50]→[200,-18]→[40,-4]`，每档一个 1/12s；落定那一步 `sqx 1.02 / sqy 0.96 / y+=14`。
+  2. **颌骨分段**（`jaw:[1.333,1.667,2.0]`）：`jaw` 取 `[0.5,1,0.5,0]` 的最大值 → 下颌骨绕
+     `jaw_hinge:[372.75,470.5]` 转 `-1.6°`，嘴用 2–3 张替换帧（不是变形）。
+  3. **开盖**（`pop:4.0`）：`LIDF` 四档 `[-70,10,-230]`、`[-200,-30,-660]`、`[-300,-70,-700]`、`[-385,-40,-300]`
+     （角度/位移/抬起），静止角 `-95°`；`lid_land:4.333` 后有 5% 回弹（`1+0.05*(1-eOut(...))`）。
+  4. **一件件拍进画面**（`rocket:4.333`、`earth:4.667`、`birds:5.0`、`roses:5.333`、`butterflies:5.5`、
+     `manicules:6.0`）：每件都走 `slap`，间隔 1–3 个 step，`lift` 制造「手还没走」的悬空感。
+  5. **撕 + 卷**（`tear:[7.5,7.667,8.167]`）：90 点撕裂线 `x` 从 1190 移到 770，叠
+     `sin(u*9.1+1.3)*22 + sin(u*31+0.4)*8`；`fmap(d,R)= d<=πR ? R*sin(d/R) : πR-d` 把弧长换成卷边高度，
+     `R` 四档 70/110/130/130。
+- **组成规则**：`cam` 基准 `z=1, px=845, py=560`，pop 冲拳 `z 1.11→1.075→1.056→1.05`、`cx [12,-8,3,0]`；
+  图层固定为 纸纹 → 大色块/红圆盘 → 照片剪影 → 胶带/涂鸦 → 颗粒；版心 90px，但刊头故意让印刷头像
+  出血 120px（`RX=1490, RS=0.60`）。
+
+## 5. Remotion 落地配方
+
+必须换掉的六处：
+1. `c.drawImage` 逐帧 → `<Img src={staticFile('portrait.png')}>` + 每帧算 `transform`；白描边用 8 向偏移复制
+   再叠一层同色 `filter: drop-shadow` 四向，**不要**真的画 28 遍。
+2. `requestAnimationFrame` → `frame`；`hash()` 是 imul 确定性哈希，可原样保留；`Math.random()` 一律换掉。
+3. CSS `transition`/`animation` 禁；静态 `filter` 可以留。
+4. 12fps 阶梯：`K(f)=Math.floor(f*12/30+1e-4)`，**别用 `Math.round`**（2.5 帧的交替会被抹成 15fps）。
+5. 按许可选择内置颗粒/胶带纹理，或用 `feTurbulence` + `feColorMatrix` 做 256px tile，`mixBlendMode:'overlay'` opacity 0.26，
+   每 2 个 step 换偏移 `-hash(k,1)*120, -hash(k,2)*900`（`finish()` 就是这么干的）；半调网点用
+   `radial-gradient(circle, #16130F 1.4px, transparent 1.6px)` 4px tile。损失：真半调的网点半径随亮度变，
+   平铺网点不会，暗部是「发灰」而不是「发黑」。
+6. 翻页/卷边没有便宜的 CSS 3D 替代 → SVG `<path>` 打 4 档形变 + 6px `#EFE7D6` 亮边 + `#C4A077` 背面；
+   损失：没有真正的透视缩短，大角度会「软」。
+
+```tsx
+const hash = (a: number, b = 0) => {           // 上游同款，可确定性复现
+  let h = Math.imul(a ^ 0x9e3779b9, 0x85ebca6b) ^ Math.imul(b + 0x165667b1, 0xc2b2ae35);
+  h ^= h >>> 15; return (h >>> 0) / 4294967296;
+};
+const K = (f: number) => Math.floor((f * 12) / 30 + 1e-4);        // 12fps 网格
+const ks = (f: number, t0: number) => K(f) - Math.round(t0 * 12);
+const jit = (id: number, f: number, amp = 2, fps = 12) => {
+  const k = Math.floor((f * fps) / 30);
+  return {x: (hash(id, k) * 2 - 1) * amp, y: (hash(id + 71, k) * 2 - 1) * amp,
+          rot: (hash(id + 913, k) * 2 - 1) * amp * 0.2};
+};
+const slap = (f: number, t0: number, pre = 3) => {
+  const k = ks(f, t0);
+  if (k < -pre) return null;
+  if (k < 0) { const u = -k / pre; return {s: 1 + 0.38 * u * u + 0.05 * u, lift: u, sqy: 1}; }
+  if (k === 0) return {s: 0.972, lift: 0, sqy: 0.96};
+  return k === 1 ? {s: 1.01, lift: 0.03, sqy: 1} : {s: 1, lift: 0, sqy: 1};
+};
+export const Collage = () => {
+  const f = useCurrentFrame();
+  const p = slap(f, 0.3333);                     // 大手把肖像拍上来
+  if (!p) return null;
+  const j = jit(7, f);
+  return <AbsoluteFill style={{background: '#E3CFAE'}}>
+    <Img src={staticFile('portrait.png')} style={{position: 'absolute', left: 845, top: 554, width: 802,
+      transform: `translate(-50%,-50%) translate(${j.x}px, ${j.y + (1 - p.lift) * -40}px)`
+        + ` rotate(${j.rot}deg) scale(${p.s}, ${p.s * p.sqy})`,
+      filter: `drop-shadow(0 ${3 + p.lift * 24}px ${5 + p.lift * 34}px rgba(34,20,8,${0.36 + 0.08 * p.lift}))`}} />
+  </AbsoluteFill>;
+};
+```
+
+## 6. 镜头结构模板
+
+| 秒 | 帧 | 意图 |
+| --- | --- | --- |
+| 0.333–1.0 | 10–30 | 三下：肖像、红圆盘、报纸，各隔 1/3s |
+| 1.333–2.0 | 40–60 | 下颌三段开合，配 3 张嘴 |
+| 2.333–3.333 | 70–100 | 盖章 + 期号，剪刀五下 `snips`，纸屑落下 |
+| 3.333–4.0 | 100–120 | 抖动蓄力，最后 1/3s **留白**，只有纸在抖 |
+| 4.0–4.333 | 120–130 | `pop` 开盖，深海楔形翻开，`lid_land` 回弹 |
+| 4.333–6.0 | 130–180 | 火箭/地球/鸟/玫瑰/蝴蝶逐件拍入 |
+| 6.0–6.667 | 180–200 | 两只手指标志 `manicules` 敲两下，构成主义斜带压上 |
+| 6.667–7.167 | 200–215 | 「脑洞大开」四块字每 1/6s 拍一块 |
+| 7.5–8.167 | 225–245 | 撕纸 + 卷边，右缘翻过去 |
+| 8.333–10.0 | 250–300 | 封底：NOGGIN 刊头、脑洞季刊、圆章、剪刀合上 |
+
+## 7. 坑
+
+- `K` 必须 `+1e-4` 再 floor，否则 `f=0` 与 `f=30` 会跨到同一格，撕纸的第一帧对不上 `7.5`。
+- `jit` 的 rot 是 `amp*0.2` 弧度再转度，直接写 2° 会抖成帕金森。
+- 白描边是 alpha 里填色（`source-in`），CSS `drop-shadow` 只会往外发光，做不出「剪刀沿」的厚度；
+  四个方向的 `drop-shadow` 叠起来接近，但拐角会圆。
+- `slap` 的 `pre=3` 是 3 个 step（0.25s），不是 3 帧；按帧数写会变成 0.1s 的抽搐。
+- 90BPM 的 16 分是 5 帧、12fps 网格是 2.5 帧，事件表里两者必须同时落在整数格上，否则「拍」和「抖」错半格。
+
+## 8. 版权与素材
+
+上游 MIT。16 张抠图 PNG（`assets/gen/*`）是 rembg 从新闻/NASA 公共领域图切的，**不在仓库**，要用得自己
+重做；`page_kraft.jpg`、`page_red.jpg` 未收录，共享 `grain/washi/dust` 已在插件素材库，来源信息见素材清单。字体 Anton、Bebas Neue、
+Noto Serif SC 与 IBM Plex Mono 已内置，Alimama ShuHeiTi 尚未内置。`NOGGIN` 与
+`THE MIND IS A COLLAGE` 是上游虚构的刊名与标语，客户项目必须换掉；维多利亚肖像、火箭、地球、手指标志
+是通用公共领域图形，可以重画，别直接抓某本杂志的封面版式。

package/lib/motion/mgstyles/briefs/07-liquid.md

@@ -0,0 +1,106 @@
+# 07-liquid · 液态流动
+
+上游：`index.html` 6.4KB + `js/scene.js` 56.7KB + `js/shaders.js` 31.7KB + `js/engine.js` 9.8KB + `js/{type,textsdf,links,lookdev}.js`；`cues.json` bpm 150（12 帧/拍）D major：pour 0 / rain 0.4 / fuse 2.0 / leap 3.2 / flood 4.0 / immersed 4.42 / reveal 4.85 / gather 5.75 / gap 6.2 / drop 6.4 / glint 7.1 / drip 7.6 / ripple 8.4 / end 10.0；1920×1080 / 30fps / 10s，WebGL2 + RGBA16F + bloom。
+
+## 1. 一眼认出
+
+- 只有一种材质：**稠液体**。球缘 1–2px 高光唇线（`palThin`），内部按厚度 u 混合橙→粉→紫（`palMid`，`js/shaders.js:284-302`），不是玻璃也不是水。
+- 落地先压扁再回弹：静止水洼 `SV_PUD = 0.5` + `svLand()` 的 `spring(tl, 6, d.z)`（`js/scene.js:128-130`），接触点留 splat 与 5–7 条 tendril。
+- 棚拍暗紫棚：`backdrop()` 顶 `lin(0.070,0.018,0.090)` → 地平线 `lin(0.205,0.058,0.235)`；地平线 786px（`uHorizon`）、接触线 872px（`floorY`）、key light `{x:-0.78,y:-0.95}`。
+- 4.0s 三层洪流面压上来（`uOv[3]`，`sheets_in 4.035/4.105/4.175` 各错 2 帧），4.42s 沉进液体（immersed），只剩涡流 `uSw` 与气泡 `uBub`；6.4s 液滴拉成 4 个字形（`uTex`+`uL[4]`+`uLM[4]` 椭圆中介形），7.2s glint 扫过，8.4s 一滴落下、`uRip` 收尾。
+
+## 2. 色板
+
+着色器里全是线性值（`lin(c)=pow(c,2.2)`，`js/shaders.js:10`）；下表按 `c^(1/2.2)` 反算，`js/links.js:6` 另有官方 sRGB 近似（`PM`/`PT`），取色以后者为准（差 10–15%）。
+
+| 角色 | hex | 用在哪 |
+|---|---|---|
+| 液体主体 | `#FF5C0F` → `#FF1A70` → `#8F1FFF` | `palMid`，随 u 三段插值 |
+| 高光唇线 | `#FFBD4D` → `#FF80A8` → `#D685FF` | `palThin`，球缘 1–2px |
+| 深部 | `#E65A3B` → `#CD2B94` → `#853BCA` | `palDeep`，厚处与接触阴影 |
+| 背景顶 / 地平线 | `#4C2955` / `#7C4684` | `backdrop()`，786px |
+| 地面近 / 远 | `#371E3E` / `#703F77` | `floorCol()` |
+| 主字 / 副标 / 高光 | `#FFE8F0` / `#FFC8E0` / `#FFF7F0` | `js/type.js`、`links.js:39` |
+
+禁止色：**纯黑 #000 / 纯白 #FFF 都不进液体**（暗部 `#371E3E`、高光 `#FFF7F0`）；**不加青/蓝绿**，色谱里没有。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 英文标题用 Fraunces，中文可用 Resource Han Rounded 或 Noto Serif SC，界面副标用 Inter；上游指定的 Fraunces 可变轴实例可能与默认值不同。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+原片：`Fraunces Liquid` 900，'drop' 400px / tracking 10 / pad 170 / sigma 10（`js/textsdf.js`）；v5 换成 `Resource Han Rounded` 900 / 300px。副标 `Noto Serif SC` 600 44px、y958、tracking 14、`rgb(255,232,240)` α.96；次行 `Inter` 600 20px、y999、tracking 5.5、`rgb(255,200,224)` α.70，右对齐到 `word.letters[3].bbox[2]-4`（`js/type.js`）。
+
+Windows 栈：display `"Constantia","Georgia",serif` 700 + `-webkit-text-stroke:0.4px`；中文 `"SimSun","宋体",serif` 600；西文 `"Segoe UI",sans-serif` 600。损失：Fraunces 的柔楔衬线 / 光学尺寸 / 圆 terminal 全丢，Constantia 更硬、x-height 更小，400px 下 tracking 要 10→14；宋体 300px 露点阵边，大字号中文改 `"Microsoft YaHei"` 700；两族都无 900，硬给会被 Chrome 合成加粗并横向撑开。
+
+## 4. 动效语法
+
+150 BPM → 12 帧/拍、6 帧/半拍，cue 全落 0.4 网格。缓动（`js/scene.js:28-31`）：`inOut=(0.65,0,0.35,1)`、`easeIn=(0.5,0,0.9,0.4)`、`frontEase=(0.28,0.55,0.42,1)`；回弹用 `spring(t,f=4,z=0.3)` / `wob(t,f,decay)`（`scene.js:33-38`）。禁用 CSS `ease` 与 `bounce/elastic` 预设；`linear` 只给洪流前沿与 glint。
+
+1. **落滴**（0→0.167）：四滴 0.4/0.8/1.2/1.6 落地（x 640/1250/405/960，尺寸 1.0/0.85/0.8/1.35）；`easeIn` 下落，落地前 2 帧缩到 0.94，落地后 12 帧 squash 到 0.62 再回 0.5。
+2. **融合**（merges 2.0/2.4/2.8）：三对球按 `mergeK` 的 smoothstep 收拢，靠 `k=0.1` 的 smooth-union（`uK`）不是布尔；每对 0.18s、错峰 0.4s，接 hop 1.66/2.06/2.46。
+3. **洪流**（4.0→4.42，一拍）：前沿是 `uFlA`(amp/freq/lean) 行波，三层 `uOv` 各错 2 帧；immersed 时相机 zoom 降、画面转 `uSw`+`uBub`。
+4. **标志与收尾**：6.4 `logo_snap` / 6.417 `letter_bridge_snap`，液滴被 `frontEase` 拉成 4 字形 0.32s，字间走 `uLM` 椭圆、不淡入；8.4 `drip_land`→8.567 `drip_snap`，`uRip` 一圈 0.55s 衰到 0。
+
+构图：落点 x 固定，地平线 786、接触线 872、副标基线 958/999，安全边距 96px。图层：backdrop → floor → 主体 → 唇线 → sheets → SDF 字 → bloom → tonemap → grain。
+
+## 5. Remotion 落地配方
+
+API：`useCurrentFrame` / `useVideoConfig` / `interpolate` / `Easing.bezier` / `AbsoluteFill`；保真路线加 `three` + `@react-three/fiber` 的 `<shaderMaterial>`；运动模糊用 `@remotion/motion-blur` 的 `<MotionBlurTrail>`。
+
+必须换掉：
+
+1. `requestAnimationFrame` / `renderAt(t)` 主循环（`js/engine.js`）→ 全由 `frame` 派生，`t = frame/fps`；`js/scene.js:51` 的 `camAt(t)` 可原样搬。
+2. `Date.now()` / 自增 `uFrame` → 唯一时钟是 `frame`，glint 与气泡相位都按 t 算。
+3. `Math.random()` → 上游已是固定种子 `rng(20260927)`（`scene.js:39`），照抄 LCG，否则每帧噪点都在跳。
+4. CSS `transition/animation`、远程 `@font-face` → 静态 style，字体走上面的栈。
+5. WebGL 逐帧重绘 → **A 保真**：fragment shader 原样塞 `<shaderMaterial>`，每帧上传 `uB[72]/uS[20]/uBub[32]/uFl/uOv[3]/uCam/uT`，代价是 bloom mip chain 自写 + 确认 `EXT_color_buffer_float`。**B 降级**：双层 SVG 椭圆（`palMid` 渐变 + `palThin` 高光弧）+ `blur(6px)`，bloom 靠复制层 `blur(24px) saturate(1.4)`，损失 smooth-union / 折射 / 唇线，球数超 5 个露馅。**A 更保真**，B 只适合 <3s 或液体非主角。
+6. 运动模糊：上游是页内时间超采样（FAST 段 16/20/24 采样、shutter 0.5，`index.html:24` 只声明 `samples:1`）；Remotion 用 `<MotionBlurTrail samples={6} shutter={0.5}>` 只包下落/洪流层，或按 `uOvV`（px/frame）在 shader 里对前沿一维多采样。
+
+```tsx
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
+const B = { front: Easing.bezier(0.28, 0.55, 0.42, 1), fall: Easing.bezier(0.5, 0, 0.9, 0.4) };
+const springS = (t: number, f = 6, z = 0.38) => t <= 0 ? 0 : Math.exp(-z * 2 * Math.PI * f * t) * Math.cos(2 * Math.PI * f * Math.sqrt(1 - z * z) * t);
+const DROPS = [[0.4, 640, 1], [0.8, 1250, 0.85], [1.2, 405, 0.8], [1.6, 960, 1.35]];
+
+export const Liquid: React.FC = () => {
+  const t = useCurrentFrame() / useVideoConfig().fps;
+  const flood = interpolate(t, [4.035, 4.42], [0, 1], { easing: B.front, extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  return (
+    <AbsoluteFill style={{ background: 'linear-gradient(#4C2955 0%, #7C4684 72.8%, #703F77 72.9%, #371E3E 100%)' }}>
+      {DROPS.map(([t0, x, s], i) => {
+        const fall = interpolate(t, [t0 - 0.167, t0], [0, 1], { easing: B.fall, extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+        const r = interpolate(fall, [0, 1], [10, 62 * s]);
+        const sy = 1 + 0.38 * springS(t - t0, 6, 0.38);
+        return <div key={i} style={{ position: 'absolute', left: x - r, top: 872 - r * 2 * sy, width: r * 2, height: r * 2 * sy, borderRadius: '50%',
+          boxShadow: 'inset 0 2px 5px #FFF7F0, 0 0 40px #FF1A7066',
+          background: 'radial-gradient(circle at 34% 26%, #FFBD4D, #FF80A8 30%, #FF5C0F 58%, #8F1FFF)' }} />;
+      })}
+      <AbsoluteFill style={{ transform: `translateY(${(1 - flood) * 1080}px)`, background: 'linear-gradient(#FF80A8, #8F1FFF)' }} />
+    </AbsoluteFill>
+  );
+};
+```
+
+## 6. 镜头结构模板
+
+- **0–2.0** 空棚 + 786px 地平线起手，第一滴 0.4 落，splat / tendril 长出，1.66 起腾跃。
+- **2.0–4.0** fuse / leap：三对融合成"水母"，hop 2.06/2.46 + 3.433 `thread_snap` 细丝。
+- **4.0–4.42** flood：三层 sheet 压满，4.0 impact 相机抖一帧。
+- **4.42–6.4** immersed→gap：全屏液体只剩涡流气泡，5.75 收成一条液线。
+- **6.4–8.4** drop→glint：6.4 落成、6.417 桥接，7.2 扫光 0.55s。
+- **8.4–10** 8.4 滴落、8.567 涟漪，8.8 后只剩微颤。
+
+
+## 7. 坑
+
+1. 无头 Chrome 拿不到 `EXT_color_buffer_float` 时 bloom 全黑——先探测，退回 8bit 并把阈值降 0.2。
+2. uniform 数组定长（`NB 72` / `NS 20` / `NBUB 32`），`uNB` 只控有效个数，超了静默截断。
+3. squash 支点是**接触点**（`makeM` 的 `piv`）不是质心，CSS `transform-origin` 放错会像气球。
+4. sRGB 里 lerp 会发灰：`#FF1A70 → #8F1FFF` 中间补 `#FF3E9F`、`#C63BFF`。
+5. `uMbw` 是"帧间快门比例"不是模糊半径，搬过来换成 `shutter/fps`。
+
+## 8. 版权与素材
+
+上游 mg-styles-15 为 MIT。Fraunces、Instrument Serif、Inter 与 Noto Serif SC 已随 DrawAI 内置；`js/textsdf.js` 的字形图集不要复用。'drop' / 'LIQUID MOTION' / 「液态流动」是占位词。

package/lib/motion/mgstyles/briefs/08-morph.md

@@ -0,0 +1,111 @@
+# 08-morph · 形变动画
+
+上游：`index.html` 81.3KB（全部逻辑内联）+ `glyphs.json` 24.5KB（`upm:1000`，`glyphs[ch].contours` 为整数点，只有 m/o/r/p/h/e 六个 Outfit SemiBold 轮廓）；`cues.json` bpm 150（12 帧/拍）；land cup 0.4 / sun 2.0 / sunset 3.2 / gull 4.4 / plane 5.4 / pin 6.4 / heart 7.6 / m 8.6；build 4.8 / drop 6.4 / outro 8.8；1920×1080 / 30fps / 10s，Canvas2D + 一张离屏 canvas。
+
+## 1. 一眼认出
+
+- **一形万象**：始终只有一个实心剪影，8 个图标同一套 fill 轮换，没有描边、渐变、阴影（暗面是 `shade` 单独画的形，不是 opacity）。
+- 变形不是交叉淡化：轮廓先重采样成**等点数**（body 240 / 洞 72 / 描边 24 / shade 60），`lerpP` 逐点插值；`via` 段经过中介圆或胶囊（`P.Ca/Cb`），所以中间必过"圆"。
+- 每次落地都压扁再弹：`IMP` 表 + `impact()` 的 `A*sin(2πτ/0.28)*exp(-τ*7.5)`，`τ` 从 `im.t-2*FR` 起算。
+- 背景是 5 色色块按 cue 依次 wipe（cream→mari→verm→ultra→cream→verm→ink），带软边，不是渐变。
+- 最后一定落在印刷质感上：纸纹 + 512² 颗粒（每帧偏移）+ 暗角，像丝网印。
+
+## 2. 色板
+
+`index.html:25` `const C = { ink:'#16151B', cream:'#F4EEE3', mari:'#FFB627', verm:'#FF4F2B', ultra:'#2438E8' }`；pin 的暗面单独 `shadeC:'#D93A1C'`。
+
+| 角色 | hex | 用在哪 |
+|---|---|---|
+| 纸底 / 主字 | `#F4EEE3` cream | 常驻底色、gull / plane / heart / m 的 fill |
+| 墨 | `#16151B` ink | cup 的 fill、8.02s 的终场色块 |
+| 黄 | `#FFB627` mari | sun 的 fill、1.62s 色块、字标圆点 |
+| 橙红 | `#FF4F2B` verm | sunset / pin / heart 的 highlight、2.453s 色块 |
+| 群青 | `#2438E8` ultra | 地平线/海面 flood 色块、plane 的 shade 30% |
+| 暗面 | `#D93A1C` | 只给 pin 的 shade |
+
+`surface/field/border/muted` 由 cream 与 ink 混出：`#E7E1D7`(6%) / `#DED8CF`(10%) / `#D0CBC3`(16%) / `#908C89`(45%)。禁止色：**不许渐变、发光、纯白 #FFF**；暗面只用 `mixC` 调暗，不用透明度。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 字标优先 Outfit，中文副标优先 HarmonyOS Sans SC，编号用 IBM Plex Mono；原片轮廓形变仍要使用对应的轮廓路径。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+原片：字标 `Outfit SemiBold` 250px（`FS=250`、`s=FS/1000`、`track=-5`、`yB=566`、词 `'morphe'`），轮廓来自 `glyphs.json`。副标 `HarmonyOS Sans SC` 500 34px / tracking 4 + `IBM Plex Mono` 500 19px 编号、14px 英文 / tracking 2.5，基线 y1002，x96。片尾 `HarmonyOS Sans SC` 500 40px、tracking 11、`GAP=30`、yb702；英文 `ONE SHAPE · EVERY STORY` 17px IBM Plex Mono、tracking 4、α.65、y758。
+
+Windows 栈：字标 `"Segoe UI Semibold","Segoe UI",sans-serif` + `letter-spacing:-0.05em`；中文 `"Microsoft YaHei","Segoe UI",sans-serif` 500；等宽 `"Consolas","Courier New",monospace`。损失：Outfit 的几何正圆 o/e、单层 a 全丢，Segoe 的 o 略扁、字腔更大，250px 下要手动把 tracking 收紧到 -3；字重 500 在雅黑上偏粗，scaleX 0.98 压一点；Consolas 的 0 有斜杠、IBM Plex Mono 的 `1` 有底座，编号 01/07 观感会变。
+
+## 4. 动效语法
+
+150 BPM → 12 帧/拍，morph 窗多为 0.6–0.8s。缓动（`index.html` 顶部 `bez`）：`EM=bez(0.7,0,0.3,1)`（变形主曲线）、`EO=bez(0.16,1,0.3,1)`、`EIO=bez(0.45,0,0.55,1)`、`EB=bez(0.42,0,0.12,1)`（色块 bloom）、`EXI` expo-in。禁用 `bounce/elastic` 与 CSS 默认 `ease`；位移与形变都用同一条 `EM`，只有入场用 `EO`。
+
+1. **落杯**（0→0.4 land，morph 0→0.62）：drop 形从上方 0.5 处压下，`EM` 到杯形；落地那一帧杯底压 6%，0.3s 回。
+2. **变形链**（8 段，全部 `EM`）：cup>sun 1.3→2.0（via 圆 r116）；sun>sunset 2.4→3.2；sunset>gull 3.6→4.4（via 圆 r118）；gull>plane 4.8→5.4；plane>pin 6.3→6.4（via 胶囊，只 0.1s，硬切感）；pin>heart 7.0→7.6（via 圆 r120，`rot 18`）；heart>m 8.0→8.6。每段前半 `gA=EM(u/0.5)` 走到中介形、后半 `gB=EM((u-0.5)/0.5)` 张开到目标。
+3. **飞行**（5.4–6.4）：plane 沿 `loop cx1215 cy387 r255` 绕，flight 节点 5.6/6.04/6.14 各错一次拍翼/侧倾，position 走 `qbez` 二次贝塞尔。
+4. **心跳**（7.8 / 7.93）：heart 两次 `A.14` 的 squash，间隔 0.13s，第二次幅度 60%。
+5. **字标**（8.32 起）：5 个字母 `t0 + i*0.075`，`travel 0.42` 先平移、`fly 0.32` 再落位，`EO`；字标圆点在 e 右侧 `dotGap=9`、半径 22。
+
+网格：画布中心 960，安全边距 96，地面 642，色块圆心取图标 `pos`。图层：色块 fields（逐个 wipe）→ 图标 shade → body → 洞（evenodd）→ 描边 → UI → 颗粒/暗角。
+
+## 5. Remotion 落地配方
+
+API：`useCurrentFrame` / `useVideoConfig` / `interpolate` / `Easing.bezier` / `AbsoluteFill` / `<svg>` + `<path>`；运动模糊 `@remotion/motion-blur` 的 `<MotionBlurTrail samples={4} shutter={0.5}>`；离线采样用 `@resvg/resvg-js`，或干脆在 build 阶段把轮廓算成点数组存 JSON。
+
+必须换掉：
+
+1. `requestAnimationFrame` / `renderAt(t)` → 一切由 `frame` 派生；`sceneTime` 一类积分（若有）改成对 t 的解析式。
+2. `Date.now()` / 自增帧计数 → 唯一时钟 `frame`，颗粒偏移用 `frame` 整数取模。
+3. `Math.random()` → 上游颗粒是固定序列，搬成 `(f*197)%512` / `(f*331)%512` 的确定性偏移。
+4. Canvas2D 逐帧 `draw` + `<path>.getPointAtLength`（`sampleD`/`resamplePoly`）→ **双轨**：A）离线把每个图标的 body/hole/stroke/shade 采样成点数组写进 JSON，运行时只做 `lerpP`，再用 `<path d=…>` 渲染（保真，推荐）；B）运行时用 `@resvg/resvg-js` 把 SVG path 栅格化成 PNG 再 `lerp` 两张图（会糊，且 morph 中间态是双影，只能当占位）。A 的损失几乎为零，前提是点数与首顶点对齐（见坑 1、2）。
+5. CSS `transition/animation`、`clip-path` 动画 → 色块 wipe 用 SVG `<mask>` 的圆/矩形半径按 `EB` 插值，别用 CSS。
+6. 4 采样运动模糊（`index.html:15`）→ `<MotionBlurTrail samples={4} shutter={0.5}>` 只包飞行与字标层；squash 帧不要加，会糊掉冲击。
+
+```tsx
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
+const EM = Easing.bezier(0.7, 0, 0.3, 1);
+const C = { ink: '#16151B', cream: '#F4EEE3', mari: '#FFB627', verm: '#FF4F2B', ultra: '#2438E8' };
+const ring = (n: number, cx: number, cy: number, r: number) =>
+  Array.from({ length: n }, (_, i) => [cx + r * Math.cos((i / n) * 2 * Math.PI), cy + r * Math.sin((i / n) * 2 * Math.PI)] as const);
+const P = { circle: ring(64, 960, 480, 120), square: ring(64, 960, 480, 120).map(([x, y]) => [960 + (x - 960) * 0.9, 480 + (y - 480) * 0.9] as const) };
+const d = (pts: readonly (readonly [number, number])[], u: number) =>
+  pts.map(([x, y], i) => `${i ? 'L' : 'M'}${(x + (P.square[i][0] - x) * u).toFixed(1)} ${(y + (P.square[i][1] - y) * u).toFixed(1)}`).join('') + 'Z';
+
+export const Morph: React.FC = () => {
+  const t = useCurrentFrame() / useVideoConfig().fps;
+  const u = interpolate(t, [7.0, 7.6], [0, 1], { easing: EM, extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  const wipe = interpolate(t, [6.4, 6.85], [0, 1], { easing: Easing.bezier(0.42, 0, 0.12, 1), extrapolateRight: 'clamp' });
+  const sx = 1 + 0.14 * Math.sin(Math.PI * u); // 变形中段轻微拉伸
+  return (
+    <AbsoluteFill style={{ background: C.ink }}>
+      <AbsoluteFill style={{ background: C.cream, clipPath: `circle(${wipe * 120}% at 960px 540px)` }} />
+      <svg width={1920} height={1080} viewBox="0 0 1920 1080">
+        <path d={d(P.circle, u)} fill={C.verm} transform={`translate(960 480) scale(${sx} 1) translate(-960 -480)`} />
+      </svg>
+    </AbsoluteFill>
+  );
+};
+```
+
+## 6. 镜头结构模板
+
+- **0–1.3** 落杯：0→0.62 变形，落地压 6%，0.8 后 cup 静置，1.0 起副标 `早安 / GOOD MORNING`。
+- **1.3–2.4** cup→sun：1.62 mari 圆从 sun 位置涨开；2.0 sun 落定，`IMP` A.07。
+- **2.4–3.6** sun→sunset：2.453 sky 色块、2.6 sea 色块；sunset 3.2 到。
+- **3.6–4.8** sunset→gull：3.98 flood 把海面推到 -80；gull 4.4，副标 `海风 / SEA BREEZE`。
+- **4.8–6.4** gull→plane→pin：5.4 起飞绕 loop，6.3 起 0.1s 极快变 pin，6.367 shock。
+- **6.4–7.6** 全屏 cream 闪一帧→verm 圆 7.233 涨开→pin→heart。
+- **7.6–8.6** 心跳 7.8/7.93，8.02 ink 色块压满，8.0 起 heart→m。
+- **8.6–10** 字标 8.32 起 5 字母落位，8.95 tagline，9.14–9.38 进度点收满。
+
+## 7. 坑
+
+1. 点数必须与上游一致（240/200/72/24/60），少一个点就抖；两形点数不同时先 `resamplePoly` 到同 N，别用 `interpolate` 硬插两串不等长数组。
+2. 首顶点与绕向要对齐（`orient` 按有符号面积、`bestShift` 找最小位移），否则变形会拧成麻花——这是这份 demo 最容易被做坏的地方。
+3. `getPointAtLength` 依赖 DOM，Server 端渲染直接崩；必须预采样或只在 `<svg>` 里用 `getTotalLength` 的浏览器路径。
+4. 色块 wipe 软边是 `FEATHER = 0.4*0.5/FPS` 个像素，硬边会有锯齿，太大则像雾。
+5. 颗粒每帧整数偏移，subpixel 抖动会把纸纹糊平。
+6. 洞用 `fill-rule:evenodd` 一次画，别用两个 path 叠，变形时会露缝。
+
+## 8. 版权与素材
+
+上游 mg-styles-15 为 MIT。`glyphs.json` 是 Outfit SemiBold 的轮廓子集（SIL OFL），可作字标参考但别当品牌字体；纸纹 `Paper001_4K_color.jpg` 已在插件素材库，可通过 `motion_assets library` 搜索并导入，来源 ambientCG、许可 CC0；也可用工程自带 SVG 近似（损失细纤维）。7 个中文副标与 `ONE SHAPE · EVERY STORY` 是文案占位，成品换客户词。

package/lib/motion/mgstyles/briefs/09-bauhaus.md

@@ -0,0 +1,150 @@
+# 09-bauhaus · 几何构成 / 包豪斯
+
+上游：`demos/09-bauhaus/film.js`（44.8KB，Canvas2D 四块印版 + 一遍 WebGL2 套印合成）+
+`demos/09-bauhaus/cues.json`（120BPM，`drop:6.0`，`freeze:8.0`）。1920×1080 / 30fps / 10.000s。
+提示词原文用 `mg_style {action:"read",slug:"09-bauhaus"}` 取。
+
+## 1. 一眼认出
+
+- **落点都在网格上**：`M = 120` 是唯一模数，中央八格 = 960×960，从 `x=480,y=60` 开始铺满 1020px 高。
+- **只有三原色 + 纸 + 墨**：画面里出现第四种彩色，风格立刻不成立。
+- **几何体只有直角**：正方形、四分之一圆、半圆、等边三角；没有圆角矩形、没有渐变填充。
+- **节拍可见**：每 15 帧（120BPM 一拍）发生一次「状态切换」，两次切换之间画面**完全静止**，不是持续缓动。
+- **印刷感**：套印偏移（misregistration）2–4px、纸纹、边缘有墨的厚度；不是干净的矢量渲染。
+
+## 2. 色板
+
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| 纸（page） | `#F1E9DA` | 全片底，占 60% 以上面积 |
+| 红（accent） | `#E03C31` | 圆、强调块、套印最抢的一色 |
+| 黄（accent2） | `#F2B705` | 次级形、级的底色 |
+| 蓝（accent3） | `#1E4FA3` | 深色形、与红对位 |
+| 墨（text） | `#111111` | 字、细刻线、套准十字 |
+
+`theme.ts` 映射：`page`→PAPER，`text`→INK，`accent`→STAMP。黄与蓝不走 theme，在场景里
+直接写常量（`const Y='#F2B705', B='#1E4FA3'`）—— 它们不是"主题色"，是这个风格的固定颜料。
+
+**禁止色**：任何低饱和中间色（灰蓝、米灰之外的暖褐）、任何渐变、任何透明度低于 0.85 的色块。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 中文标题优先 HarmonyOS Sans SC 或 Noto Sans SC，拉丁大字用 Anton，副标可用 Inter。Alimama ShuHeiTi 与 Alibaba PuHuiTi 尚未内置。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+原片：`'700 180px "Alimama ShuHeiTi"'`（阿里妈妈数黑体，仓库里没有这个字体）。上游另有
+`/assets/fonts/fonts.css` 里的 Archivo / Inter 用于拉丁副标。
+
+DrawAI 替代：
+- 中文标题：`fontFamily: '"Alibaba PuHuiTi","HarmonyOS Sans SC","Noto Sans SC",sans-serif'` +
+  `fontWeight: 700` + `letterSpacing: '-0.02em'`。
+- 拉丁大写：`'"Archivo Black","Anton","Arial Black",sans-serif'`，`letterSpacing: '0.14em'`，
+  字号 = 网格的 1/2（60px）或整格（120px）取整。
+- **竖排标题**（`BAUHAUS` 九字母）：每字单独一个 `<div>`，`writingMode` 不用，直接纵向堆叠，
+  行高 = 字号的 0.86，末字与首字各让出半格。
+- 损失：数黑体的"圆头方身"没有了，替代字体更方，字面更宽 —— 竖排要在**次字母间距**上补回来
+  （`letterSpacing: '-0.06em'`）。
+
+## 4. 动效语法
+
+- 节拍：120BPM = 0.5s = **15 帧/拍**，1 小节 60 帧。所有切换落在 `frame % 15 === 0`。
+- 缓动：`io2`（power2.inOut）= `Easing.bezier(0.455,0.03,0.515,0.955)`；
+  `in2`（power2.in）= `Easing.in(Easing.poly(2))`，用于"砸下来"的落点。
+  **禁用**：`Easing.elastic`、`spring` 的一切过冲 —— 包豪斯的形不弹。
+- 时长：入场 9–12 帧（0.3–0.4 拍），切换级联 2 帧错峰。
+- 签名动作：
+  1. **红圆落地**（0.5s 起，每拍一个）：从 `scale 0` → `1`，`in2`，11 帧，落点永远在网格交点。
+  2. **印版转位**（2–6s）：整组绕 `(960,540)` 以 90° 为步长的 `groupAngle(t)` 离散转动，
+     每拍 +22.5°，用 `io2` 在 8 帧内完成，其余时间静止 → 看起来是"印刷滚筒咔哒一声"。
+  3. **海报拼合**（2–6s）：八个色块按对角顺序 `(i+j)` 从中心向外插入，每个错峰 3 帧。
+  4. **下落级联**（6–8s）：8×8 方格按到中心的曼哈顿距离做符号距离场翻转，每格 2 帧错峰、
+     翻 180° 绕自身底边，`in2`。
+  5. **定格**（8–10s，`freeze`）：60 帧内**零运动**，只有纸纹在极缓地"呼吸"（噪点种子每 3 帧换一次，
+     opacity 0.04→0.06），最后 12 帧竖排标题从下往上压印出现（`clipPath` 从 100% 收到 0）。
+- 组成规则：所有元素对齐 `x ∈ {480, 600, ..., 1440}`、`y ∈ {60, 180, ..., 1020}`；安全边距 = 1 格。
+
+## 5. Remotion 落地配方
+
+上游的三处写法**必须**换掉：
+
+1. `renderAt(t)` + `requestAnimationFrame` → 每帧都是 `useCurrentFrame()` 的函数，禁止任何
+   时间累积状态（`let x = 0; x += ...` 这种在 Remotion 里等于无状态丢失）。
+2. `Math.random()` 的纸纹/抖动 → `random('grain-' + Math.floor(frame / 3))`（`remotion` 的种子随机），
+   保证同一帧多次渲染结果一致。
+3. 四块印版 + WebGL press pass → **不照抄**。用 DOM 分层做近似：
+   ```tsx
+   // 套印：同一形状画两遍，一色偏移 3px，用 multiply 叠回去
+   <div style={{ position:'absolute', inset:0, mixBlendMode:'multiply' }}>
+     <Plate color="#E03C31" dx={0} />
+     <Plate color="#1E4FA3" dx={3} dy={-2} />
+   </div>
+   ```
+   纸纹用一层 SVG `feTurbulence`（`baseFrequency 0.8`，`numOctaves 4`）铺满，
+   `opacity: 0.05`，`mixBlendMode: 'multiply'`；再加一层 `radial-gradient` 暗角。
+   **近似损失**：没有真正的"墨在纸上洇开"的柔边和高光偏移；靠 `filter: contrast(1.02)` 找补。
+4. 运动模糊：上游用 8 采样。这里在 `renderMedia` 开 `motionBlur` 只在**转位与级联**两镜有意义；
+   定格镜必须关掉（否则纸纹会被糊成一片）。也可用 `@remotion/motion-blur` 的 `CameraMotionBlur`
+   包住单个 `<Sequence>`。
+
+骨架（真实可跑，一镜的核心结构）：
+
+```tsx
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion'
+const M = 120, X0 = 480, Y0 = 60
+const io2 = Easing.bezier(0.455, 0.03, 0.515, 0.955)
+const in2 = Easing.in(Easing.poly(2))
+const beat = 15
+export default function Scene() {
+  const f = useCurrentFrame()
+  const p = (t0: number, t1: number) => interpolate(f, [t0, t1], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: io2 })
+  const dots = [[0, 0], [3, 0], [0, 3], [3, 3], [1, 1], [2, 2]]   // 网格坐标
+  return (
+    <AbsoluteFill style={{ background: '#F1E9DA' }}>
+      {dots.map(([cx, cy], i) => {
+        const start = 15 + i * beat                       // 每拍一个
+        const s = interpolate(f, [start, start + 11], [0, 1], { extrapolateRight: 'clamp', easing: in2 })
+        return <div key={i} style={{
+          position: 'absolute', width: M * 2, height: M * 2, borderRadius: '50%',
+          left: X0 + cx * M - M, top: Y0 + cy * M - M,
+          background: '#E03C31', transform: `scale(${s})`,
+        }} />
+      })}
+      <div style={{ position: 'absolute', inset: 0, opacity: 0.05, mixBlendMode: 'multiply',
+        backgroundImage: 'url(/noise.svg)', backgroundSize: '512px 512px' }} />
+    </AbsoluteFill>
+  )
+}
+```
+
+（`p(t0,t1)` 是这一镜唯一的进度函数；上游 `prog`/`lerp` 的语义完全对应。）
+
+## 6. 镜头结构模板
+
+| 秒 | 帧 | 意图 |
+| --- | --- | --- |
+| 0–0.5 | 0–15 | 空网格闪一下，先建立"规则"，让观众看见栅格 |
+| 0.5–2.0 | 15–60 | 三原色形依次落位，每拍一个，落在交点上 |
+| 2.0–6.0 | 60–180 | 转位：整组离散旋转 + 色块拼合，节奏最密 |
+| 6.0–8.0 | 180–240 | 级联翻牌，动作量最大，`in2` 落点砸实 |
+| 8.0–10.0 | 240–300 | 定格 + 竖排标题压印，留白收尾 |
+
+替换内容时保留这五段的**功能**（建立规则 → 元件入场 → 结构变换 → 高潮 → 定格），
+换掉具体的形与字。
+
+## 7. 坑
+
+- 细刻线（1–2px）在 1080p 下会 shimmer：线宽给 `1.5` 且**不要**给它做位移动画。
+- `mixBlendMode: 'multiply'` 在深色底上会把颜色压死 —— 底必须是纸色，不能是透明。
+- 纸纹 SVG 用 `background-image: url(/noise.svg)` 需要文件进 `publicDir`；否则用内联
+  `data:image/svg+xml;utf8,...`（Remotion 的 CSP 允许 `data:`）。
+- 分层多的镜（级联 64 格）会拖慢渲染：格子用纯 `div`，别每格一个 SVG。
+- `Easing.elastic` 一旦混进来，风格立刻变成"弹跳卡通"，不接受"稍微弹一点点"。
+- 竖排标题的 `letterSpacing` 是负值时，最后一个字母的下沿会溢出安全区，容器要留 20px 余量。
+
+## 8. 版权与素材
+
+上游 MIT（`upstream/LICENSE`），可商用可改。三原色、正方形、四分之一圆属通用几何，自由使用。
+**品牌名必须虚构**：不要写"Bauhaus""包豪斯"作为客户品牌，也不要复刻真实厂牌标志；
+标题用虚构词（如 `KONSTRUKTION`、`FORM & MASS`）。上游 `cues.json` 里的音乐是程序合成的，
+DrawAI 侧用 `motion_audio` + `motion_sfx` 另配。