dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/mgstyles/briefs/10-synthwave.md

@@ -0,0 +1,151 @@
+# 10-synthwave · 复古系（80s Synthwave / VHS / Y2K）
+
+> 移植说明书。上游：`demos/10-synthwave/index.html`（82KB，单文件，three.js 全 3D 场景 + 后处理链）、
+> `demos/10-synthwave/cues.json`（100BPM，drop 4.2s）、`prompts/10-synthwave.md`。
+> 上游渲染契约是 `window.renderAt(t)` 画 t 秒那一帧；这里是 Remotion 版：`useCurrentFrame()` 就是 t×fps。
+
+## 1. 一眼认出
+
+- **一张透视网格贯穿全片**：地平线固定，网格线从地平线往镜头冲，滚动靠 `z 偏移取模`，不是整体平移。`floorMat` 里
+  网格线宽 1.5px、远处自动收敛成一条亮带。
+- **日落是分层剪纸**：太阳不是渐变球，是同一个圆按 5–7 条横带切开，切口随高度变宽（`sunMat` 的 `vP.y` 阶梯），
+  色从洋红 `#FF2FB8` 经橙 `#EF933D` 到黄 `#E6C465`。
+- **双辉光**：紧的 4px 高亮 + 宽的 30px 低透明，霓虹字与网格共用同一套（`bloom` pass + `neonLevel`）。
+- **VHS 是整条链**：RGB split（红蓝各偏 1–2px）→ 2px 扫描线（10% 黑）→ 随机 glitch 抽帧（`glitches: [0.37,0.63,1.53,2.47,
+  3.23,6.07,7.77,9.37]`）→ 4:3 圆角遮罩 + 桶形畸变 → 结尾 CRT 关机（`crt_off: [9.833,9.967]`）。
+- **镀铬字带星芒**：多段金属渐变（`#F4F4FF` 高光 → 深紫 → 反光条），bevel 高光 + 4 角星芒 `star4` 扫过（`glint: [4.95,5.55]`）。
+- **节拍就是分镜**：100BPM（0.6s 一拍）。0–1s VHS 雪花 + `PLAY ▶` OSD 落定；1–4.2s 镜头压低贴着网格飞、太阳升起、
+  棕榈一根根掠过；4.2s slam（镀铬标题砸进来 + 车冲出 + 音乐 gap 0.18s）；5.8–6.6s 霓虹手写体点亮并闪烁
+  （`neon_strike` 8 段明暗）；7.2–8.1s 副标浮现；9.667s 定格，9.833s CRT 收成一条线。
+
+## 2. 色板
+
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| 夜空（page） | `#120A2A` | 天顶到地平线的深紫，占 55% 以上 |
+| 天幕过渡（surface） | `#2A1055` | 地平线上方 300px 的紫红过渡带 |
+| 雾（field） | `#3A1A4E` | 山脚与网格交界处的 `HAZE`，压住接缝 |
+| 高光白（text） | `#F4F4FF` | 镀铬字高光段、OSD 白字、扫描环 |
+| 洋红（accent） | `#FF2FB8` | 网格、太阳上半、霓虹手写体 |
+| 青（accent2） | `#8FF9FF` | 太阳下沿的补色反光、玻璃小字、信号点 |
+| 太阳橙/黄 | `#EF933D` / `#E6C465` | 日落的中间带与最亮带 |
+
+`theme.ts`：`page`→`#120A2A`，`text`→`#F4F4FF`，`accent`→`#FF2FB8`，`field`→`#3A1A4E`；青与橙只进 `material.color`。
+
+**禁止色**：绿色（任何色相 90–160 都破坏这套配色）、纯黑 `#000`（最暗是 `#120A2A`）、纯白 `#FFF`（最亮 `#F4F4FF`）；
+不要用蓝紫以外的冷色做大面积背景，会变成科幻而不是 synthwave。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 英文标签用 Michroma，霓虹手写用 Mr Dafoe，中文可用 Douyin Sans；Alimama ShuHeiTi 尚未内置。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+原片三族：`Michroma`（OSD `PLAY ▶`、tagline，字距拉满）、`Mr Dafoe`（霓虹手写 "Midnight"，用 SVG 轮廓描管）、
+`Archivo italic 900 / font-stretch 125%`（V5 中文版的标题字）。中文变体 `V5` 用 `Alimama ShuHeiTi` + `Douyin Sans`。
+
+DrawAI 替代（Windows 自带优先）：
+- 拉丁窄体标签 → `'"Bahnschrift SemiCondensed","Arial Narrow",sans-serif'`，大写，`letterSpacing:'0.22em'`。
+- 镀铬标题 → `'"Arial Black","Impact",sans-serif'`，`letterSpacing:'-0.01em'`；镀铬质感靠渐变填充，不靠字体。
+- 霓虹手写 → `'"Segoe Script","Brush Script MT",cursive'`，`fontStyle:'italic'`；或直接走第 5 节的轮廓描线。
+- 中文 → `'"Microsoft YaHei","PingFang SC",sans-serif'` 700。
+- 损失：Michroma 的方正宽字面与 Bahnschrift 差 8–10%，`0.22em` 的字距会让 1700px 的行宽撑破，改 `0.18em`；
+  Segoe Script 没有 Mr Dafoe 的单线管径，做霓虹管要靠 `-webkit-text-stroke:2px` + 两层 `text-shadow` 补。
+
+## 4. 动效语法
+
+| 动作 | 时间 | 参数 |
+| --- | --- | --- |
+| OSD 落定 | 0.1s | `PLAY ▶` 从雪花里浮出，透明度 0→1 用 6 帧，`y` 从 -14 落到 0（`eOutCubic`） |
+| 太阳升起 | 1.1–3.9s | `sunPx` 从地平线 -60 线性升到 360；同时 `skyMat` 的 `uSun` 跟着亮，**不是单独动太阳** |
+| 镜头压低下潜 | 1.0–2.6s | `camY` 3.2→1.1，`tilt` 4°→-9°，`fov` 42→52（广角让网格更快） |
+| 网格冲刺 | 全片 | `zOff = (t * 0.9) % 1`，每帧 ≥0 且 <1，网格线 z 取 `i - zOff` |
+| 加速段 | 2.6–3.85s | `speed` 0.9→2.6（`eInQuad`），叠 5 个脉冲 `build_pulses`，每个让 `bloom` 抬 0.35–0.55 |
+| 磁带倒带 | 3.867–3.933s | 2 帧：画面纵向撕开 18px + 色偏翻倍 + 亮度压到 0.8，然后 `tape_hold` 静 0.27s |
+| slam | 4.2s | 镀铬标题从 1.9 倍缩到 1.0（`eOutExpo` 7 帧），落地一帧白闪（`#F4F4FF`，alpha 0.9→0） |
+| 星芒扫过 | 4.95–5.55s | `star4` 沿标题对角线扫，5.4s 峰值，长度 620px |
+| 霓虹描管 | 5.8–6.6s | 按 SVG 路径长度 `strokeRange` 0→1 逐段点亮（`eInOutSine`），点亮后 1 帧 `neonLevel` 抖动 |
+| 霓虹闪烁 | 6.6–6.833s | `neon_strike` 8 段 `[1, 0.15, 1, 1, 0.08, 0.5, 0.85, 1]`，每段 1–2 帧 |
+| 结尾推镜 | 7.2–9.6s | `camZ` 从 8.0 缓推到 7.2（`eInOutSine`），9.667s 停 |
+| CRT 关机 | 9.833–9.967s | 纵向压成一条 2px 亮线，再收缩到中心点 |
+
+节奏：`cues.json` 里 100BPM = 0.6s/拍 = 18 帧/拍。所有硬切点落在拍上或拍的后半拍（`0.3s`）。
+
+## 5. Remotion 落地配方
+
+三条路线，按工程量从小到大：
+
+1. **纯 Canvas2D 伪 3D（推荐，可控且确定性最好）**：自己做一点透视投影，网格、太阳、山、棕榈全部画在 2D 上，
+   镀铬字用 `createLinearGradient` 多段色标，VHS 用第二个 canvas 做通道偏移 + 扫描线。无需 three。
+2. **`@remotion/three` + `<ThreeCanvas>`**：工程已带 `three@0.183.2` 与 `@remotion/three`。场景按 `useThree()` 拿
+   renderer，每帧在 `useCurrentFrame()` 变化时手动 `render()` 一次（关掉 `frameloop`），后处理不要用
+   `EffectComposer`（帧时钟不可控），改在 ThreeCanvas 上盖一层 SVG/Canvas 做辉光与 VHS。
+3. **上游 three.js 场景直接搬**：`index.html` 里的 `skyMat/sunMat/floorMat/palms/car` 都是标准 `THREE.ShaderMaterial`，
+   可以整段搬进 `<ThreeCanvas>`，只需把 `renderAt(t)` 换成 `useCurrentFrame()/fps`，并把 `Clock`/`requestAnimationFrame` 全部删掉。
+
+**必须改写的三处**（照抄会出错）：
+- 上游用 `document.getAnimations()` 与 `THREE.Clock`；Remotion 里一切时间来自 `frame / fps`，不许有 `Date.now()`。
+- 上游字体靠 `await document.fonts.load(...)`；Remotion 里用 `delayRender/continueRender` 或
+  `@remotion/fonts` 的 `loadFont()`，否则首帧字宽会是 fallback。
+- 上游后处理是 `EffectComposer` + `UnrealBloomPass`（HUD 也用），Remotion 下不可靠；用
+  `filter:'blur(30px) brightness(1.4)'` 的 `screen` 叠层做宽辉光，`text-shadow` 做紧辉光。
+
+15 帧骨架（Canvas2D 路线，可直接放 `scene-0.tsx`）：
+
+```tsx
+const W = 1920, H = 1080, HZ = 620;            // 地平线 y
+const proj = (x: number, y: number, z: number) => { const k = 900 / z; return [W / 2 + x * k, HZ - y * k] }
+const scene = (t: number, speed: number) => {
+  const zOff = (t * 0.9 * speed) % 1
+  for (let i = 1; i <= 26; i++) {                // 横向网格线：越近越疏
+    const z = i - zOff; if (z <= 0.05) continue
+    const [, y] = proj(0, 0, z)
+    ctx.globalAlpha = Math.min(1, 0.15 + 0.85 / z); ctx.strokeStyle = '#FF2FB8'; ctx.lineWidth = 1.5
+    ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke()
+  }
+  for (let k = -14; k <= 14; k++) {              // 纵向：全部收束到消失点
+    const [x1, y1] = proj(k * 9, 0, 2), [x2, y2] = proj(k * 9, 0, 60)
+    ctx.globalAlpha = 0.55; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke()
+  }
+  ctx.globalAlpha = 1
+}
+```
+
+## 6. 镜头结构模板
+
+10 秒 / 4 段，对应 cues 的真实切点（可直接当 storyboard）：
+
+| 段 | 帧 | 画面 | 硬事件 |
+| --- | --- | --- | --- |
+| 0 | 0–126（0–4.2s） | 夜空 → 雪花落定 → 镜头压低贴网格飞 → 太阳升起 → 棕榈掠过 → 加速脉冲 | 3.867s 磁带倒带 2 帧 |
+| 1 | 126–198（4.2–6.6s） | slam：镀铬标题砸入 + 白闪 + 车冲出画面 → 星芒扫过 → 霓虹手写体逐段点亮 + 闪烁 | 4.2s 音乐 gap 0.18s |
+| 2 | 198–252（6.6–8.4s） | 霓虹字稳态 + 轻微管径呼吸 → tagline 浮现（7.2–8.1s）→ 第二颗星芒（8.4s） | — |
+| 3 | 252–300（8.4–10s） | 收束推镜 → 9.667s 定格 → 9.833s CRT 关机 | 9.967s 全黑 |
+
+**样片建议**：先只做 4.2–6.6s（slam + 星芒 + 霓虹点亮），这一段决定像不像；网格与天际线可以先用纯色占位。
+
+## 7. 坑
+
+1. **网格线会闪（shimmer）**：`z` 连续插值的线宽在缩放时跳变；每条线用整数 `z` 阶梯 + `snap()` 到 1/30s，
+   并给线宽加 `lineWidth = Math.max(1, 1.5 * (12 / z))` 的钳制。
+2. **辉光在浅色底上消失**：`screen` 混合只在深底上有效；纸色底要改用 `lighter` + 提高不透明度，或者干脆给
+   整片套一层 `mixBlendMode:'multiply'` 的深紫底。
+3. **VHS 通道偏移必须整像素**：`filter` 或 `transform: translate(0.7px)` 会产生亚像素插值，扫描线就糊了；
+   用离屏 canvas `drawImage(src, -1, 0)` 或 `translate(1px)`。
+4. **slam 的白闪会吃掉一帧字**：白闪必须画在标题**下面**（先闪后字），并且只持续 1 帧；2 帧以上会被看成丢帧。
+5. **镀铬渐变要有硬停**：多段色标必须 `addColorStop` 相邻两个位置几乎相同（如 0.48/0.52）才有金属硬边；
+   均匀过渡只会像塑料。
+6. **霓虹描管的长度要用实际路径长**：`path.getTotalLength()` 在 SSR/无 DOM 时拿不到；Remotion 里改用
+   预先量好的常量表（上游 `strokeRange` 是写死的数组）。
+7. **结尾 CRT 关机不要用 scale(1,0)**：那会让亮线消失得太快；正确是高度 1080→2（3 帧）→ 宽度 1920→2（4 帧）
+   → 亮度衰减到 0（2 帧）。
+
+## 8. 版权与素材
+
+上游 `demos/10-synthwave/` 是 MIT（见仓库 `LICENSE`），可以照搬数值与配方。但：
+- 字体 `Michroma`、`Mr Dafoe` 与 `Archivo` 已随 DrawAI 内置；只有内置字体不适用时才考虑第 3 节的历史替代栈，
+  并在 `BRIEF.md` 里写明「字体非原版」。
+- 片名 `NEON DRIVE · Midnight`、`OUTRUN 1986`、`SUMMER 1986 · IN HI-FI STEREO` 都是虚构品牌，**可以改，不要用真实商标**
+  （Ferrari、Lamborghini、MTV、VHS 厂牌）。
+- 上游的车型是自建低模（`car()` 里 loft 出来的），不是贴图；照搬几何没问题，但别用真车厂的轮廓做「像某某跑车」的营销物料。
+- 纹理由 shader 生成，没有外部图片依赖；若加纸张/金属纹理，用 CC0 源并记来源。

package/lib/motion/mgstyles/briefs/12-aurora-glass.md

@@ -0,0 +1,147 @@
+# 12-aurora-glass · 弥散渐变 / 玻璃拟态
+
+上游：`demos/12-aurora-glass/main.js`（64.7KB：7 个漂移色斑 + 3 张透视玻璃卡 + 3D 相机）
++ `shaders.js`（27.4KB：`FS_AURORA`/`FS_CARD`/`FS_LENS`/`FS_FINAL` 共 9 个全屏 pass）
++ `cues.json`（881B，80BPM，`drop:6.0`）。1920×1080 / 30fps / 10.000s。
+提示词原文用 `mg_style {action:"read",slug:"12-aurora-glass"}` 取。
+
+## 1. 一眼认出
+
+- **底是近黑深紫**：`PAL.base='#040312'`（`main.js:117-119`），body 是 `#05041a`。亮部全靠色斑加色叠，没有提亮的灰。
+- **7 块无边界的斑**：`BLOBS`（`main.js:136`）每块 `rx 240–560 / ry 170–380 / 强度 0.32–1.15`，沿 `loopBezier` 四锚点闭环走 24–40s。唯一的硬边是玻璃卡轮廓。
+- **玻璃 = 五层叠加**：模糊 30px（`TAPS_FROST = gaussTaps(30*DPR/4)`）、`saturate(170%)`（`shaders.js:179`）、+7% 白、近边 13px 内折射偏移 24px（`rim = 1-smoothstep(0,13,inside)`）、1px 白描边（alpha 0.14→0.7 随朝向）。缺一层就成了贴纸。
+- **节奏 0.75s 一格**：`bpm:80`，最短错峰 `word_letters:0.075`（2–3 帧）。
+- **文字只做 opacity + 8px 上浮**：`riseA(t,t0,dur=0.75)` → `{a:eSine(k), dy:8*(1-eOutCubic(k))}`，无缩放无旋转。
+
+## 2. 色板
+
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| page | `#040312` | 全片底，占 70% 面积 |
+| accent | `#7050FF` | `PAL.violet`，主色斑、字标高光 |
+| accent2 | `#2F46F2` | `PAL.blue`，第二块斑、卡片投影色偏 |
+| accent3 | `#34CFF0` | `PAL.cyan`，冷侧斑、镜头边缘 |
+| accent4 | `#B653F0` | `PAL.magenta`，与 violet 混出洋红带 |
+| deep | `#3320A8` | `PAL.indigo`，玻璃卡内部折射 |
+| muted | `#8C8CFF` | `PAL.periwinkle`，副标、tagline |
+| text | `#FFFFFF` | 只做 1px 描边与 5–10% 白填充 |
+
+`theme.ts`：`page`→PAGE，`text`→INK，`accent`→ACCENT。`surface #171043` / `field #0B0726` 是 base
+提亮 4%/2% 的**推导值**（源码无此 hex），只用于不透明卡面兜底。
+
+**禁止色**：纯灰（光会变雾霾）、硬边渐变、拉满饱和度的大色块、纯白填充。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 中文标题优先 HarmonyOS Sans SC，英文标题用 Sora，界面标签和正文用 Inter。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+原片（`main.js:205`）：`FONT_CN="'HarmonyOS Sans SC'"`（标题 900 / 216px / `track:10`）、
+`FONT_WORD="'Sora'"`（`Aurora` 178px）、`FONT_UI="'Inter', 'HarmonyOS Sans SC'"`。字体由
+`/assets/fonts/fonts.css` 指向；DrawAI 已内置这三族字体。
+
+- 中文标题 `'"Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC",sans-serif'`，`900`，`letterSpacing:'0.046em'`（=216px 下的 10px）。
+- 拉丁字标 `'"Segoe UI Variable Display","Segoe UI",sans-serif'`，`200`，`letterSpacing:'0.32em'`。
+- 小标签 `'"Consolas","JetBrains Mono",monospace'`。
+
+**损失**：① YaHei 只有 400/700，900 会合成或回退成 Bold，216px 的「玻璃拟态」薄一档；用
+`-webkit-text-stroke:0.5px currentColor` 补（≤32px 禁用，会糊）。② Sora 是宽字面几何体，Segoe 更窄，
+`Aurora` 全小写宽字距会失衡，靠 0.32em 补。③ 圆润中宫没了 —— 一句只写 4–6 字。
+
+字排：标题锁 `base:580`、`w:900`、216px 单行；副标 54px `track:6`；英文标 32px 大写 `0.28em`。
+
+## 4. 动效语法
+
+- 节拍：80BPM = 0.75s = **22.5 帧/拍**，1 小节 90 帧。`cues.json` 注明 bar 0 从 `drop`（6.0s）
+  起算，前 6 秒是钩子段，不按小节走。
+- 缓动：`eSine(t)=-(cos(πt)-1)/2`（主）、`eOutQuint`（卡入场）、`eOutCubic`（8px 位移）、
+  `seg`/`hermite`（相机）。**禁用** `spring`/`elastic`/`back` —— 过冲会变成弹跳 UI。
+- 签名动作：
+  1. **卡片入场**（`cardA_in:-0.8`→1.1s）：1.9s `eOutQuint`，`y` 抬 70px、`z` 抬 560（等价
+     scale 0.86→1）；同时 `tilt = 20*Math.exp(-3.2*tau)*Math.cos(3.6*tau)`（`cardState`，
+     `main.js:464`）—— 全片唯一过冲，只作用在角度上。
+  2. **色斑漂移**：每块走自己的闭环，10 秒只走完 1/3，没有"进入/离开"这一帧。
+  3. **drop 6.0**：`uGain` 抬亮 + `uRipple` 径向光 + 三卡沿 `drift` 炸散（A 是 `[920,-30,-560]`）。
+  4. **字标逐字**（`word:6.9`）：2.25 帧错峰，只做 opacity+8px；`wordScale=1+0.022*eSine` 是唯一缩放。
+  5. **wave 9.0**：`FS_LENS` 的折射环把穿过的地面弯 ~2.5px，不是发光圆。
+- 组成：卡 A 660×470 r42、B 400×200 r38、C 440×250 r40；边距 ≥120px；图层自下而上 = 色斑 →
+  卡片（投影 `uSH`）→ 卡内容 → 镜头 → bloom → grain → vignette。
+
+## 5. Remotion 落地配方
+
+1. **9 个 pass 的 GLSL 不照抄**。每帧 8 次 render-target 切换（`FS_AURORA`→`FS_DOWN`→`FS_BLUR`×2
+   →`FS_CARD`→`FS_LENS`→`FS_FINAL`）。`@remotion/three` 理论上可 1:1，但 300 帧 GPU 渲染不可控 ——
+   走 DOM/CSS。
+2. `requestAnimationFrame` + 累积 `t` → `useCurrentFrame()`；`uFrame` 的 grain 种子 →
+   `random('grain-'+frame)`。
+3. `document.fonts.load` 预热（`main.js:217-226`）→ 系统栈免预热。
+
+近似与损失：
+- **色斑**：7 个 `div` + `blur(120px)` + `mixBlendMode:'screen'`。上游是解析高斯 + `uWarp` 噪声扭曲；
+  CSS 版斑重叠处会发灰，`opacity .45–.6` 压。
+- **玻璃卡**：`backdropFilter:'blur(30px) saturate(170%)'` + `rgba(255,255,255,.07)` +
+  `inset 0 0 0 1.2px rgba(255,255,255,.30)`。损失：① 没有近边折射（那层变形才是"厚度"）；
+  ② 不随 `tilt` 变；③ 嵌套 `backdrop-filter` 只取最近一层。
+- **调色**：bloom .22 用 `screen` 径向渐变；vignette .18 用
+  `radial-gradient(ellipse at 50% 52%, transparent 58%, rgba(4,3,18,.6))`；grain .14 用内联
+  `feTurbulence` + `opacity .06`，**每帧换 seed**。dither 做不了，8bit 下大 blur 必现 banding。
+- **运动模糊**：只有 `glide`（5.95–6.9）要，用 `CameraMotionBlur` 包那段；其余 <2px/帧。
+
+```tsx
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from 'remotion'
+const BLOBS = [
+  { c: '#7050FF', x: 0.42, y: 0.55, r: 520, ax: 120, ay: 60, p: 0.0 },
+  { c: '#2F46F2', x: 0.66, y: 0.40, r: 420, ax: 90, ay: 80, p: 1.7 },
+  { c: '#B653F0', x: 0.30, y: 0.36, r: 300, ax: 70, ay: 50, p: 3.1 },
+]  // 上游是 7 块 + loopBezier 24–40s 闭环，这里用两个频率的 sin 近似同一条路径
+const eOutQuint = Easing.out(Easing.poly(5))
+export default function AuroraGlass() {
+  const f = useCurrentFrame(), { fps } = useVideoConfig(), t = f / fps
+  // cardA_in=-0.8，1.9s 到位；y 抬 70px、z 抬 560 在屏幕空间等价于 scale 0.86→1
+  const e = interpolate(t, [-0.8, 1.1], [0, 1], { easing: eOutQuint, extrapolateLeft: 'clamp', extrapolateRight: 'clamp' })
+  return (
+    <AbsoluteFill style={{ background: '#040312', overflow: 'hidden' }}>
+      {BLOBS.map((b, i) => {
+        const cx = (b.x + (b.ax / 1920) * Math.sin(t * 0.42 + b.p)) * 1920
+        const cy = (b.y + (b.ay / 1080) * Math.cos(t * 0.31 + b.p)) * 1080
+        return <div key={i} style={{ position: 'absolute', left: cx - b.r, top: cy - b.r,
+          width: b.r * 2, height: b.r * 2, borderRadius: '50%', background: b.c,
+          filter: 'blur(120px)', opacity: 0.55, mixBlendMode: 'screen' }} />
+      })}
+      <div style={{ position: 'absolute', left: 760, top: 280 + 70 * (1 - e), width: 660, height: 470,
+        borderRadius: 42, transform: `scale(${0.86 + 0.14 * e})`, background: 'rgba(255,255,255,0.07)',
+        backdropFilter: 'blur(30px) saturate(170%)',
+        boxShadow: 'inset 0 0 0 1.2px rgba(255,255,255,0.30), 0 60px 120px rgba(4,3,18,0.55)' }} />
+      <AbsoluteFill style={{ background: 'radial-gradient(ellipse at 50% 52%, transparent 58%, rgba(4,3,18,0.6) 100%)' }} />
+    </AbsoluteFill>
+  )
+}
+```
+
+## 6. 镜头结构模板
+
+| 秒 | 帧 | 意图 |
+| --- | --- | --- |
+| 0–0.75 | 0–23 | 暗场起：只亮 2 块斑，卡 A 已在浮入路上 |
+| 0.75–3.0 | 23–90 | 三卡到齐（`cardB_in:-0.3`、`cardC_in:0.05`），建立"玻璃悬在光里" |
+| 3.0–6.0 | 90–180 | UI 演示：chips 3.0、toggle 3.75、slider 3.95/4.85、镜头进画 5.95 |
+| 6.0–7.5 | 180–225 | drop：光爆 + 卡片炸散（`part 6.72/6.95`），亮度峰值 |
+| 7.5–10.0 | 225–300 | 字标逐字 → tagline 8.5 → 定格，只留色斑在动 |
+
+保留五段的**功能**（建光场 → 元件入场 → 交互演示 → 光爆 → 字标收尾），换掉内容。
+
+## 7. 坑
+
+- `backdrop-filter` 对 `blur(>40px)` 在 headless Chromium 会降采样成块状，30px 是安全上沿。
+- 7 层 4000px 宽的 `blur(120px)` 每帧重新栅格化，慢 3–5× 且吃 GPU 内存。
+- `mixBlendMode:'screen'` 需要实底，`AbsoluteFill` 透明会和视频背景混出白边。
+- 1px `inset` 描边在非整数 DPR 下会消失或变 2px，写 `1.2px`。
+- 逐字错峰用浮点秒（`0.075`）算，取整成 2 帧会让最后一个字母晚 1 帧。
+
+## 8. 版权与素材
+
+上游 MIT（`upstream/LICENSE`）。弥散色斑、玻璃卡、大圆角属通用视觉语言。`HarmonyOS Sans SC` /
+`Sora` / `Inter` 是厂商字体，**不能随片分发**。「Aurora / 极光」是虚构产品名，客户品牌必须替换；
+`UI.reply` 的四句日程文案原创可用。音乐用 `motion_audio` + `motion_sfx` 另配（80BPM，
+ambient pad + 玻璃轻击）。

package/lib/motion/mgstyles/briefs/18-hanazi.md

@@ -0,0 +1,140 @@
+# 18-hanazi · 综艺花字（竖屏）
+
+上游：`demos/18-hanazi/index.html`（51.4KB，**逻辑全内联**：CSS + 花字组件 `HZ` + 四个分镜的
+`renderAt`）+ `cues.json`（1116B，120BPM，`drop:6.0`、`freeze:7.5`）。1080×1920 / 30fps / 10.000s。
+`/assets/white_dof.jpg` 等 15 个素材**不在仓库**，只有引用路径。
+提示词原文用 `mg_style {action:"read",slug:"18-hanazi"}` 取。
+
+## 1. 一眼认出
+
+- **每个字三层描边**：标题的 `HZ` 参数 `size:172, white:13, outer:12, ext:16`（`index.html:238`）——
+  相对字高 **7.6% / 7.0% / 9.3%**，三层几乎等宽。只有一层描边的字就不是这个风格。
+- **字永远歪着**：每字 `rot [-7,4,-3,6,-5]`、`y +[6,-16,10,-12,4]`（`index.html:237-240`）。全片没有正着放的花字。
+- **入场是弹簧不是缓动**：`spring(t,.517,22)`，源码注释写明 "peak 1.15 at frame 5, ~1.01 at frame 8"。
+- **竖屏一行 5 字是极限**：`x=[196,368,540,712,884]` 等距 172，左右各留 196。第 6 字必胀出安全区。
+- **装饰是手绘几何**：四角星 `sparkleD`、爆炸框 `burstD`（2n 顶点交替内外半径抖动）、放射线 `focusD`、汗滴 `DROP_D`；没有 emoji、没有渐变图标。
+
+## 2. 色板
+
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| text | `#FFFFFF` | 白描边、说明字 |
+| ink | `#1E2A78` | 主描边、标签字（25 次，最高频） |
+| shade | `#1A1030` | 最外描边、硬阴影、警条底（15 次） |
+| accent | `#FFE14D` | 亮黄强调、斜纹（15 次） |
+| accent2 | `#FF3D7F` | 玫红爆炸框、外描边（8 次） |
+| deep | `#0E1440` | 深蓝底、电池壳（8 次） |
+| cool | `#2CCBF2` | 天蓝，糖纸 wipe 底色 |
+| warn | `#FF2E4D` | 警告条内条、「爆表」 |
+| page | `#1B1B22` | 舞台底（照片没盖满时露的缝） |
+
+另有 `#FF9A1F`/`#A3124F`（暖渐变与挤出）、`#7BE35A`、`#8EE8FF`（汗滴）、`#B04CFF`、`#A9C4E0`。
+**禁止色**：莫兰迪/灰粉、金属渐变、纯黑 `#000`（阴影一律 `#1A1030`）、任何没描边的字。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 主花字用 Resource Han Rounded，副标用 Douyin Sans，手写吐槽用 LXGW Marker Gothic；英文可用 Luckiest Guy 或 ZCOOL KuaiLe。Alimama ShuHeiTi 尚未内置。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+原片 6 种字体（`/assets/fonts/fonts.css`，上游仓库不带字体文件，DrawAI 已内置其中可用的字体）：`'Resource Han Rounded'` 900（标题）、
+`'Douyin Sans'` 700（副标）、`'Alimama ShuHeiTi'` 700（震惊）、`'LXGW Marker Gothic'`（手写吐槽）、
+`'ZCOOL KuaiLe'`、`'Luckiest Guy'`（EP.07）。
+
+- 圆胖体 `'"YouYuan","Microsoft YaHei UI","Microsoft YaHei",sans-serif'`。幼圆是 Win10/11 唯一自带圆体，
+  只有 400 —— **加粗靠描边**：`strokeWidth = 2*(white+outer) = 50px` 的圆头描边把字面撑胖，等价 700–800。
+- 副标 `'"Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC",sans-serif'` 700；手写吐槽
+  `'"KaiTi","Microsoft YaHei",sans-serif'` + `skewX(-7deg)`（上游 `quiet` 的 `skew:-7`）；
+  英文 `'"Arial Black","Impact",sans-serif'`。
+
+**损失**：① 幼圆没 900，中宫比 Resource Han Rounded 瘦，靠描边补仍偏"幼"；② 楷体太书法，只有 ≤66px
+的小字能骗过去；③ 抖音体/Alimama 是平台授权，替代后「震惊！！」的窄字面没了，250px 会显宽，缩到 236px。
+
+字号：主花字 172px（屏宽 16%）；爆炸大字 250px（23%）；副标 92px；标签 40–54px，**最小 40px**。
+字距：**不用 `letter-spacing`** —— 每字要独立旋转，必须逐字绝对定位，`x = 起点 + i × 字号`。
+安全区：左右 96px；主花字底边 ≤1560（给抖音 UI 留 360）；顶部 ≥240。标题基线 1515 + 上浮 16 = 1531。
+
+## 4. 动效语法
+
+- 节拍：120BPM = 0.5s = **15 帧/拍**，20 拍。事件几乎都落在半拍（0.267s = 8 帧）上。
+- 缓动：`spring(t,z=.517,w=22)` 主曲线；`E.outCubic` 退场、`E.outExpo` punch-in、`E.inCubic` 下沉。
+  **禁用**线性 —— 全片没有匀速运动。
+- 签名动作：
+  1. **逐字弹入**（`title` 0.2 起，错峰 `0.0667s` = **2 帧**）：`scale 0→1.15→1`、`y` 从 -90 落回、
+     `rot` ±16° 回正，8 帧到位；0.22s 后叠 `1.8° wiggle + 3px bob`，`wf=1.15Hz`（`charXf:97`）。
+  2. **quarter-beat 蹦跳**（`title_beats [1.0,1.5,2.0]`）：每字再错 2 帧，`hy=40*4k(1-k)`，squash `+0.11/-0.07`。
+  3. **pop-out**（0.17s = 5 帧）：先 `1.12` 再 `inCubic` 到 0，换镜前清场（`popOut`）。
+  4. **拍上去**（`punch2:3.0` `kick(...,10,10,13)`、`drop:6.0` `kick(...,26,7,11)`）：整镜 translate ±26px，
+     `exp(-7u)` 衰减 —— 位移不是缩放。
+  5. **糖纸 wipe**（`wipe:4.0`）：0.46s = 14 帧，128px `pattern` 斜条从 `x=2400` 横移到 `-2400`（`inOutSine`）并 `rotate(-20°)`。
+- 组成：照片满屏（Ken Burns 1.0→1.08）；花字锚在 `y 1230–1720`；装饰在四周 120–260px 环带；图层
+  自下而上 = 照片 → 暗角/日光 → 花字（ext→outer→white→fill→gloss）→ 装饰 → flash → grain。
+
+## 5. Remotion 落地配方
+
+1. `renderAt(t)` 里逐帧 `setAttribute`/`style.display` → 每帧重算 style，`show()/disp()` → `return null`。
+2. 自写 `spring()` → `spring({frame, fps, config:{damping:22.75, stiffness:484, mass:1}})`：zeta .517 ×
+   omega 22 等价 `damping=2ζω=22.75`、`stiffness=ω²=484`，第 5 帧峰值 1.15 与原片一致。
+3. `Math.random()` 的爆炸框抖动 → `random('burst-'+seed)`；`hand(t,seed)` 是确定性值噪（`vn`/`h1`），
+   可原样搬，但 `t` 必须是 `frame/fps`。
+4. CSS `filter:url(#soft)`（feGaussianBlur 8px）→ `drop-shadow(0 6px 18px rgba(26,16,48,.45))`。
+   **损失**：SVG 模糊是各向同性"墨水晕"，drop-shadow 只有偏移，边缘更干净也更数字。
+5. 五层叠字必须用 SVG：`-webkit-text-stroke` 只能叠一层，且不吃 `paintOrder`。
+6. Ken Burns 用 `<Img src={staticFile(...)}>` + `scale(1+0.08p)`。**素材缺失时**用 `linear-gradient` 色块 +
+   `feTurbulence` 顶替，但"综艺截图感"是内容的一半 —— 这个风格应该让用户提供素材。
+
+```tsx
+import { useCurrentFrame, useVideoConfig, spring } from 'remotion'
+const FONT = '"Resource Han Rounded","Noto Sans SC",sans-serif'
+const OUTER = '#FF3D7F', EXT = '#A3124F'
+export const HanaziChar = ({ ch, x, y, rot, t0, size }:
+  { ch: string; x: number; y: number; rot: number; t0: number; size: number }) => {
+  const f = useCurrentFrame(), { fps } = useVideoConfig(), u = f - t0 * fps
+  if (u < 0) return null
+  const pop = spring({ frame: u, fps, config: { damping: 22.75, stiffness: 484, mass: 1 } })  // ζ.517 ω22
+  const drop = spring({ frame: u, fps, config: { damping: 22, stiffness: 400, mass: 1 } })    // ζ.55  ω20
+  const turn = spring({ frame: u, fps, config: { damping: 18, stiffness: 324, mass: 1 } })    // ζ.45  ω18
+  const hold = Math.min(1, Math.max(0, (u / fps - 0.22) / 0.35))
+  const r = rot * (1 - turn) + hold * 2.2 * Math.sin(2 * Math.PI * 1.15 * (f / fps))
+  const s = pop * (1 + hold * 0.012 * Math.sin(2 * Math.PI * 2.3 * (f / fps)))
+  const t = { fontFamily: FONT, fontWeight: 700, fontSize: size, textAnchor: 'middle' as const,
+    dominantBaseline: 'central' as const, strokeLinejoin: 'round' as const }
+  return (
+    <g transform={`translate(${x} ${y - 90 * (1 - drop)}) rotate(${r}) scale(${s})`}>
+      <text {...t} y={16} fill={EXT} stroke={EXT} strokeWidth={50}>{ch}</text>
+      <text {...t} y={8} fill={EXT} stroke={EXT} strokeWidth={50}>{ch}</text>
+      <text {...t} fill={OUTER} stroke={OUTER} strokeWidth={50}>{ch}</text>
+      <text {...t} fill="#fff" stroke="#fff" strokeWidth={26}>{ch}</text>
+      <text {...t} fill="url(#gz)">{ch}</text>
+    </g>
+  )
+}
+```
+
+运动模糊：上游 `window.DEMO.motionBlur={samples:1, shutter:0.5}`（`index.html:40`）只开 1 采样。这里用
+`CameraMotionBlur` 只包 punch/drop 两镜（±26px 位移要糊）；花字本体不包，描边会糊成双层边。
+
+## 6. 镜头结构模板
+
+| 秒 | 帧 | 意图 |
+| --- | --- | --- |
+| 0–2.5 | 0–75 | 逆光起手 + 标题逐字（0.2 起，5 字 10 帧铺完），1.0/1.5/2.0 三次蹦跳 |
+| 2.5–4.0 | 75–120 | 划痕转场 `scratch` + 三个问号 + 手写吐槽「空气突然安静」逐行扫出 |
+| 4.0–7.5 | 120–225 | 糖纸 wipe 进二段：嘉宾条 4.2、警告条 4.9、**drop 6.0「震惊！！」**、副标 6.6、检测表 7.0 |
+| 7.5–8.5 | 225–255 | freeze：画面拍成白边卡（`freeze_hold` 0.267s），只留 `zoom 1.03` 呼吸 |
+| 8.5–10.0 | 255–300 | 爆炸框 + 「绝绝子」逐字（8.1/8.167/8.233）+ stamp 8.5 + EP.07 收尾 |
+
+## 7. 坑
+
+- 172px × 5 字 = 860px，两层描边外扩后 ~886px，左右只剩 97px。换 6 字先量再排。
+- 五层 `<text>` 用同一个 `dominantBaseline`，别混用 `dy` 和 `y` —— 两套度量差 0.02–0.05em。
+- 三层描边都要 `strokeLinejoin:'round'`，否则「？」的尖角会炸开。
+- 「冻结半帧」用 `<Freeze frame={225}>` 包画面、外层单独做 zoom，不要在场景里插值时间。
+- grain 层必须 `inset:0` + `pointerEvents:'none'`；尺寸小于画布时 `overlay` 会留暗带。
+
+## 8. 版权与素材
+
+上游 MIT（`upstream/LICENSE`）。贴纸照片标称 CC0 但**不在仓库**，需自备。「喵呜日记」是虚构节目名，
+`EP.07` 可用。`Resource Han Rounded`/`Douyin Sans`/`Alimama ShuHeiTi`/`LXGW Marker Gothic`/
+`ZCOOL KuaiLe`/`Luckiest Guy` 各有授权，**不能随片分发**。四角星、爆炸框、汗滴是可自由重画的通用
+图形。音效用 `motion_sfx`（120BPM，boing + 玻璃叮 + 拍击）。

package/lib/motion/mgstyles/briefs/19-paperclip.md

@@ -0,0 +1,156 @@
+# 19-paperclip · 粗描边贴纸人科普 MG
+
+上游：`demos/19-paperclip/index.html`（69.8KB，**逻辑全内联**：一块 2400×5900 的世界 + 相机 + 周期表
++ 地图）+ `cues.json`（3076B：`world {w:2400,h:5900}`、16 个相机关键帧、`ev` 40+ 事件、`chapters`）
++ `assets/stickers/meta.json`（8 张 PNG 的尺寸，**本体不在仓库**）+ `assets/countries-110m.json`（TopoJSON）。
+1920×1080 / 30fps / 10.000s，120BPM。提示词原文用 `mg_style {action:"read",slug:"19-paperclip"}` 取。
+
+## 1. 一眼认出
+
+- **世界是一块竖长的手机屏**：`2400×5900`（`#world`），`border-radius:210`，底 `#E9EEF2` 铺 48px 网点（`#C5CFD8` 2.3px）；外套 `#0E141A` 机身 + 46px 白圈（`#bezel` 的 `box-shadow 0 0 0 46px #F7F9FB`）。
+- **没有切镜，只有相机**：`cues.json` 的 `cam` 是 16 个 `{t,x,y,z}`，`z` 从 1.06 压到 0.2；每段标了 `move:"drift"|"fly"|"track"|"pullA"|"pullB"|"hold"`。10 秒是同一张画布上的六次运镜。
+- **一切素材都是白描边贴纸**：`phone` 435×888、`battery` 448×331（`meta.json`），白边约长边的 2.3%（10px/435）；SVG 图标是显式的 `stroke="#F7F9FB" stroke-width="26"` + `paint-order:"stroke"`（`magnetSVG`，26/240 ≈ 11%）。
+- **章节头是同一个模子**：20×20 橙色方块 + `02 对照元素周期表`（30px 700）+ `PERIODIC TABLE`（Inter 20px / `.18em` / `#8C9AA8`）。全片 4 个章节头一字不差。
+- **数字是主角**：计数器 236px Inter 900 `-0.045em`（`cNum`），结尾 400px（`eNum`）；`tnum` 保证滚动不抖。
+
+## 2. 色板
+
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| text | `#25313D` | 所有中文正文与标题（35 次，最高频） |
+| accent | `#FF5A36` | 唯一强调色：章节小方块、稀土、结尾大数字（29 次） |
+| page | `#E9EEF2` | 手机屏内的纸色（第二高频底色） |
+| surface | `#F7F9FB` | 卡片、tile、白描边、机身白圈（22 次） |
+| muted | `#8C9AA8` | 英文小标、`/118`、单位（17 次） |
+| sub | `#5E6D7B` | 注释、产地副名（4 次） |
+| line | `#CDD6DE` | tile 内描边、未点亮格 |
+| dot | `#C5CFD8` | 48px 网点 |
+| stage | `#1D2731` | 屏外底，径向渐变到 `#27333F`/`#161E26` |
+| bezel | `#0E141A` | 机身 |
+
+**禁止色**：除 `#FF5A36` 之外的第二个彩色（绿/黄/紫一出现就散）、任何渐变填充（只有最外层底是
+径向渐变）、纯黑 `#000`（墨是 `#25313D`）、任何 8px 以上的柔光。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 中文用 Noto Sans SC，英文和数字用 Inter；Alibaba PuHuiTi 尚未内置，必要时在取得后再替换。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+原片（`index.html:19-20`）：`.zh{font-family:'Alibaba PuHuiTi'}`、`.in{font-family:'Inter';
+font-feature-settings:'tnum' 1,'case' 1}`。两个都不是系统字体。
+
+- 中文 `'"Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC",sans-serif'`，标题 700–900。
+  **损失**：Alibaba PuHuiTi 字面更紧凑、900 更硬，YaHei 会松一圈，124px 的两行标题要多留 30px 宽。
+- 拉丁/数字 `'"Segoe UI Black","Segoe UI","Inter",sans-serif'`（Win10 自带 Segoe UI Black 顶 900），
+  并保留 `fontFeatureSettings:'tnum','case'`。**损失**：Inter 的开源几何形在 Segoe 上偏圆，236px 的
+  `70` 会瘦一点，把 `letterSpacing` 收到 `-0.05em` 补。
+- 等宽（`.iso` 编号、`TWN 0K8F2A`）`'"Consolas","JetBrains Mono",monospace'`。
+
+字号阶梯（世界坐标，随相机缩放）：标题 124px/1.15；章节头 30px + 20px 英文；栏目名 34px；大数字
+236px；分类数字 64px/72px；标签 34–50px；正文 28px/1.5。屏内最小 24px（`z=0.84` 时等效 20px）。
+
+网格：`TX=196, TP=112, TS=104, TY=2620, FG=36`（`tXY`）—— 18 列 × 112 = 1904px，
+`196+17*112=2100 < 2400`；镧系/锕系在第 7 行下断开 36px。所有章节间距是 112 的整数倍。
+
+## 4. 动效语法
+
+- 节拍：120BPM = 0.5s = **15 帧/拍**；但运镜不按拍走，按 `chapters [0, 2.7, 4.35, 5.62, 7.0]` 分五段。
+- 缓动：`eFly = bez(.62,0,.22,1)`、`ePull = bez(.5,0,.08,1)`、`pullA = bez(.3,0,.1,1)`、
+  `pullB = bez(.42,0,.22,1)`、`hold = u*u*(3-u)/2`（`EASE`，`index.html:79`）。z 在**对数空间**插值：
+  `Math.exp(lerp(log(a.z), log(b.z), e))`。**禁用** `spring`/`back`：没有任何元素会弹过头。
+- 签名动作：
+  1. **相机 fly**（1.25–1.9、3.32–3.34、6.1–7.0）：0.6–1.0s，`eFly`，位移 1200–1600px 世界坐标；同时
+     `r` 从 0 微调到 -3.5°。这是全片的"转场"。
+  2. **贴纸 slap**（`slap(t,land,dur=.2,amp=.3)`）：0.2s 内 `s:1.3→1`、`r:6°→0`、`lift:1→0`，
+     落地后 `wob(t-land,4.5,10)` 衰减抖动 —— 所有贴纸/角标落地都走这一个函数。
+  3. **badge 剥离飞行**（`badge_peel 2.74` 起，`k` 错峰 0.012s）：62→104px 的方块沿弧线飞到周期表
+     对应格子，落地序列 `badge_land` 10 个点（3.3→3.5，每 0.0222s 一个）驱动计数器 0→70。
+  4. **路径描边生长**（`route_dur:.4`）：`stroke-dasharray:'1 1'` + `pathLength:1`，`stroke-dashoffset`
+     从 1 到 0，`oC` 缓动；同一招用于年代轴、引线、地图国界。
+  5. **计数器滚动**：数字直接 `textContent = lit`，但每次 +1 时 `scale(1.16)` 弹一下再 `oC` 收回；
+     70 那一刻叠 `.06` 的 `wob(t,4,9)`。
+- 组成：世界 2400 宽；章节头永远在 `x=196` 或 `x=300`；所有贴纸的白边 10px；投影
+  `drop-shadow(0 ${6+34*lift}px ${10+34*lift}px rgba(22,34,46,${.26-.08*lift}))`。
+
+## 5. Remotion 落地配方
+
+1. `el()` 建 DOM + 逐帧改 `style` → React 组件；`fetch(ROOT+'cues.json')` → `import cues from './cues.json'`，
+   `fetch(ROOT+'assets/stickers/...')` → `staticFile()`。
+2. **相机数学可以 1:1 搬**（`projC` / `cam` / `worldM`，`index.html:76-96` 是纯函数）：
+   `[a,b] = rot((wx-C.x)*C.z, (wy-C.y)*C.z, C.r)`，屏幕点 = `(960+a, 540+b)`。CSS 等价写法：
+   `transform: translate(960px,540px) rotate(${C.r}deg) scale(${C.z}) translate(${-C.x}px,${-C.y}px)`
+   （`transformOrigin:'0 0'`，顺序不能换）。
+3. **`d3` + `topojson` 不可用**。`countries-110m.json` 已在仓库：自己解 TopoJSON —— `arcs` 是增量
+   编码，先按 `transform {scale,translate}` 还原成 `[x,y]` 数组，再按几何的 `arcs` 索引拼接
+   （负数表示反向并翻转）。投影退化成等距圆柱（`x=MB0+(lon+180)/360*w`）代替
+   `d3.geoNaturalEarth1`。**损失**：高纬大陆会被横向拉宽，南极洲本来就被跳过。
+4. `filter:#mbf`（4 个 `feDisplacementMap` 的 4-tap 运动模糊）+ `#pblur`（落地时 `stdDeviation` 0→12）
+   → `@remotion/motion-blur` 的 `CameraMotionBlur` 只包 fly/pull 两段；手机落地那一镜用
+   `blur(${12*(1-p)}px)` 的普通 CSS blur 近似纵向残影。
+5. **贴纸素材缺失时自造**：SVG `<filter>` 里 `feMorphology operator="dilate" radius="5"` + `feFlood
+   floodColor="#F7F9FB"` + `feComposite operator="over"` 得到 10px 白边（radius 5 = 两侧各 5px），
+   再加 `feDropShadow dx=0 dy=10 stdDeviation=14`。比 `filter: drop-shadow()` 叠 8 层更硬、更像真的
+   描边。没有照片就用**扁平色块 + 网点**自造图标（`radial-gradient` 48px 网格 + `#CDD6DE` 内描边），
+   代价是失去"实物照片 × 精密图表"的对照感 —— 这是这个风格的一半，能拿素材就拿。
+
+```tsx
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion'
+import cues from './cues.json'
+const CAM = cues.cam
+const cam = (t: number) => {                       // 上游 cam()：分段 + 对数 z 插值
+  const i = Math.max(0, CAM.findLastIndex((c) => c.t <= t))
+  const a = CAM[i], b = CAM[Math.min(i + 1, CAM.length - 1)]
+  const u = Math.min(1, Math.max(0, (t - a.t) / (b.t - a.t || 1)))
+  const e = u * u * (3 - 2 * u)                    // 各段真实曲线见 EASE[move]
+  return { x: a.x + (b.x - a.x) * e, y: a.y + (b.y - a.y) * e,
+    z: Math.exp(Math.log(a.z) + (Math.log(b.z) - Math.log(a.z)) * e), r: (b.r ?? 0) * e }
+}
+export default function PaperclipWorld() {
+  const f = useCurrentFrame(), { fps } = useVideoConfig()
+  const C = cam(f / fps)
+  return (
+    <AbsoluteFill style={{ background: 'radial-gradient(120% 90% at 35% 50%,#27333F 0%,#1D2731 55%,#161E26 100%)', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', left: 0, top: 0, transformOrigin: '0 0',
+        transform: `translate(960px,540px) rotate(${C.r}deg) scale(${C.z}) translate(${-C.x}px,${-C.y}px)` }}>
+        <div style={{ position: 'relative', width: 2400, height: 5900, borderRadius: 210, overflow: 'hidden',
+          background: '#E9EEF2', backgroundImage: 'radial-gradient(circle,#C5CFD8 2.3px,transparent 2.9px)',
+          backgroundSize: '48px 48px' }}>
+          {/* 章节内容放在世界坐标里，位置不随帧变 */}
+        </div>
+      </div>
+    </AbsoluteFill>
+  )
+}
+```
+
+## 6. 镜头结构模板
+
+| 秒 | 帧 | 意图 |
+| --- | --- | --- |
+| 0–1.25 | 0–38 | 手机落屏（`phone_land 0.16`，`slap` 落地）+ 两行标题 mask 上浮 + 英文小标 + 细线 |
+| 1.25–2.8 | 38–84 | 向下飞 1220px，手机缩到 1 号位，5 个部件依次打标签（`parts 1.62–2.02`） |
+| 2.86–4.35 | 86–131 | 周期表铺开（`table_in`）+ 计数器（`counter_in 3.24`）+ 角标剥离落格（3.3–3.5） |
+| 4.42–5.62 | 133–169 | 按类别的条形/芯片起飞（`chips 4.48–5.2`），地球轴 + `/118` 出现 |
+| 5.66–7.0 | 170–210 | 世界地图：4 张产地贴纸 + 4 条弧线路径生长 + 深圳 pin（6.45） |
+| 7.0–8.14 | 210–244 | 拉远（`pullA` z 0.42 → `pullB` z 0.2），屏内 `70` 撕下变成贴纸飞向结尾 |
+| 8.14–10.0 | 244–300 | slam 落定 + 斜线 `/118` + 标题 62px + 说明 28px + 来源脚注 |
+
+## 7. 坑
+
+- 2400×5900 的 DOM 世界 ≈ 1416 万 px²，Chromium 会切 tile 渲染，`overflow:hidden` + `borderRadius`
+  的角上会出接缝；把圆角放在内层、外层不裁。
+- 相机 `scale` 会把所有 `stroke-width`、`boxShadow`、`fontSize` 一起缩放 —— 想要"恒定的 10px 白边"
+  就得在贴纸上写世界单位，不要写屏幕单位。
+- `filter` 嵌套在 `transform: scale()` 的层里会让文字发虚，文字层别和贴纸共用 filter 容器。
+- TopoJSON 的 `arcs` 忘了 `transform.scale/translate` 会得到 0–1 的坐标，整张地图缩成一个点。
+- 大数字用 fallback 字体时 `tnum` 不一定生效（Segoe UI 支持，很多中文黑体不支持），数字容器给
+  固定 `width` + `fontVariantNumeric:'tabular-nums'` 双保险。
+- `findLastIndex` 需要 Node 18+/ES2023 —— Remotion 的打包目标如果是 ES2020，换成手写 `for` 循环。
+
+## 8. 版权与素材
+
+上游 MIT（`upstream/LICENSE`）。`countries-110m.json` 来自 world-atlas / Natural Earth（public domain）。
+`Alibaba PuHuiTi` / `Inter` 是厂商字体，**不能随片分发**。贴纸 PNG 不在仓库，需自备或按第 5 节自造；
+若用图库照片，选 CC0/Pexels 并裁成白边贴纸。品牌 `NEXA / N9 PRO` 是虚构的，客户品牌必须替换；
+周期表元素数据是公共事实。音效用 `motion_sfx`（120BPM，纸张拍击 + 低频 whoosh + 单音 beep）。