dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/OrbFlylineRelay.tsx

@@ -0,0 +1,241 @@
+// orb-flyline-relay｜光斑飞线接力——氛围层（光斑）与事件层（飞线）同帧共振：飞线落点那一帧，
+// 节点背后的光斑一起涨亮一拍，背景给前景"搭腔"。
+//
+// 第二轮重设计（午夜接力 · 三颗玻璃节点）：
+// - look = midnight（深蓝夜 · 电光蓝 · 青）。三张灰卡换成 video-shotcraft 出片流程的三颗 240px 玻璃节点
+//   「Brief → Storyboard → Ship」（品牌轮由语音 AI「Tessel」的 Listen → Understand → Act 换来），横向起伏排布（中间高、两边低），飞线是节点之间的
+//   一跳一跳的弧——读作"接力"而不是连线图。每颗节点背后各有一团 720–820px 的光斑（电光蓝 / 青 / 堇蓝），
+//   连同节点一起轻微漂移。
+// - 共振（组合命门）：飞线落点帧 = 节点点亮帧 = 背后光斑 surge 起点帧（同一个常量），光斑 5f 涨到
+//   1+1.6 倍亮度并放大 12%、15f 消散；节点同帧描边脉冲 + 一圈冲击环。错开 ≥2f 就读不出"搭腔"。
+// - 飞线：白芯 + 青蓝两层辉光，亮头领跑带彗尾，生长曲线起步蓄力、进站减速；到站 4f 后整条线 14f 消散
+//   成一串细点虚线（能量已经交出去，只留下路径），与 flyline-arc 的"常驻线"区分。
+// - 收束：C 点亮后 72px 标题「Say it once. video-shotcraft does the rest.」逐词升起（品牌名用青色），
+//   光斑 110–140f out-sine 收敛冻结，末 25f 真静止。
+// - 镜头：全程 1→1.04 极缓推进，焦点随接力从 A 漂到 C（起止无速度突变）。
+//
+// 时间表（30fps，共 165f）：
+//   0–20     光斑亮起，三颗节点错峰升起（0 / 4 / 8f）；A 10f 点亮（自带光斑）
+//   22–48    线 1 A→B（26f）
+//   48       B 点亮 = B 光斑 surge（同帧）
+//   58–82    线 2 B→C（24f）
+//   82       C 点亮 = C 光斑 surge（同帧）
+//   92–122   标题逐词升起；两条线已消散为细点虚线
+//   110–140  光斑漂移 out-sine 收敛冻结
+//   140–165  真静止 hold
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, bezier, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, type } from '../../_fixtures/Look';
+import { BRAND } from '../../_fixtures/Brand';
+
+export const ORB_FLYLINE_RELAY_DURATION = 165; // 5.5s：动作 f98 前结束、光斑 f140 冻结、末 25f 真静止
+
+const L = LOOKS.midnight;
+const TAU = Math.PI * 2;
+
+type Pt = { x: number; y: number };
+const bez = (p0: Pt, p1: Pt, p2: Pt, p3: Pt, t: number): Pt => {
+  const u = 1 - t;
+  return {
+    x: u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x,
+    y: u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y,
+  };
+};
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+const grow = bezier(0.45, 0, 0.2, 1);
+
+// 漂移时间：0–110 同速，110–140 out-sine 收敛（起始斜率 = 1），之后冻结
+const T0 = 110, TS = 30;
+const drift = (f: number) => (f <= T0 ? f : T0 + (2 * TS / Math.PI) * Math.sin((Math.PI / 2) * Math.min(1, (f - T0) / TS)));
+
+// ───────────── 节点 ─────────────
+const R = 120;
+const LIT_B = 48; // 线 1 落点 = B 点亮 = B 光斑 surge
+const LIT_C = 82; // 线 2 落点 = C 点亮 = C 光斑 surge
+
+type NodeDef = { x: number; y: number; label: string; sub: string; litAt: number; inAt: number; orb: string; orbSize: number; seed: number; icon: React.ReactNode };
+const ICON_STROKE = { fill: 'none', strokeWidth: 7, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
+const NODES: NodeDef[] = [
+  {
+    x: 400, y: 470, label: 'Brief', sub: 'One prompt · 1 page', litAt: 10, inAt: 0, orb: '#3d63ff', orbSize: 820, seed: 1,
+    icon: <g {...ICON_STROKE}><rect x={-18} y={-44} width={36} height={60} rx={18} /><path d="M-34 0 C -34 22 -18 34 0 34 C 18 34 34 22 34 0 M0 34 V48" /></g>,
+  },
+  {
+    x: 960, y: 380, label: 'Storyboard', sub: '8 shots · beat-synced', litAt: LIT_B, inAt: 4, orb: L.accent2, orbSize: 760, seed: 2,
+    icon: <g {...ICON_STROKE}><path d="M0 -44 C 4 -14 14 -4 44 0 C 14 4 4 14 0 44 C -4 14 -14 4 -44 0 C -14 -4 -4 -14 0 -44 Z" /><path d="M30 -38 v14 M23 -31 h14" /></g>,
+  },
+  {
+    x: 1520, y: 470, label: 'Ship', sub: 'launch-film.mp4', litAt: LIT_C, inAt: 8, orb: '#7f74ff', orbSize: 720, seed: 3,
+    icon: <g {...ICON_STROKE}><path d="M-40 4 L 38 -34 L 14 40 L 2 12 Z M2 12 L 38 -34" /></g>,
+  },
+];
+
+// 涨亮一拍：5f out 起升，15f 消散
+const surge = (f: number, at: number) => (f < at ? 0 : f <= at + 5 ? ramp(f, at, 5, EASE.out) : 1 - ramp(f, at + 5, 15, EASE.swift));
+
+const edge = (n: NodeDef, deg: number): Pt => ({ x: n.x + R * Math.cos((deg * Math.PI) / 180), y: n.y + R * Math.sin((deg * Math.PI) / 180) });
+
+const LINES = [
+  { start: LIT_B - 26, dur: 26, p0: edge(NODES[0], -48), p3: edge(NODES[1], 200), lift: 170 },
+  { start: LIT_C - 24, dur: 24, p0: edge(NODES[1], -20), p3: edge(NODES[2], 228), lift: 170 },
+].map((l) => {
+  const dx = l.p3.x - l.p0.x;
+  const top = Math.min(l.p0.y, l.p3.y) - l.lift;
+  return { ...l, p1: { x: l.p0.x + dx * 0.22, y: top }, p2: { x: l.p0.x + dx * 0.78, y: top } };
+});
+
+const N = 80;
+const Flyline: React.FC<{ f: number; ln: typeof LINES[number] }> = ({ f, ln }) => {
+  const { start, dur, p0, p1, p2, p3 } = ln;
+  if (f < start) return null;
+  const e = grow(Math.min(1, (f - start) / dur));
+  const growing = f < start + dur;
+  const fade = 1 - ramp(f, start + dur + 4, 14, EASE.swift); // 到站 4f 后整条消散
+  const dots = ramp(f, start + dur + 6, 14, EASE.out); // 留下细点虚线路径
+  const pts: Pt[] = [];
+  const n = Math.max(2, Math.ceil(e * N) + 1);
+  for (let i = 0; i < n; i++) pts.push(bez(p0, p1, p2, p3, Math.min(i / N, e)));
+  const head = bez(p0, p1, p2, p3, e);
+  pts[pts.length - 1] = head;
+  const poly = pts.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+  const segs = [];
+  if (fade > 0) {
+    for (let i = 0; i < pts.length - 1; i++) {
+      const k = Math.min(i / N, e) / Math.max(e, 0.001);
+      segs.push(<line key={i} x1={pts[i].x} y1={pts[i].y} x2={pts[i + 1].x} y2={pts[i + 1].y} stroke="#f2f7ff" strokeWidth={3.2} strokeLinecap="butt" strokeOpacity={(0.12 + 0.88 * k * k) * fade} />);
+    }
+  }
+  const comet = pts.slice(Math.max(0, pts.length - 9)).map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+  const full = Array.from({ length: 23 }, (_, i) => bez(p0, p1, p2, p3, (i + 1) / 24));
+  return (
+    <g>
+      {dots > 0 && full.map((p, i) => <circle key={`d${i}`} cx={p.x} cy={p.y} r={2.6} fill={L.accent} opacity={dots * 0.55} />)}
+      {fade > 0 && (
+        <g>
+          <polyline points={poly} fill="none" stroke={L.accent} strokeWidth={20} strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.12 * fade} />
+          <polyline points={poly} fill="none" stroke={L.accent2} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.3 * fade} />
+          {segs}
+        </g>
+      )}
+      {growing && (
+        <g>
+          <polyline points={comet} fill="none" stroke="#ffffff" strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.6} />
+          <circle cx={head.x} cy={head.y} r={44} fill="url(#relayHalo)" />
+          <circle cx={head.x} cy={head.y} r={7.5} fill="#ffffff" />
+        </g>
+      )}
+    </g>
+  );
+};
+
+const Node: React.FC<{ f: number; n: NodeDef; ox: number; oy: number }> = ({ f, n, ox, oy }) => {
+  const enter = ramp(f, n.inAt, 22, EASE.snappy);
+  const lit = ramp(f, n.litAt, 8, EASE.out);
+  const pulse = f < n.litAt ? 0 : f <= n.litAt + 6 ? ramp(f, n.litAt, 6, EASE.out) : mix(1, 0.35, ramp(f, n.litAt + 6, 16, EASE.out));
+  const ring = n.litAt > 20 ? ramp(f, n.litAt, 20, EASE.linear) : 0;
+  const x = n.x + ox, y = n.y + oy + (1 - enter) * 40;
+  const c = n.orb;
+  return (
+    <div style={{ position: 'absolute', left: 0, top: 0, opacity: enter }}>
+      {/* 冲击环 */}
+      {ring > 0 && ring < 1 && (
+        <div style={{
+          position: 'absolute', left: x, top: y, width: 0, height: 0,
+        }}>
+          <div style={{
+            position: 'absolute', left: -R * mix(1, 2.3, EASE.snappy(ring)), top: -R * mix(1, 2.3, EASE.snappy(ring)),
+            width: 2 * R * mix(1, 2.3, EASE.snappy(ring)), height: 2 * R * mix(1, 2.3, EASE.snappy(ring)), borderRadius: '50%',
+            border: `${mix(4, 1, ring).toFixed(2)}px solid ${alpha('#e9f6ff', 0.8 * (1 - ring))}`, boxSizing: 'border-box',
+          }} />
+        </div>
+      )}
+      {/* 玻璃节点 */}
+      <div style={{
+        position: 'absolute', left: x - R, top: y - R, width: 2 * R, height: 2 * R, borderRadius: '50%',
+        background: `radial-gradient(circle at 50% 28%, ${alpha('#2a3a66', 0.92)} 0%, ${alpha('#121a30', 0.94)} 62%, ${alpha('#0b1122', 0.96)} 100%)`,
+        boxShadow: `inset 0 0 0 1.5px ${alpha(lit > 0 ? c : '#a0beff', 0.14 + 0.66 * pulse)}, inset 0 2px 0 rgba(255,255,255,0.12), ` +
+          `inset 0 0 ${(50 * lit).toFixed(1)}px ${alpha(c, 0.28 * lit)}, 0 0 ${(70 * pulse).toFixed(1)}px ${alpha(c, 0.5 * pulse)}, 0 40px 80px -30px rgba(0,0,0,0.9)`,
+      }}>
+        <svg width={2 * R} height={2 * R} viewBox="-120 -120 240 240" style={{ position: 'absolute', inset: 0 }}>
+          <g stroke={lit > 0.5 ? '#ffffff' : L.ink3} style={{ filter: lit > 0.5 ? `drop-shadow(0 0 10px ${alpha(c, 0.8)})` : undefined }}>{n.icon}</g>
+        </svg>
+      </div>
+      {/* 标签 */}
+      <div style={{ position: 'absolute', left: x - 260, width: 520, top: y + R + 34, textAlign: 'center' }}>
+        <div style={{ ...type(52, 650), color: lit > 0.5 ? L.ink : L.ink3 }}>{n.label}</div>
+        <div style={{ ...type(32, 450), color: lit > 0.5 ? L.ink2 : alpha(L.ink3, 0.7), marginTop: 10, ...(n.label === 'Ship' ? { fontFamily: FONT.mono, letterSpacing: '0em' } : null) }}>{n.sub}</div>
+      </div>
+    </div>
+  );
+};
+
+export const OrbFlylineRelay: React.FC = () => {
+  const f = useCurrentFrame();
+  const t = drift(f);
+  const cam = 1 + 0.04 * ramp(f, 0, 140, EASE.smooth);
+  const fx = mix(700, 1200, ramp(f, 10, 100, EASE.smooth));
+  const orbIn = 0.3 + 0.7 * ramp(f, 0, 20, EASE.out);
+
+  // 节点与光斑一起轻漂（节点漂得少 = 视差：光斑在后）
+  const offs = NODES.map((n) => {
+    const a = h(n.seed * 7 + 1) * TAU, b = h(n.seed * 7 + 2) * TAU;
+    return {
+      ox: 120 * Math.sin((TAU * t) / (118 + n.seed * 9) + a), oy: 90 * Math.sin((TAU * t) / (134 - n.seed * 11) + b),
+    };
+  });
+
+  const nodeOffs = offs.map((o) => ({ ox: o.ox * 0.22, oy: o.oy * 0.22 })); // 节点只漂 22%：光斑在后、节点在前的视差
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[2] }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: -0.05 }} fill={null} intensity={0.8} />
+
+      <AbsoluteFill style={{ transform: `scale(${cam})`, transformOrigin: `${fx}px 470px` }}>
+        {/* 光斑：每颗节点背后一团；点亮后常亮，落点帧同帧 surge */}
+        {NODES.map((n, i) => {
+          const s = surge(f, n.litAt);
+          const base = n.litAt <= 10 ? 0.4 + 0.6 * ramp(f, n.litAt, 10, EASE.out) : 0.35 + 0.65 * ramp(f, n.litAt, 8, EASE.out);
+          const k = (0.5 * base) * (1 + 1.6 * s);
+          const sz = n.orbSize * (1 + 0.12 * s);
+          const x = n.x + offs[i].ox, y = n.y + offs[i].oy;
+          return (
+            <div key={i} style={{
+              position: 'absolute', left: x - sz / 2, top: y - sz / 2, width: sz, height: sz, borderRadius: '50%', mixBlendMode: 'screen', opacity: orbIn,
+              background: `radial-gradient(circle closest-side, ${alpha(n.orb, Math.min(1, k))} 0%, ${alpha(n.orb, Math.min(1, k * 0.55))} 25%, ${alpha(n.orb, k * 0.22)} 52%, ${alpha(n.orb, k * 0.06)} 76%, ${alpha(n.orb, 0)} 100%)`,
+            }} />
+          );
+        })}
+
+        <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
+          <defs>
+            <radialGradient id="relayHalo">
+              <stop offset="0%" stopColor="rgba(255,255,255,0.75)" />
+              <stop offset="30%" stopColor={alpha(L.accent2, 0.35)} />
+              <stop offset="100%" stopColor={alpha(L.accent, 0)} />
+            </radialGradient>
+          </defs>
+          {/* 飞线坐标跟随节点漂移：端点按节点偏移整体平移 */}
+          {LINES.map((ln, i) => {
+            const a = nodeOffs[i], b = nodeOffs[i + 1];
+            const shift = (p: Pt, w: number) => ({ x: p.x + mix(a.ox, b.ox, w), y: p.y + mix(a.oy, b.oy, w) });
+            const moved = { ...ln, p0: shift(ln.p0, 0), p1: shift(ln.p1, 0.25), p2: shift(ln.p2, 0.75), p3: shift(ln.p3, 1) };
+            return <Flyline key={i} f={f} ln={moved} />;
+          })}
+        </svg>
+
+        {NODES.map((n, i) => <Node key={i} f={f} n={n} ox={nodeOffs[i].ox} oy={nodeOffs[i].oy} />)}
+      </AbsoluteFill>
+
+      {/* 收束标题（不随镜头推进，稳在画面下缘） */}
+      <div style={{ position: 'absolute', left: 0, right: 0, top: 862, textAlign: 'center' }}>
+        <TextReveal text={`Say it once. ${BRAND.name} does the rest.`} by="word" variant="rise" start={92} each={18} gap={3.5}
+          style={{ ...type(72, 700), color: L.ink }}
+          unitStyle={(i) => (i === 3 ? { color: L.accent2 } : {})} />
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/effects/icon-performance-moves/AttentionBounce.tsx

@@ -0,0 +1,279 @@
+// 求关注弹跳（attention-bounce）——macOS Dock 语汇：图标原地连跳讨拍，一次比一次高，镜头被它吸引过去。
+//
+// 第二轮重设计（午后窗光 · 一枚日历图标）：
+// - look = sand（米色暖光 · 赤陶强调）。背景墙上斜打两道百叶窗光（生活方式的午后），画面下缘是一条
+//   贯穿画幅、被画框裁掉两端的磨砂奶油色 Dock；主角是 360px 的 video-shotcraft app 图标——奶油底上
+//   一枚「镜刻」标志（取景框 + 琥珀斜切），比通用铃铛更有辨识度。左右邻居图标（鼠尾草 / 石板蓝 / 沙色 /
+//   炭黑）用低饱和色压住。
+// - 弹跳按真实抛体：4 跳高度 0.35 → 0.6 → 0.85 → 1.2 倍图标高，每跳时长 ∝ √高度（14 / 18 / 22 / 26f），
+//   空中按竖向速度拉长、落地 2f 接触压扁（越跳越重，末跳宽 1.2x 高 0.8x），落点一圈玻璃涟漪 + 几颗溅点。
+// - "被吸引"：第二跳起邻居图标逐渐失焦变淡（rack focus，世界退后），最高那跳镜头 smooth 推近 8%。
+// - 落定：阻尼回弹稳住 → 同帧角标弹出、Dock 下方亮起运行指示点 → 功能面板从图标右上角弹簧展开
+//   （父先到、行晚 3f 错峰），面板文字 ≥32px，结尾帧是一张完整的"New in Shotcraft"海报（一支宣传片的分镜时间线）。
+//
+// 时间表（30fps，共 156f）：
+//   0–12    预备：画面已有 Dock 与图标，镜头极缓推进；6–12f 蹲一下蓄力
+//   12–100  4 跳递增（12 / 28 / 48 / 72f 起跳，100f 末跳落地）；邻居 30–96f 失焦；镜头 72–90f 推近 8%
+//   100–110 落定回弹；角标 100f 弹出；运行点亮起
+//   106–132 面板弹簧展开（106f），三行 114f 起错峰
+//   132–156 hold：极缓推进 + 窗光微漂，干净落定
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, mix, ramp, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, springAt, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const ATTENTION_BOUNCE_DURATION = 156; // 5.2s
+
+const L = LOOKS.sand;
+const ICON = 360; // 图标边长（半屏级）
+const RAD = 82; // squircle 圆角
+const CX = 600; // 主角图标中心 x
+const GROUND = 960; // 图标静止时的底边 y（Dock 内）
+const DOCK_TOP = GROUND - ICON - 30;
+
+// 4 跳：起跳帧、空中时长、峰高（相对图标高）；时长 ∝ √高度（同一重力下的抛体）
+const JUMPS = [
+  { start: 12, dur: 14, peak: 0.35 },
+  { start: 28, dur: 18, peak: 0.6 },
+  { start: 48, dur: 22, peak: 0.85 },
+  { start: 72, dur: 26, peak: 1.2 },
+];
+const LAND = 100; // 末跳落地帧（72 + 26 + 2f 接触余量）
+const LAND_FINAL = JUMPS[3].start + JUMPS[3].dur; // 98
+
+const hs = (n: number) => {
+  const x = Math.sin(n * 91.345 + 47.853) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+// 主角身体状态：离地高度 y、竖向速度（归一化）、接触压扁量
+const body = (f: number) => {
+  let y = 0, v = 0, squash = 0;
+  JUMPS.forEach((j, ji) => {
+    const t = (f - j.start) / j.dur;
+    if (t > 0 && t < 1) {
+      y = j.peak * ICON * 4 * t * (1 - t);
+      v = 1 - 2 * t; // +1 起跳最快 → 0 顶点 → -1 落地最快
+    }
+    // 落地接触 2f：压扁量随跳高递增（末跳 0.2 = 宽 1.2x 高 0.8x）
+    const land = j.start + j.dur;
+    const q = 0.1 + 0.1 * (ji / 3);
+    if (ji < 3 && f >= land && f < land + 2) squash = q * (1 - (f - land) / 2) + q * 0.4;
+  });
+  // 起跳前蹲一下
+  if (f >= 6 && f < 12) squash = 0.08 * EASE.out((f - 6) / 6);
+  // 末跳落地：压扁 → 回拉 → 稳住（阻尼余弦）
+  if (f >= LAND_FINAL) {
+    const k = f - LAND_FINAL;
+    squash = 0.2 * Math.exp(-k * 0.38) * Math.cos(k * 0.72);
+  }
+  return { y, v, squash };
+};
+
+// 落地帧列表（涟漪 / 溅点用）
+const LANDINGS = JUMPS.map((j, i) => ({ at: j.start + j.dur, k: i }));
+
+// ───────────── 图标 ─────────────
+
+// video-shotcraft app 图标：奶油 squircle + 亮底版「镜刻」标志（标志本身不加光 / 影，柔光盖在图标面上）
+const ShotcraftIcon: React.FC<{ size: number }> = ({ size }) => (
+  <div style={{
+    position: 'absolute', inset: 0, borderRadius: RAD * (size / ICON), overflow: 'hidden',
+    background: 'linear-gradient(180deg, #fffaf2 0%, #f6ecdd 100%)',
+    boxShadow: 'inset 0 2px 0 rgba(255,255,255,0.95), inset 0 -6px 14px rgba(120,80,40,0.12), inset 0 0 0 1px rgba(70,45,20,0.08)',
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+  }}>
+    {/* 标志可见轮廓 x 16–120 / 128，中心偏右 4 单位：左移回图标正中 */}
+    <ShotcraftMark size={size * 0.62} tone="light" style={{ transform: `translateX(${(-size * 0.62 * 4 / 128).toFixed(2)}px)` }} />
+    {/* 顶部柔光 */}
+    <div style={{
+      position: 'absolute', inset: 0,
+      background: 'radial-gradient(ellipse closest-side at 38% 0%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%)',
+    }} />
+  </div>
+);
+
+// 邻居图标：低饱和色块 + 简单字形
+const Neighbor: React.FC<{ kind: number }> = ({ kind }) => {
+  const bgs = [
+    'linear-gradient(180deg, #9db59a 0%, #6f8f70 100%)',
+    'linear-gradient(180deg, #6b7e9c 0%, #44567a 100%)',
+    'linear-gradient(180deg, #e9dcc4 0%, #cdb894 100%)',
+    'linear-gradient(180deg, #4a4741 0%, #2b2925 100%)',
+  ];
+  const ink = kind === 2 ? '#6d5d4c' : '#fbf6ef';
+  return (
+    <div style={{
+      position: 'absolute', inset: 0, borderRadius: RAD, overflow: 'hidden', background: bgs[kind],
+      boxShadow: 'inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -6px 14px rgba(0,0,0,0.12)',
+    }}>
+      <svg width={ICON} height={ICON} viewBox="0 0 360 360" style={{ position: 'absolute', inset: 0 }}>
+        <g fill="none" stroke={ink} strokeWidth={20} strokeLinecap="round" strokeLinejoin="round">
+          {kind === 0 && <path d="M110 250 C 110 150, 190 100, 260 100 C 260 190, 210 250, 110 250 Z M110 250 L 200 160" />}
+          {kind === 1 && <g><rect x={90} y={120} width={180} height={130} rx={18} /><path d="M95 130 L180 195 L265 130" /></g>}
+          {kind === 2 && <g><rect x={95} y={130} width={170} height={120} rx={22} /><circle cx={180} cy={190} r={36} /><path d="M140 130 L150 108 L210 108 L220 130" /></g>}
+          {kind === 3 && <g><path d="M150 240 L150 110 L250 92 L250 222" /><circle cx={128} cy={242} r={24} fill={ink} /><circle cx={228} cy={224} r={24} fill={ink} /></g>}
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+// ───────────── 面板 ─────────────
+
+// 面板内容：一支宣传片的分镜时间线（时间码 / 镜头 / 手法）
+const SLOTS = [
+  { time: '00:00', title: 'Hero push-in', meta: '2.5D', c: '#3d5a80' },
+  { time: '00:04', title: 'Beat-synced cuts', meta: '12 cuts', c: '#7d9a7e' },
+  { time: '00:09', title: 'Logo sting', meta: '+ SFX', c: L.accent },
+];
+
+export const AttentionBounce: React.FC = () => {
+  const f = useCurrentFrame();
+  const { y, v, squash } = body(f);
+  const stretch = Math.abs(v) * 0.1 * (y > 0 ? 1 : 0);
+  const sx = 1 + squash - stretch * 0.5;
+  const sy = 1 - squash + stretch;
+  const lift = y / (1.2 * ICON); // 0 贴地 → 1 最高
+
+  // 镜头：开场极缓推进 1→1.015；最高那跳 smooth 推近到 1.08；hold 段再推 1%
+  const zoom = 1 + 0.015 * ramp(f, 0, 72, EASE.smooth) + 0.065 * ramp(f, 72, 18, EASE.smooth) + 0.012 * ramp(f, 110, 46, EASE.smooth);
+  const focus = { x: CX + 120, y: 700 };
+
+  // 邻居失焦（rack focus）
+  const defocus = ramp(f, 30, 66, EASE.swift);
+
+  // 角标、运行点、面板
+  const badge = f >= LAND ? springAt(f, LAND, { damping: 11, stiffness: 260 }) : 0;
+  const dot = ramp(f, LAND + 2, 8, EASE.out);
+  const panel = f >= 106 ? springAt(f, 106, { damping: 17, stiffness: 150 }) : 0;
+  const row = (i: number) => ramp(f, 114 + i * 3, 16, EASE.snappy);
+
+  // 窗光微漂
+  const shaft = Math.sin(f / 70) * 14;
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1] }}>
+      <Stage look={L} keyLight={{ x: 0.3, y: 0.05 }} fill={{ x: 0.85, y: 0.2 }} style={{ background: 'linear-gradient(180deg, #e6d9c6 0%, #dccdb8 60%, #d3c3ac 100%)' }}>
+        {/* 百叶窗光：两道斜光带打在背景墙上 */}
+        <div style={{
+          position: 'absolute', left: -400 + shaft, top: -200, width: 2800, height: 1500, transform: 'rotate(-24deg)', transformOrigin: '0 0',
+          background: `repeating-linear-gradient(90deg, transparent 0px, transparent 250px, ${alpha('#fffaf0', 0.85)} 280px, ${alpha('#fff6e6', 0.7)} 400px, transparent 430px, transparent 620px)`,
+          filter: 'blur(6px)', opacity: 0.9, mixBlendMode: 'soft-light',
+          WebkitMaskImage: 'linear-gradient(180deg, #000 0%, #000 45%, transparent 75%)', maskImage: 'linear-gradient(180deg, #000 0%, #000 45%, transparent 75%)',
+        }} />
+      </Stage>
+
+      {/* 镜头层 */}
+      <AbsoluteFill style={{ transform: `scale(${zoom})`, transformOrigin: `${focus.x}px ${focus.y}px` }}>
+        {/* Dock：贯穿画幅的磨砂奶油玻璃条，两端被画框裁掉 */}
+        <div style={{
+          position: 'absolute', left: -80, right: -80, top: DOCK_TOP, height: ICON + 64, borderRadius: 72,
+          background: 'linear-gradient(180deg, rgba(255,251,244,0.72) 0%, rgba(250,242,230,0.6) 100%)',
+          boxShadow: `inset 0 1.5px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(70,45,20,0.07), ${softShadow(30, { color: L.shadow, strength: 1.1 })}`,
+        }} />
+
+        {/* 邻居图标（失焦变淡） */}
+        {[CX - 420, CX + 420, CX + 840, CX + 1260].map((x, i) => (
+          <div key={i} style={{
+            position: 'absolute', left: x - ICON / 2, top: GROUND - ICON, width: ICON, height: ICON,
+            filter: `blur(${(defocus * 7).toFixed(2)}px) saturate(${1 - 0.3 * defocus})`, opacity: 1 - 0.4 * defocus,
+            boxShadow: softShadow(8, { color: L.shadow }), borderRadius: RAD,
+          }}>
+            <Neighbor kind={i === 0 ? 0 : i} />
+          </div>
+        ))}
+
+        {/* 落点涟漪 + 溅点 */}
+        <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
+          {LANDINGS.map(({ at, k }) => {
+            const t = (f - at) / 18;
+            if (t <= 0 || t >= 1) return null;
+            const e = EASE.snappy(t);
+            const strength = 0.5 + k * 0.17;
+            return (
+              <g key={at}>
+                <ellipse cx={CX} cy={GROUND + 6} rx={mix(ICON * 0.48, ICON * (0.85 + 0.15 * k), e)} ry={mix(14, 34 + 6 * k, e)}
+                  fill="none" stroke={L.ink2} strokeWidth={mix(10, 3, e)} opacity={(1 - t) * strength * 0.3} style={{ filter: 'blur(2.5px)' }} />
+                {Array.from({ length: 4 }, (_, i) => {
+                  const side = i % 2 ? 1 : -1;
+                  const dx = side * (ICON * 0.5 + (40 + 60 * hs(k * 7 + i)) * e * (0.7 + k * 0.25));
+                  const dy = -(30 + 40 * hs(k * 11 + i)) * 4 * t * (1 - t) * (0.6 + k * 0.2);
+                  return <circle key={i} cx={CX + dx} cy={GROUND - 4 + dy} r={4 + 3 * hs(i + k)} fill={L.ink3} opacity={(1 - t) * 0.7} />;
+                })}
+              </g>
+            );
+          })}
+        </svg>
+
+        {/* 接触影：近地小而实（随高度迅速变淡）+ 远地大而虚 */}
+        <div style={{
+          position: 'absolute', left: CX - ICON * 0.42 * sx * (1 - lift * 0.4), width: ICON * 0.84 * sx * (1 - lift * 0.4),
+          top: GROUND - 10, height: 22, borderRadius: '50%', background: alpha(L.shadow, 0.34), filter: 'blur(7px)', opacity: Math.max(0, 1 - lift * 1.8),
+        }} />
+        <div style={{
+          position: 'absolute', left: CX - ICON * 0.52 * (1 - lift * 0.25), width: ICON * 1.04 * (1 - lift * 0.25),
+          top: GROUND - 16, height: 46, borderRadius: '50%', background: alpha(L.shadow, 0.16), filter: 'blur(16px)', opacity: 1 - lift * 0.6,
+        }} />
+
+        {/* 运行指示点 */}
+        <div style={{
+          position: 'absolute', left: CX - 7, top: GROUND + 16, width: 14, height: 14, borderRadius: 7,
+          background: L.ink2, opacity: dot, transform: `scale(${dot})`,
+        }} />
+
+        {/* 主角图标（按底边中心挤压拉伸） */}
+        <div style={{
+          position: 'absolute', left: CX - ICON / 2, top: GROUND - ICON - y, width: ICON, height: ICON,
+          transform: `scale(${sx.toFixed(4)}, ${sy.toFixed(4)})`, transformOrigin: '50% 100%',
+          borderRadius: RAD, boxShadow: softShadow(10 + lift * 40, { color: L.shadow, strength: 1.2 }),
+        }}>
+          <ShotcraftIcon size={ICON} />
+          {/* 角标 */}
+          {badge > 0 && (
+            <div style={{
+              position: 'absolute', right: -34, top: -34, width: 104, height: 104, borderRadius: 52,
+              background: 'linear-gradient(180deg, #e0603a 0%, #c4452a 100%)', color: '#fff8f0',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              ...type(56, 700), letterSpacing: '-0.02em',
+              boxShadow: `0 0 0 7px ${L.bg[0]}, 0 10px 22px ${alpha('#7a2a10', 0.35)}`, transform: `scale(${badge})`,
+            }}>1</div>
+          )}
+        </div>
+
+        {/* 功能面板：从图标右上角弹簧展开 */}
+        {panel > 0.001 && (
+          <div style={{
+            position: 'absolute', left: 880, top: 148, width: 860, height: 392, boxSizing: 'border-box',
+            transform: `translate(${(1 - panel) * -120}px, ${(1 - panel) * 260}px) scale(${mix(0.2, 1, panel)})`, transformOrigin: '0% 100%',
+            opacity: Math.min(1, panel * 2.5),
+            background: 'linear-gradient(180deg, #fffdf9 0%, #fbf5ec 100%)', borderRadius: 36, padding: '36px 46px',
+            boxShadow: `inset 0 1.5px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(70,45,20,0.08), ${softShadow(44, { color: L.shadow, strength: 1.25 })}`,
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+              <div style={{ ...type(24, 700, { caps: true }), letterSpacing: '0.16em', color: L.accent }}>New in {BRAND.short}</div>
+              <div style={{ flex: 1, height: 1.5, background: L.line }} />
+            </div>
+            <div style={{ ...type(68, 700), color: L.ink, marginTop: 18 }}>Every shot, tuned.</div>
+            <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {SLOTS.map((s, i) => {
+                const r = row(i);
+                return (
+                  <div key={i} style={{
+                    display: 'flex', alignItems: 'center', gap: 24, height: 58, opacity: r, transform: `translateY(${(1 - r) * 22}px)`,
+                  }}>
+                    <div style={{ fontFamily: FONT.mono, fontSize: 32, color: L.ink3, width: 112, fontVariantNumeric: 'tabular-nums' }}>{s.time}</div>
+                    <div style={{ width: 8, height: 50, borderRadius: 4, background: s.c }} />
+                    <div style={{ ...type(36, 600), color: L.ink }}>{s.title}</div>
+                    <div style={{ marginLeft: 'auto', ...type(32, 450), color: L.ink2 }}>{s.meta}</div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};