dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/interaction/autolayout-gap-dial/AutolayoutGapDial.tsx

@@ -0,0 +1,305 @@
+// autolayout-gap-dial —— framer-ai 4.5–5.5s
+// 间距拨盘驱动布局：一个 gap 数值同帧驱动整排导航块的位置、测量线、徽章与读数。
+//
+// 第二轮重设计（石墨暗场 · 设计工具检查器海报）：
+// - look = graphite（近单色暗场）。设计工具的"选择白 + 测量金"两色语义：框选描边/手柄用近白，
+//   间距测量线/徽章/拨盘指针用 accent2 香槟金——画面里只有"被拨动的那个数"是有颜色的。
+// - 主角是"数"：顶部 196px 超大 tabular 读数（GAP 眉题 + 数值 + px 单位），下面一把 760px 拨盘刻度尺，
+//   刻度随 gap 横向滚过中心金针；拨动时读数由白转金、松手后回白——数值就是缰绳。
+// - 布局主体：一排 120px 高的导航块（video-shotcraft 站点的顶部导航），占画宽 ~64–86%；激活项白底黑字，
+//   其余是带色相深灰面板 + 发丝线 + 顶部内高光；块按自身速度做横向运动模糊（外侧块位移最大，拖影最长）。
+// - 节奏「预备—拉开—屏息—回弹」：开场先把 gap 往里收一点（anticip 预备，12→6），再 swift 不对称曲线
+//   拉到 104；hold 一拍屏息；松手后欠阻尼弹簧过冲到比起点更紧再回稳（过冲段 ×0.45 压缩，gap 永不为负）。
+//
+// 时间表（30fps，共 150f）：
+//   0–20    入场：舞台光 + 点阵画布；导航块错峰上浮（父先到）、框选描边从外侧收拢、8 手柄 2f 错峰弹出
+//   6–22    读数入场：眉题字距收拢、数值从线下升起、刻度尺淡入
+//   22–32   预备：gap 12→6（anticip，观众先看到"往回收"再看到"冲出去"）
+//   32–66   主动作：gap 6→104（34f swift），读数逐 2 跳、转金；测量线与徽章实时拉长
+//   66–86   屏息 hold 20f：相机极缓推近（总 +2.5%），金色读数停在 104
+//   86–118  回弹：spring(damping 9, stiffness 80) 104→~7→12，~118f 落定，读数回白
+//   118–150 落定 hold：完整海报（读数 12 + 收紧的导航条），相机继续极缓推进
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, spring } from 'remotion';
+import { EASE, FONT, ramp, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, springAt, type } from '../../_fixtures/Look';
+
+export const AUTOLAYOUT_GAP_DIAL_DURATION = 150;
+
+const L = LOOKS.graphite;
+const FPS = 30;
+const SEL = 'rgba(244,244,242,0.92)'; // 选择白：框选描边 / 手柄
+const GOLD = L.accent2; // 测量金：间距线 / 徽章 / 指针 / 拨动中的读数
+
+const LABELS = ['Recipes', 'Gallery', 'Workbench', 'Showcase', 'Install']; // video-shotcraft 站点导航
+const BLOCK_WIDTHS = [252, 206, 278, 268, 220]; // 不等宽才像真导航
+const BLOCK_H = 120;
+const ROW_Y = 684; // 行中心
+const G_REST = 12;
+const G_PRE = 6; // 预备回收值
+const G_MAX = 104;
+
+const PRE_START = 22;
+const PRE_END = 32;
+const GROW_END = 66;
+const HOLD_END = 86;
+// damping 9 的原始过冲 ≈18%×106px 会把 gap 拉成负数；过冲段 ×0.45 → 最紧约 6px，仍"比起点更紧再回稳"
+const OVERSHOOT_K = 0.45;
+
+// 同一个 gap 参数派生全部几何（块位置、测量线、徽章、读数、刻度尺）
+const gapAt = (f: number) => {
+  if (f < PRE_END) return G_REST + (G_PRE - G_REST) * ramp(f, PRE_START, PRE_END - PRE_START, EASE.swift);
+  if (f < HOLD_END) return G_PRE + (G_MAX - G_PRE) * ramp(f, PRE_END, GROW_END - PRE_END, EASE.swift);
+  const s = spring({ frame: f - HOLD_END, fps: FPS, config: { damping: 9, stiffness: 80, mass: 1.1 } });
+  const s2 = s > 1 ? 1 + (s - 1) * OVERSHOOT_K : s;
+  return G_MAX + (G_REST - G_MAX) * s2;
+};
+
+// 两个 hex 颜色按 t 混合
+const mixHex = (a: string, b: string, t: number) => {
+  const pa = a.match(/[0-9a-f]{2}/gi)!.map((h) => parseInt(h, 16));
+  const pb = b.match(/[0-9a-f]{2}/gi)!.map((h) => parseInt(h, 16));
+  const k = Math.max(0, Math.min(1, t));
+  return `rgb(${pa.slice(0, 3).map((x, i) => Math.round(x + (pb[i] - x) * k)).join(',')})`;
+};
+
+const rowLayout = (gap: number) => {
+  const total = BLOCK_WIDTHS.reduce((a, b) => a + b, 0) + gap * (BLOCK_WIDTHS.length - 1);
+  const startX = (1920 - total) / 2;
+  const xs: number[] = [];
+  let acc = startX;
+  for (const w of BLOCK_WIDTHS) {
+    xs.push(acc);
+    acc += w + gap;
+  }
+  return { total, startX, xs };
+};
+
+const IconAutoLayout: React.FC<{ c: string; size?: number }> = ({ c, size = 22 }) => (
+  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
+    <rect x={1} y={3} width={3.4} height={8} rx={1} fill={c} />
+    <rect x={5.3} y={3} width={3.4} height={8} rx={1} fill={c} opacity={0.7} />
+    <rect x={9.6} y={3} width={3.4} height={8} rx={1} fill={c} opacity={0.45} />
+  </svg>
+);
+
+// 拨盘刻度尺：每 1 单位 = UNIT px，中心金针读当前 gap
+const RULER_W = 760;
+const UNIT = 6.5;
+const Ruler: React.FC<{ gap: number; op: number; hot: number }> = ({ gap, op, hot }) => {
+  const ticks: React.ReactNode[] = [];
+  for (let u = -60; u <= 180; u += 2) {
+    const x = RULER_W / 2 + (u - gap) * UNIT;
+    if (x < -10 || x > RULER_W + 10) continue;
+    const major = u % 10 === 0;
+    const edge = Math.max(0, Math.min(1, Math.min(x, RULER_W - x) / 150)); // 两端淡出
+    const near = Math.abs(x - RULER_W / 2);
+    ticks.push(
+      <div key={u} style={{
+        position: 'absolute', left: x - 1, bottom: 0, width: 2, height: major ? 30 : 14, borderRadius: 1,
+        background: u < 0 ? alpha(L.ink, 0.08) : major ? alpha(L.ink, 0.5) : alpha(L.ink, 0.22), opacity: edge,
+      }} />,
+    );
+    if (major && u >= 0) {
+      ticks.push(
+        <div key={`l${u}`} style={{
+          position: 'absolute', left: x, bottom: 40, transform: 'translateX(-50%)',
+          ...type(22, 500, { mono: true }), color: L.ink3,
+          opacity: edge * Math.min(1, Math.max(0, (near - 18) / 22)), // 靠近指针的数字让位
+        }}>{u}</div>,
+      );
+    }
+  }
+  return (
+    <div style={{ position: 'absolute', left: 960 - RULER_W / 2, top: 414, width: RULER_W, height: 76, opacity: op }}>
+      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>{ticks}</div>
+      {/* 基线 */}
+      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 1, background: `linear-gradient(90deg, transparent, ${alpha(L.ink, 0.18)} 20%, ${alpha(L.ink, 0.18)} 80%, transparent)` }} />
+      {/* 金针：拨动时泛光 */}
+      <div style={{
+        position: 'absolute', left: RULER_W / 2 - 1.5, bottom: -6, width: 3, height: 50, borderRadius: 2, background: GOLD,
+        boxShadow: `0 0 ${8 + hot * 14}px ${alpha(GOLD, 0.35 + hot * 0.4)}`,
+      }} />
+      <div style={{
+        position: 'absolute', left: RULER_W / 2 - 8, bottom: 44, width: 0, height: 0,
+        borderLeft: '8px solid transparent', borderRight: '8px solid transparent', borderTop: `10px solid ${GOLD}`,
+      }} />
+    </div>
+  );
+};
+
+export const AutolayoutGapDial: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const gap = gapAt(frame);
+  const gapShown = Math.max(0, Math.round(gap / 2) * 2); // 逐格跳数（步进 2 = 拨盘咔哒的颗粒）
+  const v = gapAt(frame + 0.5) - gapAt(frame - 0.5); // gap 速度（px/帧）
+  const moving = Math.min(1, Math.abs(v) / 1.2);
+  // 拨动热度：读数白→金，带 ~6f 余温（松手回稳后慢慢褪回白）
+  let hot = 0;
+  for (let k = 0; k <= 6; k++) hot = Math.max(hot, Math.min(1, Math.abs(gapAt(frame - k + 0.5) - gapAt(frame - k - 0.5)) / 1.5) * (1 - k / 7));
+  // 跳数脉冲：相位由数值本身驱动（每跨一个步进格脉冲一次）× 速度门限
+  const tickPulse = 1 + 0.06 * Math.abs(Math.sin((Math.PI * gap) / 2)) * moving;
+
+  const { total, startX, xs } = rowLayout(gap);
+
+  // 相机：整段极缓推近（smooth，起止无速度突变）
+  const cam = 1 + 0.025 * ramp(frame, 0, AUTOLAYOUT_GAP_DIAL_DURATION, EASE.smooth);
+
+  // 框选描边：spring 从外侧 26px 收拢
+  const selIn = springAt(frame, 4, { damping: 16, stiffness: 140 });
+  const pad = 30;
+  const grow = (1 - selIn) * 26;
+  const selX = startX - pad - grow;
+  const selW = total + pad * 2 + grow * 2;
+  const selY = ROW_Y - BLOCK_H / 2 - pad - grow;
+  const selH = BLOCK_H + pad * 2 + grow * 2;
+
+  const measOp = ramp(frame, 14, 10, EASE.out);
+  const eyebrow = ramp(frame, 4, 18, EASE.snappy);
+  const numIn = ramp(frame, 8, 18, EASE.snappy);
+  const rulerIn = ramp(frame, 12, 16, EASE.out);
+
+  // 读数颜色：白 ↔ 金
+  const numColor = mixHex(L.ink, GOLD, hot);
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden', fontFamily: FONT.sans }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.0 }} fill={{ x: 0.5, y: 1.05 }} horizon={0.62} breathe={0.4}>
+        {/* 画布点阵：围绕导航条清楚、四周隐去 */}
+        <AbsoluteFill style={{
+          backgroundImage: `radial-gradient(${alpha(L.ink, 0.13)} 1.4px, transparent 1.7px)`,
+          backgroundSize: '36px 36px', backgroundPosition: '6px 16px',
+          WebkitMaskImage: 'radial-gradient(ellipse 52% 40% at 50% 62%, #000 20%, transparent 100%)',
+          maskImage: 'radial-gradient(ellipse 52% 40% at 50% 62%, #000 20%, transparent 100%)',
+        }} />
+        {/* 导航条落脚的光池：条子"站"在画布上 */}
+        <div style={{
+          position: 'absolute', left: 260, right: 260, top: ROW_Y + 40, height: 200,
+          background: `radial-gradient(ellipse 50% 50% at 50% 30%, ${alpha(L.light, 0.1)} 0%, transparent 70%)`,
+        }} />
+      </Stage>
+
+      <AbsoluteFill style={{ transform: `scale(${cam})`, transformOrigin: '50% 52%' }}>
+        {/* ── 读数：眉题 + 超大数值 + 单位 ── */}
+        <div style={{
+          position: 'absolute', left: 0, right: 0, top: 150, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 16,
+          opacity: eyebrow, letterSpacing: `${(0.28 + (1 - eyebrow) * 0.4).toFixed(3)}em`,
+          ...type(22, 600, { caps: true }), color: L.ink2,
+        }}>
+          <IconAutoLayout c={L.ink2} />
+          <span style={{ letterSpacing: 'inherit' }}>Auto layout · Gap</span>
+        </div>
+        <div style={{
+          position: 'absolute', left: 0, right: 0, top: 186, height: 220, overflow: 'hidden',
+          display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
+        }}>
+          <div style={{
+            display: 'flex', alignItems: 'baseline', gap: 18,
+            transform: `translateY(${((1 - numIn) * 105).toFixed(2)}%)`,
+          }}>
+            <span style={{
+              ...type(196, 300), letterSpacing: '-0.05em', color: numColor, display: 'inline-block',
+              minWidth: '1.9em', textAlign: 'right', transform: `scale(${tickPulse})`, transformOrigin: '100% 80%',
+              textShadow: hot > 0.05 ? `0 0 ${(40 * hot).toFixed(1)}px ${alpha(GOLD, 0.35 * hot)}` : undefined,
+            }}>{gapShown}</span>
+            <span style={{ ...type(60, 500), color: L.ink3, width: '1.9em' }}>px</span>
+          </div>
+        </div>
+        <Ruler gap={gap} op={rulerIn} hot={hot} />
+
+        {/* ── 导航块（video-shotcraft 站点顶部导航） ── */}
+        {BLOCK_WIDTHS.map((w, i) => {
+          const inP = ramp(frame, 1 + i * 2, 16, EASE.snappy);
+          const active = i === 0;
+          const vx = (i - 2) * v; // 块速度 = (i−2)·dgap/dt：外侧块位移最大
+          const blur = Math.min(9, Math.abs(vx) * 0.5);
+          const fid = `nb${i}`;
+          const dy = (1 - inP) * 34;
+          return (
+            <div key={i} style={{
+              position: 'absolute', left: xs[i], top: ROW_Y - BLOCK_H / 2, width: w, height: BLOCK_H,
+              opacity: inP, transform: `translateY(${dy.toFixed(2)}px)`,
+            }}>
+              {blur > 0.5 && (
+                <svg width={0} height={0} style={{ position: 'absolute' }} aria-hidden>
+                  <filter id={fid} x="-20%" y="-10%" width="140%" height="120%" colorInterpolationFilters="sRGB">
+                    <feGaussianBlur stdDeviation={`${blur.toFixed(2)} 0`} />
+                  </filter>
+                </svg>
+              )}
+              <div style={{
+                position: 'absolute', inset: 0, boxSizing: 'border-box', borderRadius: 24,
+                background: active ? 'linear-gradient(180deg, #fbfbf8, #e6e6e1)' : 'linear-gradient(180deg, #212327, #17181b)',
+                border: active ? '1px solid rgba(255,255,255,0.7)' : `1px solid ${alpha('#ffffff', 0.09)}`,
+                boxShadow: active
+                  ? `inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(0,0,0,0.08), ${softShadow(18, { color: '#000000', strength: 2.4 })}`
+                  : `inset 0 1px 0 ${alpha('#ffffff', 0.08)}, ${softShadow(12, { color: '#000000', strength: 2.4 })}`,
+                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
+                filter: blur > 0.5 ? `url(#${fid})` : undefined,
+              }}>
+                {active && <div style={{ width: 12, height: 12, borderRadius: 99, background: '#111214' }} />}
+                <span style={{ ...type(36, active ? 650 : 520), color: active ? '#0d0e10' : alpha(L.ink, 0.86) }}>{LABELS[i]}</span>
+              </div>
+            </div>
+          );
+        })}
+
+        {/* ── 框选描边 + 8 手柄 + 图层名 ── */}
+        <div style={{
+          position: 'absolute', left: selX, top: selY, width: selW, height: selH, boxSizing: 'border-box',
+          border: `2px solid ${SEL}`, borderRadius: 6, opacity: Math.min(1, selIn * 1.4),
+        }}>
+          <div style={{
+            position: 'absolute', left: -2, top: -50, display: 'flex', alignItems: 'center', gap: 10,
+            ...type(26, 560), color: SEL, whiteSpace: 'nowrap',
+          }}>
+            <IconAutoLayout c={SEL} size={20} />
+            Nav links
+            <span style={{ ...type(22, 500, { mono: true }), color: L.ink3, marginLeft: 8 }}>
+              {Math.round(total)} × {BLOCK_H}
+            </span>
+          </div>
+          {[[0, 0], [0.5, 0], [1, 0], [0, 0.5], [1, 0.5], [0, 1], [0.5, 1], [1, 1]].map(([hx, hy], i) => {
+            const hp = springAt(frame, 7 + i * 1.2, { damping: 13, stiffness: 240 });
+            return (
+              <div key={i} style={{
+                position: 'absolute', left: `${hx * 100}%`, top: `${hy * 100}%`, width: 16, height: 16, marginLeft: -8, marginTop: -8,
+                background: L.bg[1], border: `2px solid ${SEL}`, borderRadius: 3, boxSizing: 'border-box', transform: `scale(${hp})`,
+              }} />
+            );
+          })}
+        </div>
+
+        {/* ── 间距标注：延长线 ×2 + 测量线 + 徽章（全部由 gap 实时重算） ── */}
+        {xs.slice(0, -1).map((x, i) => {
+          const gx = x + BLOCK_WIDTHS[i];
+          const cy = ROW_Y + BLOCK_H / 2 + 74;
+          const extTop = ROW_Y + BLOCK_H / 2 + 34;
+          const span = Math.max(0, gap);
+          const bp = ramp(frame, 14 + i * 2, 12, EASE.snappy);
+          return (
+            <div key={i} style={{ position: 'absolute', left: 0, top: 0, opacity: measOp }}>
+              {[gx, gx + gap].map((lx, k) => (
+                <div key={k} style={{
+                  position: 'absolute', left: lx - 0.75, top: extTop, width: 1.5, height: 58,
+                  backgroundImage: `linear-gradient(${GOLD} 55%, transparent 55%)`, backgroundSize: '1.5px 7px', opacity: 0.7,
+                }} />
+              ))}
+              <div style={{ position: 'absolute', left: gx, top: cy - 1, width: span, height: 2, background: GOLD, boxShadow: `0 0 10px ${alpha(GOLD, 0.4)}` }} />
+              <div style={{ position: 'absolute', left: gx - 1, top: cy - 8, width: 2, height: 16, background: GOLD }} />
+              <div style={{ position: 'absolute', left: gx + gap - 1, top: cy - 8, width: 2, height: 16, background: GOLD }} />
+              <div style={{
+                position: 'absolute', left: gx + gap / 2, top: cy + 20,
+                transform: `translateX(-50%) translateY(${((1 - bp) * 10).toFixed(1)}px) scale(${(tickPulse * (0.7 + 0.3 * bp)).toFixed(3)})`,
+                opacity: bp, minWidth: 64, textAlign: 'center', boxSizing: 'border-box', padding: '6px 14px', borderRadius: 10,
+                background: GOLD, color: L.onAccent, ...type(28, 700), lineHeight: 1.1,
+                boxShadow: `inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 18px -6px ${alpha(GOLD, 0.6)}`,
+              }}>{gapShown}</div>
+            </div>
+          );
+        })}
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/interaction/canvas-materialize-moves/DiagramCascadeBuild.tsx

@@ -0,0 +1,350 @@
+// diagram-cascade-build —— miro-promo 104–116s
+// prompt 打字 → 结构图逐层级联生成（根 → 2 子 → 4 孙），连线先于节点生长，成树后整棵呼吸一拍。
+//
+// 第二轮重设计（极光暗场 · AI 画布"一句话长出一棵树"）：
+// - look = aurora（深紫夜 · 紫粉光）。主角是"生长"本身：每条连线都带一颗发光的彗星头领跑，
+//   线头到达子端口的那一帧子节点才从端口处"被拉出来"（缩放原点 = 节点顶边中点）——线牵节点，因果可见。
+// - 生成源头清楚：prompt 条（video-shotcraft 的 AI 命令条，36px 大字）提交后描边变成流动的紫粉渐变（生成中），
+//   从 prompt 条底部先滴下一条线接到根节点——树是从这句话里长出来的；生成完毕描边落定、右侧状态变成"7 tables"。
+// - 节点做成为镜头设计的 ER 表卡：34px 表名 + 两行 mono 字段（PK/FK 小签），根节点用渐变描边当主角；
+//   其余是带色相的深紫玻璃面板 + 发丝线 + 顶部内高光 + 两层软阴影。
+// - 相机：开场推近在 prompt 条上（1.3× 居中，读字），提交后随树生长 smooth 拉远到 1.0 揭示整体结构（crane-back），
+//   全程平滑无速度突变；成树后以树心为原点呼吸 1→1.03→1，背后极光同步亮一档。
+//
+// 时间表（30fps，共 180f）：
+//   0–10    舞台 + prompt 条落下（空条 + 光标闪）
+//   8–44    打字 "Map the data model for Shotcraft"（每字 1–2f 不均匀，像真人敲）
+//   46–50   敲完：描边转紫确认；48f 按下提交键（scale 0.9 → 回弹）
+//   50–136  生成中：描边流光；50f 起相机 1.3→1.0 拉远（smooth，72f），prompt 条从画面中心升到顶部
+//   54      prompt 底部滴线 → 62f 根节点从端口拉出（spring damping 14）
+//   82/104  第 1 / 2 层：线先行 10f（16f ease-out + 彗星头），同层兄弟错峰 5f
+//   ~128    末节点落定 → 状态 "7 tables · 6 links"、描边流光收束
+//   138–166 整棵呼吸一拍 + 极光亮一档
+//   166–180 落定 hold：完整海报
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, mix, ramp, softShadow } from '../../_fixtures/Polish';
+import { Dust, LOOKS, Stage, alpha, springAt, type } from '../../_fixtures/Look';
+
+export const DIAGRAM_CASCADE_BUILD_DURATION = 180;
+
+const L = LOOKS.aurora;
+const A1 = L.accent; // 紫
+const A2 = L.accent2; // 粉（点缀：渐变另一端）
+
+const PROMPT = 'Map the data model for Shotcraft'; // 与原句同节奏：提交帧仍是 50f
+const TYPE_START = 8;
+// 每个字符的敲击间隔（帧）：确定性"人手节奏"——词间空格多停半拍
+const charGap = (i: number) => (PROMPT[i] === ' ' ? 1.7 : 0.95 + 0.25 * Math.abs(Math.sin(i * 2.17)));
+const CHAR_T: number[] = [];
+{
+  let t = TYPE_START;
+  for (let i = 0; i < PROMPT.length; i++) {
+    t += charGap(i);
+    CHAR_T.push(t);
+  }
+}
+const TYPE_END = CHAR_T[CHAR_T.length - 1];
+const SUBMIT = Math.round(TYPE_END) + 4;
+
+// ── 树布局（画布坐标，节点中心）──
+const NODE_W = 344;
+const NODE_H = 158;
+type Field = [string, string, '' | 'PK' | 'FK'];
+type Node = { id: number; x: number; y: number; level: number; parent: number; name: string; fields: Field[] };
+const NODES: Node[] = [
+  // video-shotcraft 自己的数据模型：成片工程 → 分镜 / 渲染任务 → 镜头、配方卡、输出、预设
+  { id: 0, x: 960, y: 372, level: 0, parent: -1, name: 'Project', fields: [['id', 'uuid', 'PK'], ['title', 'text', '']] },
+  { id: 1, x: 540, y: 608, level: 1, parent: 0, name: 'Storyboard', fields: [['id', 'uuid', 'PK'], ['proj_id', 'uuid', 'FK']] },
+  { id: 2, x: 1380, y: 608, level: 1, parent: 0, name: 'RenderJob', fields: [['id', 'uuid', 'PK'], ['proj_id', 'uuid', 'FK']] },
+  { id: 3, x: 320, y: 852, level: 2, parent: 1, name: 'Shot', fields: [['board_id', 'uuid', 'FK'], ['frames', 'int', '']] },
+  { id: 4, x: 760, y: 852, level: 2, parent: 1, name: 'Recipe', fields: [['shot_id', 'uuid', 'FK'], ['move', 'enum', '']] },
+  { id: 5, x: 1160, y: 852, level: 2, parent: 2, name: 'Output', fields: [['job_id', 'uuid', 'FK'], ['codec', 'text', '']] },
+  { id: 6, x: 1600, y: 852, level: 2, parent: 2, name: 'Preset', fields: [['id', 'uuid', 'PK'], ['fps', 'int', '']] },
+];
+const PROMPT_Y = 96; // prompt 条顶
+const PROMPT_H = 100;
+const ROOT_DRIP = SUBMIT + 6; // 滴线起笔
+const CASCADE_START = SUBMIT + 14; // 根节点出现
+const LEVEL_GAP = 22;
+const SIBLING_STAGGER = 5;
+const LEAD = 10; // 线比子节点早到
+const EDGE_DUR = 16;
+
+const nodeStart = (n: Node) => {
+  if (n.level === 0) return CASCADE_START;
+  const siblingIdx = NODES.filter((m) => m.level === n.level && m.id < n.id).length;
+  return CASCADE_START + n.level * LEVEL_GAP + siblingIdx * SIBLING_STAGGER;
+};
+const LAST = nodeStart(NODES[NODES.length - 1]);
+const DONE = LAST + 12;
+const BREATHE = DONE + 10;
+
+// ── 圆角折线（父底端口 → 下探 → 横移 → 下探到子顶端口），用 SVG 圆弧，长度可精确计算 ──
+const R = 22;
+const edgeGeom = (p: Node, c: Node) => {
+  const x1 = p.x, y1 = p.y + NODE_H / 2 + 8, x2 = c.x, y2 = c.y - NODE_H / 2 - 8;
+  const my = (y1 + y2) / 2;
+  const dir = Math.sign(x2 - x1);
+  const r = Math.min(R, Math.abs(x2 - x1) / 2);
+  const sweep1 = dir > 0 ? 0 : 1;
+  const sweep2 = dir > 0 ? 1 : 0;
+  const d = `M ${x1} ${y1} L ${x1} ${my - r} A ${r} ${r} 0 0 ${sweep1} ${x1 + dir * r} ${my} L ${x2 - dir * r} ${my} A ${r} ${r} 0 0 ${sweep2} ${x2} ${my + r} L ${x2} ${y2}`;
+  const s1 = my - r - y1, a = (Math.PI * r) / 2, h = Math.abs(x2 - x1) - 2 * r, s3 = y2 - my - r;
+  const len = s1 + a + h + a + s3;
+  // 沿路径弧长 u（px）取点：给彗星头定位
+  const at = (u: number) => {
+    if (u <= s1) return { x: x1, y: y1 + u };
+    u -= s1;
+    if (u <= a) { const th = u / r; return { x: x1 + dir * r * (1 - Math.cos(th)), y: my - r + r * Math.sin(th) }; }
+    u -= a;
+    if (u <= h) return { x: x1 + dir * (r + u), y: my };
+    u -= h;
+    if (u <= a) { const th = u / r; return { x: x2 - dir * r + dir * r * Math.sin(th), y: my + r - r * Math.cos(th) }; }
+    u -= a;
+    return { x: x2, y: my + r + Math.min(u, s3) };
+  };
+  return { d, len, at };
+};
+
+// ── 小图标 ──
+const SparkIcon: React.FC<{ c: string; size?: number }> = ({ c, size = 34 }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <path d="M12 2.5l2.1 6.4 6.4 2.1-6.4 2.1L12 19.5l-2.1-6.4L3.5 11l6.4-2.1z" fill={c} />
+    <path d="M19 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z" fill={c} opacity={0.6} />
+  </svg>
+);
+const TableIcon: React.FC<{ c: string }> = ({ c }) => (
+  <svg width={26} height={26} viewBox="0 0 18 18" fill="none">
+    <rect x={2} y={3} width={14} height={12} rx={2.5} stroke={c} strokeWidth={1.5} />
+    <path d="M2 7.5h14M7 7.5V15" stroke={c} strokeWidth={1.5} />
+  </svg>
+);
+
+// ── ER 表卡 ──
+const EntityCard: React.FC<{ n: Node; t: number }> = ({ n, t }) => {
+  const root = n.level === 0;
+  const head = ramp(t, 3, 8, EASE.out);
+  const row = (i: number) => ramp(t, 7 + i * 3, 9, EASE.out);
+  return (
+    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column' }}>
+      <div style={{
+        height: 66, display: 'flex', alignItems: 'center', gap: 14, padding: '0 24px',
+        borderBottom: `1px solid ${alpha('#ffffff', root ? 0.12 : 0.07)}`,
+        opacity: head, transform: `translateY(${((1 - head) * 6).toFixed(2)}px)`,
+      }}>
+        <TableIcon c={root ? A1 : L.ink3} />
+        <span style={{ ...type(34, 650), color: L.ink }}>{n.name}</span>
+      </div>
+      <div style={{ padding: '14px 24px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {n.fields.map(([k, ty, key], i) => (
+          <div key={k} style={{
+            display: 'flex', alignItems: 'center', gap: 10, height: 26, ...type(22, 500, { mono: true }),
+            opacity: row(i), transform: `translateX(${((1 - row(i)) * -8).toFixed(2)}px)`,
+          }}>
+            <span style={{ color: L.ink2 }}>{k}</span>
+            {key && (
+              <span style={{
+                ...type(15, 700, { caps: true }), padding: '3px 7px', borderRadius: 6,
+                color: key === 'PK' ? A1 : A2, background: alpha(key === 'PK' ? A1 : A2, 0.14),
+              }}>{key}</span>
+            )}
+            <span style={{ marginLeft: 'auto', color: L.ink3 }}>{ty}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const DiagramCascadeBuild: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ── prompt ──
+  let typed = 0;
+  while (typed < PROMPT.length && CHAR_T[typed] <= frame) typed++;
+  const caretOn = frame < SUBMIT && (typed < PROMPT.length || Math.floor((frame - TYPE_END) / 7) % 2 === 0);
+  const confirm = ramp(frame, TYPE_END, 6, EASE.out);
+  const press = frame < SUBMIT ? 0 : frame < SUBMIT + 3 ? ramp(frame, SUBMIT, 3, EASE.out) : 1 - ramp(frame, SUBMIT + 3, 10, EASE.out);
+  const promptIn = ramp(frame, 0, 14, EASE.snappy);
+  const generating = ramp(frame, SUBMIT, 8, EASE.out) * (1 - ramp(frame, DONE, 12, EASE.out));
+  const doneIn = ramp(frame, DONE, 14, EASE.snappy);
+  const flow = Math.max(0, frame - SUBMIT) * 0.012; // 描边流光相位
+
+  // ── 相机：推近 prompt → 提交后拉远揭示全树 ──
+  const pull = ramp(frame, SUBMIT + 2, 72, EASE.smooth);
+  const cam = mix(1.3, 1, pull);
+  const camY = mix(340, 0, pull); // 推近时把 prompt 条拉到画面正中
+
+  // ── 成树呼吸 ──
+  const br = ramp(frame, BREATHE, 14, EASE.smooth) - ramp(frame, BREATHE + 14, 14, EASE.smooth);
+  const breathe = 1 + 0.03 * br;
+  const auroraUp = ramp(frame, BREATHE - 6, 24, EASE.out);
+
+  const drip = ramp(frame, ROOT_DRIP, 8, EASE.out);
+  const root = NODES[0];
+  const dripY1 = PROMPT_Y + PROMPT_H + 4;
+  const dripY2 = root.y - NODE_H / 2 - 8;
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden', fontFamily: FONT.sans }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.05 }} fill={{ x: 0.82, y: 0.95 }} breathe={0.5}>
+        {/* 树后的极光：随生成逐渐亮起，成树时再亮一档 */}
+        <div style={{
+          position: 'absolute', left: 260, right: 260, top: 380, height: 640,
+          background: `radial-gradient(ellipse 50% 50% at 35% 55%, ${alpha(A1, 0.1 + 0.12 * auroraUp)} 0%, transparent 70%), radial-gradient(ellipse 45% 45% at 70% 60%, ${alpha(A2, 0.05 + 0.08 * auroraUp)} 0%, transparent 70%)`,
+          opacity: ramp(frame, SUBMIT, 60, EASE.out),
+        }} />
+        {/* 画布点阵 */}
+        <AbsoluteFill style={{
+          backgroundImage: `radial-gradient(${alpha(L.ink, 0.12)} 1.4px, transparent 1.7px)`,
+          backgroundSize: '40px 40px', backgroundPosition: '0 16px',
+          WebkitMaskImage: 'radial-gradient(ellipse 60% 62% at 50% 58%, #000 25%, transparent 100%)',
+          maskImage: 'radial-gradient(ellipse 60% 62% at 50% 58%, #000 25%, transparent 100%)',
+        }} />
+        <Dust look={L} count={22} seed={5} drift={0.18} opacity={0.35} />
+      </Stage>
+
+      <AbsoluteFill style={{ transform: `translateY(${camY.toFixed(2)}px) scale(${cam.toFixed(4)})`, transformOrigin: '50% 14%' }}>
+        {/* ── prompt 条：渐变描边（生成中流动）+ 内面板 ── */}
+        <div style={{
+          position: 'absolute', left: 960 - 560, top: PROMPT_Y, width: 1120, height: PROMPT_H, borderRadius: 50,
+          padding: 2, boxSizing: 'border-box',
+          background: alpha(A1, 0.14 + 0.4 * confirm),
+          boxShadow: `0 0 ${(30 + 40 * generating).toFixed(1)}px ${alpha(A1, 0.1 + 0.25 * generating)}, ${softShadow(24, { color: L.shadow, strength: 2.4 })}`,
+          opacity: promptIn, transform: `translateY(${((1 - promptIn) * -20).toFixed(2)}px)`,
+        }}>
+          {/* 生成中：流动的紫粉渐变描边；完成后留一道静止的渐变边 */}
+          <div style={{
+            position: 'absolute', inset: 0, borderRadius: 50,
+            background: `linear-gradient(90deg, ${A1}, ${A2}, ${A1}, ${A2}, ${A1})`, backgroundSize: '300% 100%',
+            backgroundPosition: `${(-flow * 100).toFixed(2)}% 0`, opacity: Math.max(generating, 0.55 * doneIn),
+          }} />
+          <div style={{
+            position: 'relative', width: '100%', height: '100%', borderRadius: 48, boxSizing: 'border-box',
+            background: `linear-gradient(180deg, ${L.surface2}, ${L.surface})`,
+            boxShadow: `inset 0 1px 0 ${alpha('#ffffff', 0.08)}`,
+            display: 'flex', alignItems: 'center', padding: '0 16px 0 30px',
+          }}>
+            <div style={{ marginRight: 20, flexShrink: 0, display: 'grid', placeItems: 'center', filter: `drop-shadow(0 0 ${8 + 10 * generating}px ${alpha(A1, 0.6)})` }}>
+              <SparkIcon c={A1} />
+            </div>
+            <span style={{ ...type(36, 520), color: L.ink, whiteSpace: 'nowrap' }}>
+              {PROMPT.slice(0, typed)}
+              <span style={{
+                display: 'inline-block', width: 3, height: 40, marginLeft: 4, verticalAlign: -7, borderRadius: 2,
+                background: A1, opacity: caretOn ? 1 : 0,
+              }} />
+            </span>
+            {/* 右侧：提交键 → 生成中 → 完成状态 */}
+            <div style={{ marginLeft: 'auto', position: 'relative', height: 68, display: 'flex', alignItems: 'center' }}>
+              <div style={{
+                position: 'absolute', right: 0, top: 0, whiteSpace: 'nowrap', height: 68, display: 'flex', alignItems: 'center', gap: 12,
+                opacity: doneIn, transform: `translateY(${((1 - doneIn) * 12).toFixed(2)}px)`,
+                ...type(28, 560), color: L.ink2, paddingRight: 14,
+              }}>
+                <svg width={28} height={28} viewBox="0 0 24 24" fill="none">
+                  <circle cx={12} cy={12} r={10} fill={alpha(A1, 0.18)} />
+                  <path d="M7.5 12.3l3 3 6-6.3" stroke={A1} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+                7 tables · 6 links
+              </div>
+              <div style={{
+                width: 68, height: 68, borderRadius: 34, display: 'grid', placeItems: 'center',
+                background: confirm > 0 ? `linear-gradient(135deg, ${A1}, ${A2})` : alpha('#ffffff', 0.06),
+                opacity: (0.4 + 0.6 * confirm) * (1 - doneIn),
+                transform: `scale(${(1 - 0.1 * press) * (1 - 0.3 * doneIn)})`,
+                boxShadow: confirm > 0.5 ? `0 6px 20px -6px ${alpha(A2, 0.7)}` : 'none',
+              }}>
+                <svg width={30} height={30} viewBox="0 0 24 24" fill="none">
+                  <path d="M12 19V5M6 11l6-6 6 6" stroke={confirm > 0.5 ? L.onAccent : L.ink3} strokeWidth={2.6} strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* ── 树（呼吸以树心为原点） ── */}
+        <div style={{ position: 'absolute', inset: 0, transform: `scale(${breathe.toFixed(4)})`, transformOrigin: '960px 620px' }}>
+          <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
+            <defs>
+              <linearGradient id="dcbEdge" x1="0" y1="300" x2="0" y2="800" gradientUnits="userSpaceOnUse">
+                <stop offset="0" stopColor={A1} stopOpacity={0.85} />
+                <stop offset="1" stopColor={A2} stopOpacity={0.7} />
+              </linearGradient>
+              <radialGradient id="dcbHead">
+                <stop offset="0" stopColor="#ffffff" stopOpacity={1} />
+                <stop offset="0.35" stopColor={A2} stopOpacity={0.9} />
+                <stop offset="1" stopColor={A1} stopOpacity={0} />
+              </radialGradient>
+            </defs>
+            {/* prompt → 根的滴线 */}
+            {drip > 0 && (
+              <g>
+                <line x1={960} y1={dripY1} x2={960} y2={mix(dripY1, dripY2, drip)} stroke="url(#dcbEdge)" strokeWidth={2.5} strokeLinecap="round" strokeDasharray="2 7" />
+                {drip < 1 && <circle cx={960} cy={mix(dripY1, dripY2, drip)} r={16} fill="url(#dcbHead)" />}
+              </g>
+            )}
+            {NODES.filter((n) => n.parent >= 0).map((n) => {
+              const g = edgeGeom(NODES[n.parent], n);
+              const start = nodeStart(n) - LEAD;
+              const grow = ramp(frame, start, EDGE_DUR, EASE.out);
+              if (grow <= 0) return null;
+              const tip = g.at(grow * g.len);
+              const headOp = 1 - ramp(frame, start + EDGE_DUR - 4, 8, EASE.out);
+              const port = ramp(frame, start + EDGE_DUR - 6, 10, EASE.overshoot);
+              return (
+                <g key={n.id}>
+                  {/* 柔光底线 + 实线 */}
+                  <path d={g.d} stroke={A1} strokeOpacity={0.18} strokeWidth={9} fill="none" strokeLinecap="round"
+                    strokeDasharray={`${g.len} ${g.len}`} strokeDashoffset={g.len * (1 - grow)} />
+                  <path d={g.d} stroke="url(#dcbEdge)" strokeWidth={2.5} fill="none" strokeLinecap="round"
+                    strokeDasharray={`${g.len} ${g.len}`} strokeDashoffset={g.len * (1 - grow)} />
+                  {headOp > 0 && <circle cx={tip.x} cy={tip.y} r={18} fill="url(#dcbHead)" opacity={headOp} />}
+                  <circle cx={n.x} cy={n.y - NODE_H / 2 - 8} r={6 * port} fill={L.bg[1]} stroke={A2} strokeWidth={2.5} />
+                </g>
+              );
+            })}
+            {/* 父端口：第一条出线起笔时出现 */}
+            {NODES.filter((n) => n.level < 2).map((n) => {
+              const firstChild = NODES.find((c) => c.parent === n.id)!;
+              const port = ramp(frame, nodeStart(firstChild) - LEAD - 4, 8, EASE.overshoot);
+              return <circle key={`p${n.id}`} cx={n.x} cy={n.y + NODE_H / 2 + 8} r={6 * port} fill={L.bg[1]} stroke={A1} strokeWidth={2.5} />;
+            })}
+            {/* 根的顶端口（接滴线） */}
+            <circle cx={960} cy={dripY2} r={6 * ramp(frame, ROOT_DRIP + 4, 8, EASE.overshoot)} fill={L.bg[1]} stroke={A1} strokeWidth={2.5} />
+          </svg>
+
+          {NODES.map((n) => {
+            const start = nodeStart(n);
+            if (frame < start) return null;
+            const pop = springAt(frame, start, { damping: 14, stiffness: 190 });
+            const op = ramp(frame, start, 5, EASE.linear);
+            const lift = (1 - Math.min(1, pop)) * 22; // 弹出时离地更高，落定阴影收紧
+            const isRoot = n.level === 0;
+            return (
+              <div key={n.id} style={{
+                position: 'absolute', left: n.x - NODE_W / 2, top: n.y - NODE_H / 2, width: NODE_W, height: NODE_H,
+                borderRadius: 22, padding: isRoot ? 2 : 0, boxSizing: 'border-box',
+                background: isRoot ? `linear-gradient(135deg, ${A1}, ${A2})` : undefined,
+                boxShadow: `${softShadow(10 + lift, { color: L.shadow, strength: 2.6 })}${isRoot ? `, 0 0 50px ${alpha(A1, 0.25 + 0.2 * br)}` : ''}`,
+                opacity: op,
+                // 从顶端口"拉出"：缩放原点 = 顶边中点
+                transform: `translateY(${((1 - pop) * -18).toFixed(2)}px) scale(${(0.7 + 0.3 * pop).toFixed(4)})`, transformOrigin: '50% 0%',
+              }}>
+                <div style={{
+                  position: 'relative', width: '100%', height: '100%', borderRadius: isRoot ? 20 : 22, overflow: 'hidden', boxSizing: 'border-box',
+                  background: isRoot ? `linear-gradient(180deg, #2a2045, ${L.surface})` : `linear-gradient(180deg, ${alpha('#2a2340', 0.92)}, ${alpha(L.surface, 0.94)})`,
+                  border: isRoot ? undefined : `1px solid ${alpha('#ffffff', 0.09)}`,
+                  boxShadow: `inset 0 1px 0 ${alpha('#ffffff', isRoot ? 0.14 : 0.08)}`,
+                }}>
+                  <EntityCard n={n} t={frame - start} />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};