dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/mgstyles/briefs/20-pixel.md

@@ -0,0 +1,118 @@
+# 20-pixel · 像素冒险 / 8-bit
+
+上游：`src/motion/mgstyles/upstream/demos/20-pixel/film.js`（70 973 B / 914 行）、`cues.json`（888 B）。内部分辨率写死 `const W = 320, H = 180`，输出 1920×1080 正好 ×6；150 BPM / 30fps / 10.000s（一拍 12 帧）。`window.DEMO.motionBlur` 只 `samples:1`，味道全来自 CRT 后期。提示词原文用 `mg_style {action:"read",slug:"20-pixel"}` 取。
+
+## 1. 一眼认出
+
+- **每个像素是 6×6 输出方块**：1px 描边在成片里是 6px 实心块，没有抗锯齿，没有亚像素位移。
+- **同屏 ≤32 色**，全部来自 `film.js:17` 的 `HEX`（QUEST-32）；渐变只有 4×4 Bayer（`BAY` / `bay(x,y)`），天空 5 级色阶。
+- **动作是阶梯的**：跑步 `Math.floor(f/3)`（10fps）、星星 `Math.floor(f/4)`、金币 `Math.floor(f/2)`（15fps）。
+- **横向卷轴**：`GROUND = 150`，主角屏幕 x 钉在 96（`cam(f) = hx(f) - 96`），相机停在 `CAM_END = 260`；视差 ×0.125 / ×0.3 / ×0.55 / ×1.4。
+- **CRT 包住一切**：桶形 `k = 0.03`、按源像素行扫描线（6 输出 px 一条）、8 方向辉光、四角暗角。
+
+## 2. 色板
+
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| 描边紫黑 | `#0d0b1a` | 精灵 1px 描边（slot 0）、夜间最暗部 |
+| 夜蓝 | `#1b1a33` | 天空底、对话框最外层 |
+| 天蓝 | `#5b9bea` | 正午天空、水面高光（远山 `#2a2f5a`、云 `#8cc8f5`） |
+| 暖黄 | `#ffd166` | 金币、LOGO 立体面、光池 |
+| 白 | `#ffffff` | 高光点、白闪、`PRESS START` |
+| 品牌红 | `#d23c3c` | 主角围巾、丝带、UI 强调 |
+
+机制两级间接：`IB` 是 slot 索引（非 RGB），`SM` 每 slot 存 DAY/AFT/GOLD/SUNS/DUSK/NIGHT 六列索引，`makeLUT(f)` 每帧展开成 `HEX` 的最终色号；换 stage 就是换 LUT（`stageOf(f)` 选列，转场 4 帧用 `mixIdx` 两级混合）。`theme.ts` 只放 6–8 个常量，其余留 `PALETTE: string[]` 按下标取。
+
+**禁止色**：任何不在 `HEX` 里的颜色。尤其 `#808080` 灰、`#000000`（描边是带紫的 `#0d0b1a`）、任何高饱和紫——一出现就不像 8-bit。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 英文 HUD 使用 Press Start 2P，中文使用 Fusion Pixel 12；仍需在低分辨率网格上排版并用最近邻放大。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+原片写 `'Press Start 2P'`（HUD 数字 8px）和 `'Fusion Pixel 12'`（中文 12px），但**字体不是关键**：`glyph(ch, fam, size)` 先把字画进离屏 canvas，再按 alpha 阈值二值化成 1-bit mask（`gcache` 缓存），`text()` 用 1px 偏移补描边。像素感来自字被量化到源像素栅格。
+
+旧版没有内置字体时使用的系统替代栈：等宽 `"Consolas","JetBrains Mono",monospace`；中文 `"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif`；粗标题 `"Arial Black","Impact",sans-serif`。
+
+**损失**：Consolas 是矢量字，12px 中文会糊成灰块，直接 `fillText` 就破了 1-bit。必须照抄 `glyph()`：按 1× 画到 320×180 离屏 canvas，`getImageData` 后 alpha > 0.5 记 1，再 ×6 放大。字号只取 8/12/16，字距按整数源 px。
+
+## 4. 动效语法
+
+- **150 BPM = 12 帧/拍**；`beat 0.4 / bar 1.6`。
+- **缓动只有两种**：物理用**整数关键帧表**——落地挤压 `SQT = {0:[6,6],1:[3,3],2:[-4,-2],3:[-4,-2]}`、回弹 `BOUNCE = {0:0,1:-5,2:-2,3:0}`、震屏 `logoShake(f)` 6 帧 `[3,-3,2,-1,1,0]`；位移用抛物线 `dy = Math.round(-128*(1-(i/12)**2))`。**没有** `Easing.bezier`，也不该有。
+- **禁用**：`spring()`、作用在像素坐标上的连续缓动（必出半像素）、超过 2 帧的 opacity 渐变、`<CameraMotionBlur>`。
+- 签名动作：
+  1. **跑跳**（`jumps 0.3 / 2.0`，落地 `lands 0.9 / 2.8`）：12 帧抛物线 + 4 帧挤压，落地同帧 4 粒 `bay` 扬尘。
+  2. **金币三连**（`coins 0.4/0.5/0.6`）：12×12 精灵 4 帧旋转，每枚隔 3 帧，`Math.floor(f/2)`。
+  3. **开箱打字**（`box_open 4.6` → `type 4.8–5.6` → `box_close 5.8`）：`n = min(9, floor((f - fType)/3) + 1)`，3 帧一字，头像每 3 帧张嘴。
+  4. **LOGO 砸落**（`logo 7.2`，`shine 7.6`）：12 帧自由落体 + 4 帧挤压 + 2 帧白闪 `M(8)/M(15)`，扫光每帧 18px、沿 `u = i + j*0.7` 判定。
+  5. **入夜**（`night 8.0`，`night_wave 8.0–8.3`）：`waveR(f)` 按 `[150,110,70,36]` 四档收光池。
+- **网格**：320×180 硬栅格；对话框 176×30 @ (72,99)，安全边距 8px。图层自下而上：`drawSky` → 远山 ×0.125 → `MID` ×0.3 → `HILLS` ×0.55 → 地面 → 主角 → `drawFG` ×1.4 → 对话框/HUD → CRT。
+
+## 5. Remotion 落地配方
+
+必须换掉：
+
+1. `window.renderAt(t)` / `requestAnimationFrame` → `useCurrentFrame()`，`t = frame/30`。
+2. `Date.now()` / `performance.now()` → 不需要。`rng(seed)` 在模块级只建一次（`const R = rng(7)`）。
+3. `Math.random()` → 用 `hash(x, y)` / `rng()`（mulberry32）。别用 Remotion 的 `random()`：它按 seed 全局推进，重排会串。
+4. **Canvas 2D 逐帧**：保留，改成 `useEffect(() => paint(ctx, frame), [frame])` 同步画；canvas 固定 `width={320} height={180}`，CSS 放大 6 倍 + `imageRendering:'pixelated'`。
+5. CSS `transition` / `animation` → 全删，只留静态叠加层。
+6. 运动模糊：上游 `samples:1`，**不加**。
+
+**CRT 近似与损失**：`film.js:760` 的 `fs` 逐像素做 `sharp()` 像素中心重采样、桶形、扫描线（`sy = fract(uc.y*uSrc.y)`，每源像素行一条）、8 方向 glow。Remotion 拆静态层：`repeating-linear-gradient` 6px 周期 `rgba(0,0,0,.30)`、canvas 副本 `filter: blur(6px)` + `mixBlendMode:'screen'` 当辉光、`radial-gradient` 暗角、两条 1px 红/青偏移层 `screen` 当色偏。**损失**：无桶形（直边不弯）、无像素中心重采样（扫描线与像素格拍频出摩尔纹）、辉光是均匀高斯而非随亮度加权的 8 tap（暗部被抬灰）。
+
+```tsx
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { useEffect, useRef } from 'react';
+
+const W = 320, H = 180, Z = 6;                 // 1920/320，必须整除
+
+export const PixelScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const ref = useRef<HTMLCanvasElement>(null);
+  useEffect(() => {
+    const ctx = ref.current!.getContext('2d')!;
+    ctx.imageSmoothingEnabled = false;
+    ctx.fillStyle = '#1b1a33'; ctx.fillRect(0, 0, W, H);
+    // 12 帧坠落：先在源像素里取整，再画
+    const dy = Math.round(interpolate(frame, [216, 228], [-128, 0],
+      { extrapolateRight: 'clamp', easing: Easing.in(Easing.quad) }));
+    ctx.fillStyle = '#ffd166'; ctx.fillRect(132, 60 + dy, 56, 28);
+    ctx.fillStyle = '#0d0b1a'; ctx.fillRect(132, 60 + dy, 56, 2);
+  }, [frame]);
+  return (
+    <AbsoluteFill style={{ background: '#0d0b1a' }}>
+      <canvas ref={ref} width={W} height={H}
+        style={{ width: W * Z, height: H * Z, imageRendering: 'pixelated' }} />
+      <AbsoluteFill style={{ background:
+        'repeating-linear-gradient(to bottom, rgba(0,0,0,.30) 0 2px, transparent 2px 6px)' }} />
+    </AbsoluteFill>
+  );
+};
+```
+
+## 6. 镜头结构模板
+
+| 时间 | 意图 | 画面 |
+| --- | --- | --- |
+| 0.0–0.9 | CRT 开机 | 点→线→张开（`PWR.on` 11 帧） |
+| 0.9–3.2 | 跑跳 | 跳 0.3/2.0、落 0.9/2.8、6 金币、踩敌 2.4 |
+| 3.2–4.4 | 减速 | `skid 4.0` 扬尘、`stop 4.4` 相机停，转 sunset |
+| 4.6–5.8 | 开箱对话 | 箱开 4.6、打字 4.8–5.6、箱关 5.8 |
+| 6.0–6.47 | 抖动→爆光 | `chest_open 6.4`、1 帧白闪、推镜 8→12 |
+| 7.2–8.0 | LOGO 落地 | 12 帧坠落 + 4 帧挤压 + 扫光 7.6 + 震屏 |
+| 8.0–10 | 入夜收尾 | 光池收拢、萤火虫、丝带、`PRESS START` 闪 |
+
+## 7. 坑
+
+1. 一处漏 `Math.floor` 就糊：`cam(f)`、`cx*0.125`、精灵 x/y 全要取整。
+2. canvas 的 CSS 尺寸只能是 6 的整数倍，别套带小数的 `transform: scale()`。
+3. `IB` 是 slot 索引不是 RGB，直接当颜色画会得一片噪点，必须先过 `makeLUT`。
+4. 文字别交给 `<span>`：DOM 抗锯齿毁 1-bit，必须走 canvas 二值化。
+5. 扫描线周期要整除 1080（2/3/6px），否则出摩尔纹。
+
+## 8. 版权与素材
+
+上游 mg-styles-15 为 MIT。本风格无外部图片/视频：精灵、6×7 字模 `LG`、地形、云全由代码生成。`SCORE`、`PRESS START` 类文案可替换；别用任天堂的角色名与商标。

package/lib/motion/mgstyles/briefs/22-hud.md

@@ -0,0 +1,118 @@
+# 22-hud · 赛博朋克 HUD / FUI
+
+上游：`demos/22-hud/`（`index.html` 9 805 B、`js/hud.js` 65 650 B / 855 行、`js/holo.js` 17 026 B、`js/post.js` 8 773 B、`cues.json` 1 411 B）。three.js 线框地球 → `UnrealBloomPass` → 文字层 → CRT。1920×1080 / 30fps / 10.000s；120 BPM = 15 帧/拍，LOCK 6.400s = 第 192 帧。提示词原文用 `mg_style {action:"read",slug:"22-hud"}` 取。
+
+## 1. 一眼认出
+
+- **96% 是黑**：底 `#020A0D`，只剩 1–1.5px 青线、11–21px 全大写等宽字和一束辉光（`UnrealBloomPass(res, 0.75, 0.45, 0.32)`）。
+- **中央 401px 扫描环**：`318 * SS`（`SS = 1.26`），`SEGS` 生成 40 段长短弧（4–34°，间隔 3–13°），四角 34px 直角框（`frameCorners`，`m = 40`）。
+- **数字先乱码后定值**：`scramble` 5 帧跳 `GL` 字符、`roll` 4 帧跳数字、`flick` 4 帧 `[0.7,0.1,1.0,0.45]` 抖完才稳。
+- **一切都不太干净**：3px 扫描线 ±5%、径向色差、54 条 glitch 切片、0.028 颗粒。
+
+## 2. 色板
+
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| 墨底 | `#020A0D` | 全屏背景，`INK` 也是文字挖洞色 |
+| 深青 | `#0E3A42` | 面板底、`DEEP` |
+| 暗青 | `#0B7C8C` | 次级刻度、坐标行，`DIM` |
+| 主青 | `#00E5FF` | 90% 的线、括号、状态框，`CYA` |
+| 高光白青 | `#E8FEFF` | 主数字、锁定标题，`HOT` |
+| 警报红 | `#FF2A1F` | REC 点、失败状态，`RED` |
+| 锁定/信标 | `#FF2A8A` / `#FF5A4E` | 锁定环与四段弧 / 信号点与脉冲环 |
+
+色板只有这 8 个（`MKC` 是色盲替换表）。**禁止色**：纯白 `#FFFFFF`、绿色、任何暖色——唯一例外是 lock 时 `COMP_FS` 的 `reink()`，整屏压成 `vec3(1.0,0.40,0.0)` 橙调。
+
+## 3. 字体与字排
+
+**当前优先使用插件内置字体：** 中文用 HarmonyOS Sans SC，拉丁标题用 Rajdhani 或 Chakra Petch，数据用 JetBrains Mono。
+
+下方保留原片排版参数及旧版系统替代方案；只有内置字体不适合或不可用时才参考旧系统栈及其损失说明。
+
+原片加载 4 族：`"JetBrains Mono"`、`Rajdhani`、`"Chakra Petch"`、`"HarmonyOS Sans SC"`，等 `fonts.ready` 后才出首帧。拉丁一律大写 + `letterSpacing 1–9`。
+
+旧版没有内置字体时使用的系统替代栈：等宽 `"Consolas","JetBrains Mono",monospace`；拉丁窄体 `"Bahnschrift SemiCondensed","Arial Narrow",sans-serif`；中文 `"Microsoft YaHei UI","Microsoft YaHei",sans-serif`。
+
+**损失**：Rajdhani 窄体换 Bahnschrift 宽 8–12%，同一行 `ls:3` 会撑破 300px 栏，字距降到 1.5–2；JetBrains Mono 0.6em vs Consolas 0.55em，滚动数字左右跳，需 `tabular-nums` + 固定宽盒；HarmonyOS 900 在 Windows 无此字重（YaHei 仅 400/700），58px 标题会细一档。
+
+## 4. 动效语法
+
+- **120 BPM = 15 帧/拍**。0.4 / 4.4 / 6.4 / 7.1 四个冲击帧用闭快门单独渲染（`HARD` 集合），别让运动模糊糊掉。
+- 缓动全在 `util.js`：`E.outC = 1-(1-x)³`、`E.outE = 1-2^(-10x)`、`E.inOutC`、`E.inQ = x²`、`E.outQ`、`E.outBack(1.70158)`、`sstep`。所有位移 3–10 帧到位后彻底静止。
+- **禁用**：`spring()`、超过 0.35s 的位移、`rotate` 动画（HUD 是平面图，转起来就假）、opacity 渐变长于 4 帧。
+- 签名动作：
+  1. **开机 0–1.2s**：十字准星 0.04–0.22（`outE`），4 次 ping 每帧错峰、`318*E.outC` 落环；外环 0.40–0.90 画出；六边形网格 1.2 起 1500px 波前推开（`uHex`）。
+  2. **雷达 2.4s 起**：`radar_period 2.0`、`theta0 52°`，4 个 blip 按 `(brg-52)/180` 秒依次亮。
+  3. **捕获 5.9–6.33**：括号 8 帧 `outCubic` 从 (872,476) 收到 (176,176)，再 2 帧 `(F>>1)&1` 在 176/204 间跳，`snap 6.2333` 起 3 帧 `[1.35,1.08,0.96,1.0]` 过冲；锁环 36 段按 `E.inQ` 填满。
+  4. **LOCK 6.400**：标题 1.15→1（3 帧），首帧纯 `HOT`；扫描环换 `#FF2A8A` 并 `+0.62*DIVE` 推近；侧栏 `x ±120px` 外推 + `blur(4px)`。
+  5. **关机 9.767**：0.2s 内 `csy = pow(1-cz/0.6, 2.2)` 压成一条线，再横向收成点。
+- **网格**：安全边距 96px，角标 40px，顶栏 y=76，分隔线 y=100.5，左栏 `CW=300`。字号 11/13/14/15/17/21/26/58/60；线宽 1/1.5/2/3/4/6。
+
+## 5. Remotion 落地配方
+
+必须换掉：
+
+1. `window.renderAt(t)` / `requestAnimationFrame` → `useCurrentFrame()`；`holo.update(t)` 的 `h`、`zAt(t)`、`SURGE(t)` 全改成 `frame` 纯函数。
+2. `Date.now()` / `document.fonts.ready` → 删；字体同步给。
+3. `Math.random()` → `util.js` 的 `hash(...a)` 与 `mulberry(seed)`。
+4. **Canvas 2D 逐帧**：保留，但合成两遍——几何一层、文字一层（上游 `drawHUD(t,S,'geo')` / `'txt'` 就这么分），文字层不参与 blur/bloom，否则滚动数字双曝光。
+5. CSS `transition`/`animation` → 删。`ctx.filter='blur()'` 可用，但只在整层用一次。
+6. 运动模糊：`samples:1`，**不加** `<CameraMotionBlur>`，动感靠 dive 推镜和 glitch。
+
+**1px 刻线在 1080p**：上游按 `dpr`（通常 2）画 `W*dpr` 画布，1.25 逻辑 px 实为 2.5 device px；Remotion 输出就是 1920×1080，1 逻辑 px = 1 像素，所以坐标 `+0.5`、`lineWidth: 1.25`，否则线要么消失要么发灰。**不要**画 3840 再缩，线变 0.6px 灰线。
+
+**后期近似**：bloom 用副本 `brightness(1.6) contrast(2.4) blur(10px)` + `screen`，靠提对比度当阈值；扫描线 3px `repeating-linear-gradient`、幅度 5%（对应 `0.90+0.10*cos`）；色差用两份通道副本 `translate ±1.5px`；glitch 54 条切片按 `hash(slice,frame)` 挑 22%（≤67px）；白闪只抬亮部。**损失**：单次高斯 ≠ 5 级 mip bloom，1px 线光晕半径不对；平移色差无径向权重；无 `TEXT_FS` 双环采样，暗底字偏薄。
+
+```tsx
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { useEffect, useRef } from 'react';
+
+const CX = 960, CY = 540, R = 401;              // 318 * SS(1.26)
+
+export const HudScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const ref = useRef<HTMLCanvasElement>(null);
+  useEffect(() => {
+    const ctx = ref.current!.getContext('2d')!;
+    // 0.40–0.90s 外环；192 帧起括号 3 帧收 130px
+    const d = interpolate(frame, [12, 27], [0, 1],
+      { extrapolateRight: 'clamp', easing: Easing.out(Easing.exp) });
+    const k = interpolate(frame, [192, 195], [1.4, 1],
+      { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+    ctx.lineWidth = 1.25; ctx.globalAlpha = 0.9; ctx.strokeStyle = '#00E5FF';
+    ctx.beginPath(); ctx.arc(CX + 0.5, CY + 0.5, R, -Math.PI / 2, -Math.PI / 2 + d * 6.2832);
+    ctx.stroke();
+    ctx.strokeStyle = frame >= 192 ? '#FF2A8A' : '#00E5FF';
+    ctx.strokeRect(CX - 130 * k, CY - 130 * k, 260 * k, 260 * k);
+  }, [frame]);
+  return (
+    <AbsoluteFill style={{ background: '#020A0D' }}>
+      <canvas ref={ref} width={1920} height={1080} />
+      <AbsoluteFill style={{ background:
+        'repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0 2px, transparent 2px 3px)' }} />
+    </AbsoluteFill>
+  );
+};
+```
+
+## 6. 镜头结构模板
+
+| 时间 | 意图 | 画面 |
+| --- | --- | --- |
+| 0.0–1.4 | 开机自检 | 十字 → ping 落环 → 侧栏 0.9/1.15 左右开 → 六边形波前 |
+| 1.4–2.4 | 地球出现 | 线框球 1.35 起长到 1，扫描面上下走，日志 4 行依次打 |
+| 2.4–4.4 | 数据活起来 | 雷达扫描、6 组数字 7.5 帧一滚、sparkline 2.9 |
+| 4.4–6.4 | 捕获信号 | 状态框转 `SIGNAL DETECTED` 闪烁、地球转向、候选 `NO MATCH`、括号飞入 |
+| 6.4–7.1 | 锁定冲击 | 白闪、橙调 re-ink 0.45s 扫过、标题砸落、dive 推近、侧栏失焦 |
+| 7.1–10 | 展开与收尾 | 暗带打开、坐标打字、`alert_pulses` 脉冲、outro 淡出、9.767 压线收点 |
+
+## 7. 坑
+
+1. 文字层必须在 bloom 之上单独合成，和几何一起过 blur 就会糊成两行字。
+2. 1px 线整数坐标会闪：`.5` 偏移 + `lineWidth ≥ 1.25`；扫描线 3px 周期要整除 1080。
+3. `knock()`（`destination-out` 挖洞）是文字可读性的关键，漏掉就有线穿字。
+4. 别把 `drawHUD` 返回的 `scopeR` 写死：dive 时它要涨 62%，锁定环靠这个才"飞过镜头"。
+
+## 8. 版权与素材
+
+上游 mg-styles-15 为 MIT。`KESTREL-9`、`隼眼-9` 与城市代号都是虚构；`land-50m.json`（Natural Earth 衍生）随仓库使用。刻线、括号、锁定环是通用 FUI 语汇，可自由重画。

package/lib/motion/mgstyles/catalog.d/01-flat-vector.json

@@ -0,0 +1,34 @@
+{
+  "slug": "01-flat-vector",
+  "name": "扁平矢量·一点成城",
+  "oneLiner": "一点落地弹成太阳，长出一座城，再收进窗里变回一个点。",
+  "signature": [
+    "全片零渐变零阴影零描边，只有 #2B2BFF 底上五档纯色块",
+    "每次落地竖向压到 60%、横向撑到 136%，2–6 帧内回弹",
+    "入场一律「预备 4 帧—冲出 4 帧—回弹 8 帧」，过冲 1.56",
+    "9 栋楼以底边为锚错峰 3 帧升起，顶盖再延 2 帧",
+    "推镜 30 倍穿进 64×36 px 的窗，窗内是同一套矢量语言"
+  ],
+  "palette": {
+    "page": "#2B2BFF",
+    "surface": "#3B3BFF",
+    "field": "#4D4DFF",
+    "text": "#FFF6E9",
+    "muted": "#A3A3FF",
+    "accent": "#FF5A4E",
+    "border": "#1F1FCC"
+  },
+  "colors": ["#2B2BFF", "#FF5A4E", "#FFF6E9", "#FFC62B", "#151433", "#2EE6A8", "#A3A3FF"],
+  "fonts": {
+    "display": "\"Fredoka\",\"Resource Han Rounded\",\"Noto Sans SC\",sans-serif",
+    "text": "\"Resource Han Rounded\",\"Noto Sans SC\",sans-serif",
+    "mono": "\"JetBrains Mono\",monospace"
+  },
+  "rhythm": {
+    "bpm": 120,
+    "fps": 30,
+    "duration": 10,
+    "aspect": "16:9",
+    "cutFrames": 15
+  }
+}

package/lib/motion/mgstyles/catalog.d/02-line-art.json

@@ -0,0 +1,34 @@
+{
+  "slug": "02-line-art",
+  "name": "一笔画·金线",
+  "oneLiner": "一根金线从不抬笔，7.5 秒画完一座城，收成金币字标。",
+  "signature": [
+    "全片单条连续路径，23 段图形首尾相接，笔尖从不抬起",
+    "线宽恒为 3px（成片 4.5px），除以相机缩放保持屏幕恒定",
+    "新墨 #FFF6DC 发烫，旧线 1.5s 内退到 40% 并偏成 #967D50",
+    "三处 0.15s 停顿用重复 marker 实现，笔停但路径不断",
+    "7.5s 圆环从中心 swell 成金币，0.367s 由环带填满"
+  ],
+  "palette": {
+    "page": "#0B1320",
+    "surface": "#101A28",
+    "field": "#16233A",
+    "text": "#E9D7A5",
+    "muted": "#967D50",
+    "accent": "#FFF6DC",
+    "border": "#24344C"
+  },
+  "colors": ["#0B1320", "#E9D7A5", "#FFF6DC", "#967D50", "#F2E0AE", "#CCAB6C", "#6E5428"],
+  "fonts": {
+    "display": "\"Cormorant Garamond\",\"Noto Serif SC\",serif",
+    "text": "\"Noto Serif SC\",serif",
+    "mono": "\"JetBrains Mono\",monospace"
+  },
+  "rhythm": {
+    "bpm": 72,
+    "fps": 30,
+    "duration": 10,
+    "aspect": "16:9",
+    "cutFrames": 13
+  }
+}

package/lib/motion/mgstyles/catalog.d/03-isometric.json

@@ -0,0 +1,35 @@
+{
+  "slug": "03-isometric",
+  "name": "等轴 2.5D·浮岛城市",
+  "oneLiner": "12×12 瓦片波浪落下，长成一座浮岛城市，最后拉远露字。",
+  "signature": [
+    "正交相机沿 (1,1,1)，棱线 2:1 斜率，全片零透视",
+    "瓦片顶面是奶白陶土 #F1EEFA，侧面才上色，空瓦片会被冲击波翻面",
+    "所有生长都是「底座先落—墙长—屋顶晚 0.375s」，墙有 9% 过冲",
+    "落下统一 0.3s 重力加速，触地 30% 压扁 + 40rad/s 抖两下",
+    "6.0s 冲击波以 15 单位/s 从 CORE 扩散，窗色延迟点亮",
+    "7.75–8.75s 拉远露出浮岛，标题平躺在等轴地面上"
+  ],
+  "palette": {
+    "page": "#EEEAFC",
+    "surface": "#F4F1FD",
+    "field": "#E6E1F7",
+    "text": "#2C2960",
+    "muted": "#8781D0",
+    "accent": "#62F0F2",
+    "border": "#C9BFF0"
+  },
+  "colors": ["#EEEAFC", "#F1EEFA", "#94DFBD", "#FFF0C8", "#62F0F2", "#2C2960", "#FFC4AC", "#8781D0"],
+  "fonts": {
+    "display": "\"Unbounded\",\"HarmonyOS Sans SC\",\"Noto Sans SC\",sans-serif",
+    "text": "\"HarmonyOS Sans SC\",\"Noto Sans SC\",sans-serif",
+    "mono": "\"JetBrains Mono\",monospace"
+  },
+  "rhythm": {
+    "bpm": 120,
+    "fps": 30,
+    "duration": 10,
+    "aspect": "16:9",
+    "cutFrames": 15
+  }
+}

package/lib/motion/mgstyles/catalog.d/05-cel-boil.json

@@ -0,0 +1,28 @@
+{
+  "slug": "05-cel-boil",
+  "name": "逐帧手绘·线条沸腾",
+  "oneLiner": "一拍二的纸上手绘：每换一张画墨线重抖一次，填色故意错位 5px，唯一饱和色是番茄红。",
+  "signature": [
+    "线条每换一张画就重抖一次（simplex 噪声平移中线，±2.4px）",
+    "一拍二：每张画停 2 帧，开场只循环 4 张",
+    "填色层整体偏移 (-5, +4)px，墨线压在填色上",
+    "可变宽墨线：撇从 1.12 倍收到 0.5 倍，钩在末端收细",
+    "纸是两层：放大 1.045 的纸底 + multiply 的纸齿，位置随画号换"
+  ],
+  "palette": {
+    "page": "#f4e9d0",
+    "surface": "#fff6e2",
+    "field": "#ffc425",
+    "text": "#1c1613",
+    "muted": "#d9573f",
+    "accent": "#e5402b",
+    "border": "#e0cba6"
+  },
+  "colors": ["#f4e9d0", "#fff6e2", "#1c1613", "#e5402b", "#ffc425", "#d9573f"],
+  "fonts": {
+    "display": "\"Caveat\",\"LXGW Marker Gothic\",\"Long Cang\",\"Noto Sans SC\",sans-serif",
+    "text": "\"LXGW Marker Gothic\",\"Long Cang\",\"Noto Sans SC\",sans-serif",
+    "mono": "\"JetBrains Mono\",monospace"
+  },
+  "rhythm": { "bpm": 120, "fps": 24, "duration": 10, "aspect": "16:9", "cutFrames": 2 }
+}

package/lib/motion/mgstyles/catalog.d/06-collage.json

@@ -0,0 +1,28 @@
+{
+  "slug": "06-collage",
+  "name": "拼贴剪贴·撕纸印刷",
+  "oneLiner": "牛皮纸上的撕边剪贴与半调印刷，所有动作量化到 12fps，每个元素自己会抖。",
+  "signature": [
+    "运动量化到 12fps（30/12=2.5 帧一步，实际 2 帧、3 帧交替）",
+    "每个元素独立抖动 ±2px / ±0.4°，静止元素降到 6fps、±1.1px",
+    "白描边是「剪」出来的：沿半径 3.5px 的圆画 28 遍再 source-in",
+    "贴上去有 lift：先放大 1.38，落点过冲 0.972 再回弹 1.01",
+    "影子随 lift 变：blur 5→39px、offset 3→27px、alpha 0.36→0.44"
+  ],
+  "palette": {
+    "page": "#F2ECDF",
+    "surface": "#EFE8DA",
+    "field": "#E3CFAE",
+    "text": "#16130F",
+    "muted": "#7A5516",
+    "accent": "#D2261C",
+    "border": "#C4A077"
+  },
+  "colors": ["#F2ECDF", "#EFE8DA", "#E3CFAE", "#16130F", "#7A5516", "#D2261C", "#C4A077"],
+  "fonts": {
+    "display": "\"Anton\",\"Noto Serif SC\",sans-serif",
+    "text": "\"Noto Serif SC\",\"Noto Sans SC\",serif",
+    "mono": "\"IBM Plex Mono\",\"JetBrains Mono\",monospace"
+  },
+  "rhythm": { "bpm": 90, "fps": 30, "duration": 10, "aspect": "16:9", "cutFrames": 3 }
+}

package/lib/motion/mgstyles/catalog.d/07-liquid.json

@@ -0,0 +1,28 @@
+{
+  "slug": "07-liquid",
+  "name": "液态流动·棚拍稠液",
+  "oneLiner": "暗紫棚里的稠液体：橙粉紫按厚度混色，落地压扁回弹，最后把液滴拉成字形。",
+  "signature": [
+    "只有一种材质：稠液体，球缘 1–2px 高光唇线",
+    "内部按厚度三段插值 #FF5C0F → #FF1A70 → #8F1FFF",
+    "落地先压扁再回弹（spring），接触点留 splat 与 5–7 条 tendril",
+    "4.0s 三层洪流面各错 2 帧压上来，4.42s 沉进液体只剩涡流与气泡",
+    "6.4s 液滴拉成 4 个字形，7.2s glint 扫过，8.4s 一滴落下收尾"
+  ],
+  "palette": {
+    "page": "#371E3E",
+    "surface": "#4C2955",
+    "field": "#7C4684",
+    "text": "#FFE8F0",
+    "muted": "#FFC8E0",
+    "accent": "#FF5C0F",
+    "border": "#8F1FFF"
+  },
+  "colors": ["#FF5C0F", "#FF1A70", "#8F1FFF", "#FFE8F0", "#FFC8E0", "#371E3E", "#7C4684"],
+  "fonts": {
+    "display": "\"Fraunces\",\"Resource Han Rounded\",\"Noto Serif SC\",serif",
+    "text": "\"Noto Serif SC\",\"Inter\",serif",
+    "mono": "\"JetBrains Mono\",monospace"
+  },
+  "rhythm": { "bpm": 150, "fps": 30, "duration": 10, "aspect": "16:9", "cutFrames": 2 }
+}

package/lib/motion/mgstyles/catalog.d/08-morph.json

@@ -0,0 +1,28 @@
+{
+  "slug": "08-morph",
+  "name": "一形万象·形变",
+  "oneLiner": "始终只有一个实心剪影：轮廓等点数重采样后逐点插值，必经圆形中介变出八个图标。",
+  "signature": [
+    "单形：永远一个实心剪影，无描边、无渐变、无阴影",
+    "变形靠等点数重采样（body 240 / 洞 72）+ 逐点 lerp，不是交叉淡化",
+    "中介形必过圆或胶囊（P.Ca/Cb）",
+    "每次落地压扁回弹：A·sin(2πτ/0.28)·e^(-7.5τ)，从落地前 2 帧起算",
+    "终场落在丝网印质感：纸纹 + 每帧偏移的 512² 颗粒 + 暗角"
+  ],
+  "palette": {
+    "page": "#F4EEE3",
+    "surface": "#E7E1D7",
+    "field": "#DED8CF",
+    "text": "#16151B",
+    "muted": "#908C89",
+    "accent": "#FF4F2B",
+    "border": "#D0CBC3"
+  },
+  "colors": ["#F4EEE3", "#16151B", "#FFB627", "#FF4F2B", "#2438E8", "#D93A1C"],
+  "fonts": {
+    "display": "\"Outfit\",\"HarmonyOS Sans SC\",\"Noto Sans SC\",sans-serif",
+    "text": "\"HarmonyOS Sans SC\",\"Noto Sans SC\",sans-serif",
+    "mono": "\"IBM Plex Mono\",\"JetBrains Mono\",monospace"
+  },
+  "rhythm": { "bpm": 150, "fps": 30, "duration": 10, "aspect": "16:9", "cutFrames": 25 }
+}

package/lib/motion/mgstyles/catalog.d/09-bauhaus.json

@@ -0,0 +1,28 @@
+{
+  "slug": "09-bauhaus",
+  "name": "几何构成·包豪斯",
+  "oneLiner": "红黄蓝三原色 + 基础几何 + 严格 120px 网格，按拍切换的构成主义排版。",
+  "signature": [
+    "中央 8x8 网格（模数 120px）",
+    "只有纸/红/黄/蓝/墨五色",
+    "直角几何：正方形、四分之一圆、半圆、三角，无圆角矩形",
+    "每 15 帧一次状态切换，切换之间完全静止",
+    "四色套印偏移 2-4px + 纸纹"
+  ],
+  "palette": {
+    "page": "#F1E9DA",
+    "surface": "#EDE4D3",
+    "field": "#E8DECB",
+    "text": "#111111",
+    "muted": "#8C8172",
+    "accent": "#E03C31",
+    "border": "#D8CBB4"
+  },
+  "colors": ["#F1E9DA", "#E03C31", "#F2B705", "#1E4FA3", "#111111"],
+  "fonts": {
+    "display": "\"Anton\",\"HarmonyOS Sans SC\",\"Noto Sans SC\",sans-serif",
+    "text": "\"HarmonyOS Sans SC\",\"Noto Sans SC\",sans-serif",
+    "mono": "\"IBM Plex Mono\",\"JetBrains Mono\",monospace"
+  },
+  "rhythm": { "bpm": 120, "fps": 30, "duration": 10, "aspect": "16:9", "cutFrames": 15 }
+}

package/lib/motion/mgstyles/catalog.d/10-synthwave.json

@@ -0,0 +1,28 @@
+{
+  "slug": "10-synthwave",
+  "name": "复古霓虹·合成器浪潮",
+  "oneLiner": "深紫夜空下的透视霓虹网格与分层日落，镀铬标题砸入、手写霓虹点亮、全程 VHS 做旧。",
+  "signature": [
+    "霓虹透视网格从地平线冲向镜头，靠 z 偏移取模滚动",
+    "日落是同一个圆切成 5–7 条横带，洋红→橙→黄，不是渐变球",
+    "双辉光：紧 4px 高亮 + 宽 30px 低透明",
+    "VHS 整链：RGB split 1–2px → 2px 扫描线 → 随机 glitch 抽帧 → 4:3 圆角遮罩 → CRT 关机",
+    "镀铬标题多段金属渐变 + bevel 高光 + 4 角星芒扫过"
+  ],
+  "palette": {
+    "page": "#120A2A",
+    "surface": "#2A1055",
+    "field": "#3A1A4E",
+    "text": "#F4F4FF",
+    "muted": "#8FF9FF",
+    "accent": "#FF2FB8",
+    "border": "#E6C465"
+  },
+  "colors": ["#120A2A", "#2A1055", "#FF2FB8", "#8FF9FF", "#EF933D", "#E6C465", "#F4F4FF"],
+  "fonts": {
+    "display": "\"Michroma\",\"Douyin Sans\",\"Noto Sans SC\",sans-serif",
+    "text": "\"Douyin Sans\",\"Noto Sans SC\",sans-serif",
+    "mono": "\"JetBrains Mono\",monospace"
+  },
+  "rhythm": { "bpm": 100, "fps": 30, "duration": 10, "aspect": "16:9", "cutFrames": 18 }
+}

package/lib/motion/mgstyles/catalog.d/12-aurora-glass.json

@@ -0,0 +1,28 @@
+{
+  "slug": "12-aurora-glass",
+  "name": "弥散渐变·玻璃拟态",
+  "oneLiner": "近黑底上 7 块色斑缓慢漂移，玻璃卡带 1px 内描边与近边折射，一切都慢。",
+  "signature": [
+    "底色 #040312，亮部全靠加色色斑，没有提亮的灰",
+    "7 块无边色斑，24–40s 闭环漂移，强度 0.32–1.15",
+    "玻璃 = 30px backdrop 模糊 + 7% 白 + 1px 白内描边 + 13px 近边折射",
+    "80BPM，最短动作 0.75s，没有 120ms 以下的跳变",
+    "文字只做 opacity + 8px 上浮，从不缩放旋转"
+  ],
+  "palette": {
+    "page": "#040312",
+    "surface": "#171043",
+    "field": "#0B0726",
+    "text": "#FFFFFF",
+    "muted": "#8C8CFF",
+    "accent": "#7050FF",
+    "border": "#FFFFFF"
+  },
+  "colors": ["#040312", "#7050FF", "#2F46F2", "#34CFF0", "#B653F0", "#8C8CFF", "#3320A8"],
+  "fonts": {
+    "display": "\"Sora\",\"HarmonyOS Sans SC\",\"Noto Sans SC\",sans-serif",
+    "text": "\"Inter\",\"HarmonyOS Sans SC\",\"Noto Sans SC\",sans-serif",
+    "mono": "\"JetBrains Mono\",monospace"
+  },
+  "rhythm": { "bpm": 80, "fps": 30, "duration": 10, "aspect": "16:9", "cutFrames": 22 }
+}

package/lib/motion/mgstyles/catalog.d/18-hanazi.json

@@ -0,0 +1,28 @@
+{
+  "slug": "18-hanazi",
+  "name": "综艺花字",
+  "oneLiner": "竖屏三层描边花字：白边 + 彩边 + 硬挤出，弹簧入场，字字都歪。",
+  "signature": [
+    "每字三层描边：白 7.6% / 彩 7.0% / 挤出 9.3%（相对 172px 字高）",
+    "逐字弹簧入场，第 5 帧峰值 1.15，8 帧到位，错峰 2 帧",
+    "所有花字带 -7°~+6° 歪斜与 ±16px 基线抖动",
+    "1080×1920 一行 5 字，字距 = 字高，不用 letter-spacing",
+    "装饰只有手绘几何：四角星/爆炸框/放射线/汗滴，无 emoji"
+  ],
+  "palette": {
+    "page": "#1B1B22",
+    "surface": "#1E2A78",
+    "field": "#0E1440",
+    "text": "#FFFFFF",
+    "muted": "#A9C4E0",
+    "accent": "#FFE14D",
+    "border": "#FFFFFF"
+  },
+  "colors": ["#1E2A78", "#FFE14D", "#FF3D7F", "#1A1030", "#2CCBF2", "#FFFFFF", "#FF9A1F"],
+  "fonts": {
+    "display": "\"Luckiest Guy\",\"Resource Han Rounded\",\"Noto Sans SC\",sans-serif",
+    "text": "\"Douyin Sans\",\"LXGW Marker Gothic\",\"Noto Sans SC\",sans-serif",
+    "mono": "\"JetBrains Mono\",monospace"
+  },
+  "rhythm": { "bpm": 120, "fps": 30, "duration": 10, "aspect": "9:16", "cutFrames": 15 }
+}

package/lib/motion/mgstyles/catalog.d/19-paperclip.json

@@ -0,0 +1,28 @@
+{
+  "slug": "19-paperclip",
+  "name": "粗描边贴纸科普",
+  "oneLiner": "一块 2400×5900 的手机屏世界，镜头一路下飞，白描边贴纸配精确图表。",
+  "signature": [
+    "世界是一块 2400×5900 的手机屏，#E9EEF2 底 + 48px 网点",
+    "没有切镜：16 个相机关键帧，z 从 1.06 压到 0.2",
+    "所有素材白描边 10px（长边的 2.3%），paint-order: stroke",
+    "章节头 = 20×20 橙方块 + 中文 30px + Inter 大写 .18em",
+    "只有 #25313D 墨 + #FF5A36 一个强调色，没有渐变填充"
+  ],
+  "palette": {
+    "page": "#1D2731",
+    "surface": "#E9EEF2",
+    "field": "#F7F9FB",
+    "text": "#25313D",
+    "muted": "#8C9AA8",
+    "accent": "#FF5A36",
+    "border": "#CDD6DE"
+  },
+  "colors": ["#25313D", "#FF5A36", "#E9EEF2", "#F7F9FB", "#8C9AA8", "#C5CFD8", "#1D2731"],
+  "fonts": {
+    "display": "\"Inter\",\"Noto Sans SC\",sans-serif",
+    "text": "\"Inter\",\"Noto Sans SC\",sans-serif",
+    "mono": "\"JetBrains Mono\",monospace"
+  },
+  "rhythm": { "bpm": 120, "fps": 30, "duration": 10, "aspect": "16:9", "cutFrames": 15 }
+}

package/lib/motion/mgstyles/catalog.d/20-pixel.json

@@ -0,0 +1,28 @@
+{
+  "slug": "20-pixel",
+  "name": "像素 8-bit·横版卷轴",
+  "oneLiner": "每个像素是 6×6 输出方块，QUEST-32 色板配 4×4 Bayer 抖动的横版卷轴，外面套一层 CRT。",
+  "signature": [
+    "1 源像素 = 6×6 输出方块，全程无抗锯齿、无亚像素位移",
+    "同屏 ≤32 色，渐变只走 4×4 Bayer 抖动（天空 5 级色阶）",
+    "动作阶梯化：跑步 10fps、金币 15fps、星星 7.5fps",
+    "横向卷轴：主角钉在屏幕 x=96，四层视差 0.125/0.3/0.55/1.4",
+    "CRT 包住一切：桶形 k=0.03 + 按源像素行扫描线 + 8 向辉光 + 四角暗角"
+  ],
+  "palette": {
+    "page": "#1b1a33",
+    "surface": "#0d0b1a",
+    "field": "#2a2f5a",
+    "text": "#ffffff",
+    "muted": "#8cc8f5",
+    "accent": "#ffd166",
+    "border": "#5b9bea"
+  },
+  "colors": ["#0d0b1a", "#1b1a33", "#2a2f5a", "#5b9bea", "#ffd166", "#ffffff", "#d23c3c"],
+  "fonts": {
+    "display": "\"Press Start 2P\",\"Fusion Pixel 12\",monospace",
+    "text": "\"Fusion Pixel 12\",monospace",
+    "mono": "\"Press Start 2P\",\"Fusion Pixel 12\",monospace"
+  },
+  "rhythm": { "bpm": 150, "fps": 30, "duration": 10, "aspect": "16:9", "cutFrames": 3 }
+}