dsh-drawai 0.3.4 → 0.4.1

package/lib/motion/shotcraft/upstream/demos/ui-entrance/card-stack/CardStack.tsx

@@ -0,0 +1,312 @@
+// card-stack — 一组卡从屏幕下方逐张 spring 弹入叠成一摞，全员落位后整摞一次性展成扇面——
+// 每张按序号偏转 6.5°、横移 138px、向后退一层 z；扇柄在卡片下缘之外（transform-origin 50% 130%）。
+//
+// 第二轮重设计（瓷白 · 模板库发布；品牌轮：video-shotcraft 镜头配方库）：
+// - look = porcelain（冷白 + 墨 + 钴蓝，青绿只做点缀）。卡片放大到 320×440 原生像素（不再走 480×270 设计坐标），
+//   每张是一张为镜头设计的"模板封面"：上 58% 生成式封面图（甘特 / 柱图 / 折线 / 圆环 / 表格 / 日历 / 看板 / 大数字），
+//   下部 30px 标题 + mono 元信息（每张是一种镜头 / 模板）；只有中心那张「Launch film」用钴蓝实色封面——它是结尾被抽出来的主角。
+// - 卡数 9（奇数）：中心卡独占中位，扇面左右对称；叠压次序 = 序号（像手里摊开的一手牌，左压右），
+//   全程不换 zIndex，避免从"一摞"到"扇面"时顶牌跳变。
+// - 重量感：入场按"越来越快"分布（EASE.exit 错峰，砰——砰—砰-砰砰），每张落座时整摞被压低 5px 再回弹；
+//   展开前 6f 预备（整摞收紧 2%），展开用低阻尼弹簧（damping 20）带一点惯性落定；相机同段拉远到 0.88。
+// - 结尾：中心卡沿自身轴抽出 72px + 钴蓝描边 + 一次扫光（Q4），标题与副句升起，形成发布会海报。
+//
+// 时间表（30fps，共 150f）：
+//   0–3     瓷白舞台 + 地面接触影 + 左上眉题已在
+//   2–42    9 张卡依次起跳（错峰 40f，越来越快），各自 spring（damping 13）≈20f 落座，落座时整摞下压 5px
+//   62–72   预备：整摞收紧 2%
+//   0–64    相机极缓推近 1→1.06
+//   68–100  扇形展开（弹簧 damping 20，轻微过冲一次），相机 1.06→0.88 拉远（smooth 64–106）
+//   102–122 中心卡抽出 72px（overshoot）+ 钴蓝描边 + 扫光；标题逐词升起（106–）、副句（116–）
+//   122–150 hold（相机极缓推进 ×1.017）
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, mix, ramp, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, Sheen, Stage, TextReveal, alpha, springAt, stagger, type } from '../../_fixtures/Look';
+import { BRAND, MARK_PATHS, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const CARD_STACK_DURATION = 150; // 5000ms @30fps
+
+const L = LOOKS.porcelain;
+const N = 9;
+const CW = 320;
+const CH = 440;
+const CX = 960;
+const CY = 610; // 卡片中心
+const ROT = 6.5; // 扇面每张偏转（°）
+const TX = 138; // 扇面每张横移（px）
+const FEATURED = 4;
+
+type Kind = 'gantt' | 'bars' | 'line' | 'rings' | 'hero' | 'table' | 'calendar' | 'kanban' | 'metric';
+const CARDS: { title: string; meta: string; kind: Kind; tint: string }[] = [
+  { title: 'Beat-synced cuts', meta: 'EDIT · 6 TRACKS', kind: 'gantt', tint: '#e9eeff' },
+  { title: 'Bar chart rise', meta: 'DATA · 7 BARS', kind: 'bars', tint: '#eef1f6' },
+  { title: 'Growth line draw', meta: 'CHART · LIVE DRAW', kind: 'line', tint: '#e3f5f1' },
+  { title: 'Gauge readout', meta: 'DATA · 3 RINGS', kind: 'rings', tint: '#e9eeff' },
+  { title: 'Launch film', meta: 'TEMPLATE · FEATURED', kind: 'hero', tint: L.accent },
+  { title: 'Render queue', meta: 'QUEUE · 6 JOBS', kind: 'table', tint: '#eef1f6' },
+  { title: 'Storyboard grid', meta: 'BOARD · 35 FRAMES', kind: 'calendar', tint: '#e3f5f1' },
+  { title: 'Shot list', meta: 'PLAN · 3 ACTS', kind: 'kanban', tint: '#e9eeff' },
+  { title: 'Stat count-up', meta: 'DATA · KPI', kind: 'metric', tint: '#eef1f6' },
+];
+
+const rand = (n: number) => {
+  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+const clamp01 = (x: number) => (x < 0 ? 0 : x > 1 ? 1 : x);
+
+// 入场：起跳帧按"越来越快"分布（EASE.out 映射 = 前面间隔大、后面间隔小）；spring 0→1（damping 13 = 一次可见回弹）
+const START = Array.from({ length: N }, (_, i) => 2 + stagger(i, N, 40, EASE.out));
+const inAt = (f: number, i: number) => (f < START[i] ? 0 : springAt(f, START[i], { damping: 13, stiffness: 150 }));
+const DROP = 820; // 起点在画框下方
+
+export const CardStack: React.FC = () => {
+  const f = useCurrentFrame();
+  // 落座下压：每张卡落座（≈起跳后 7f 越过终点）时整摞被压低 5px，sin 包络 9f
+  const dip = START.reduce((d, s) => d + Math.sin(clamp01((f - s - 6) / 9) * Math.PI) * 5, 0);
+  const squeeze = 1 - 0.02 * Math.sin(clamp01((f - 62) / 10) * Math.PI);
+  const fan = f < 68 ? 0 : springAt(f, 68, { damping: 20, stiffness: 95 });
+  // 相机：成摞段极缓推近 1→1.06（给"一摞"分量），展开同段拉远到 0.88，hold 段再极缓推进
+  const camPush = mix(1, 1.06, ramp(f, 0, 64, EASE.smooth));
+  const cam = mix(camPush, 0.88, ramp(f, 64, 42, EASE.smooth)) * mix(1, 1.017, ramp(f, 122, 28, EASE.smooth));
+  const lift = ramp(f, 102, 18, EASE.overshoot);
+  const ring = ramp(f, 104, 12, EASE.out);
+  const sheen = ramp(f, 108, 22, EASE.smooth);
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1] }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.12 }} fill={null}>
+        {/* 地面：一道极淡的桌面反光带 */}
+        <div style={{ position: 'absolute', left: 0, right: 0, top: 860, height: 220, background: `linear-gradient(180deg, ${alpha('#ffffff', 0)} 0%, ${alpha('#ffffff', 0.5)} 40%, ${alpha('#ffffff', 0)} 100%)` }} />
+      </Stage>
+
+      {/* 眉题（画框装饰，不随相机） */}
+      <div style={{ position: 'absolute', left: 120, top: 96, display: 'flex', alignItems: 'center', gap: 14, opacity: ramp(f, 0, 12, EASE.out) }}>
+        <ShotcraftMark size={30} tone="light" />
+        <div style={{ fontFamily: FONT.mono, fontSize: 22, letterSpacing: '0.1em', color: L.ink2 }}>{`${BRAND.name} · shot recipes`}</div>
+      </div>
+      <div style={{ position: 'absolute', right: 120, top: 96, fontFamily: FONT.mono, fontSize: 22, letterSpacing: '0.16em', color: L.ink3, opacity: ramp(f, 4, 12, EASE.out) }}>
+        {`${String(START.filter((s) => f >= s + 6).length).padStart(2, '0')} / ${String(N).padStart(2, '0')}`}
+      </div>
+
+      {/* 标题：中心卡抽出时升起 */}
+      <div style={{ position: 'absolute', left: 0, right: 0, top: 150, textAlign: 'center' }}>
+        <div style={{ ...type(88, 700), color: L.ink }}>
+          <TextReveal text="Start from a shot recipe." by="word" variant="rise" start={106} each={18} gap={3} />
+        </div>
+      </div>
+
+      <AbsoluteFill style={{ transform: `scale(${cam.toFixed(4)})`, transformOrigin: `${CX}px ${CY + 120}px` }}>
+        {/* 地面接触影：成摞时集中、展开后随扇面变宽 */}
+        <div style={{
+          position: 'absolute', left: CX - mix(220, 760, fan) / 2, top: CY + CH / 2 - 30 + dip, width: mix(220, 760, fan), height: 70,
+          borderRadius: '50%', background: `radial-gradient(ellipse at center, ${alpha(L.shadow, 0.28)} 0%, ${alpha(L.shadow, 0)} 70%)`,
+          opacity: ramp(f, 6, 20, EASE.out),
+        }} />
+        <div style={{ position: 'absolute', inset: 0, perspective: '1800px' }}>
+          {CARDS.map((c, i) => {
+            const p = inAt(f, i);
+            const y = (1 - p) * DROP;
+            const vy = ((1 - inAt(f + 0.5, i)) - (1 - inAt(f - 0.5, i))) * DROP;
+            const blurY = Math.min(10, Math.abs(vy) * 0.18);
+            const k = i - (N - 1) / 2;
+            // 成摞错位：确定性 ±3.2° / ±11px，像随手码齐的一摞；展开时理顺
+            const jitR = (rand(i * 3 + 1) - 0.5) * 6.4;
+            const jitX = (rand(i * 5 + 2) - 0.5) * 22;
+            const tilt = (i % 2 ? 1 : -1) * 9 * (y / DROP); // 飞行中带交替倾角，随落座收敛
+            const rot = mix(jitR + tilt, k * ROT, fan);
+            const tx = mix(jitX, k * TX, fan);
+            const tz = i * 2;
+            const feat = i === FEATURED;
+            const ly = feat ? -72 * lift : 0;
+            const elev = 6 + (y / DROP) * 50 + (feat ? 26 * lift : 0);
+            const visible = f >= START[i];
+            if (!visible) return null;
+            return (
+              <div key={i} style={{
+                position: 'absolute', left: CX - CW / 2, top: CY - CH / 2, width: CW, height: CH,
+                transformOrigin: '50% 130%',
+                transform: `translate3d(${tx.toFixed(2)}px, ${(y + dip + ly).toFixed(2)}px, ${tz}px) rotate(${rot.toFixed(3)}deg) scale(${squeeze.toFixed(4)})`,
+                zIndex: i,
+              }}>
+                {blurY > 0.4 && (
+                  <svg width={0} height={0} style={{ position: 'absolute' }} aria-hidden>
+                    <filter id={`cs-vb-${i}`} x="-10%" y="-30%" width="120%" height="160%">
+                      <feGaussianBlur stdDeviation={`0 ${blurY.toFixed(2)}`} />
+                    </filter>
+                  </svg>
+                )}
+                <div style={{
+                  position: 'absolute', inset: 0, borderRadius: 22, overflow: 'hidden', background: L.surface,
+                  border: `1px solid ${L.line}`, boxSizing: 'border-box',
+                  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.9), ${softShadow(elev, { color: L.shadow, strength: 1.15 })}` +
+                    (feat && ring > 0 ? `, 0 0 0 ${(3 * ring).toFixed(2)}px ${alpha(L.accent, 0.9 * ring)}` : ''),
+                  filter: blurY > 0.4 ? `url(#cs-vb-${i})` : undefined,
+                }}>
+                  <CardFace c={c} i={i} />
+                  {feat && <Sheen progress={sheen} strength={0.7} width={0.18} />}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </AbsoluteFill>
+
+      <div style={{
+        position: 'absolute', left: 0, right: 0, top: 268, textAlign: 'center', ...type(34, 450), color: L.ink2,
+        opacity: ramp(f, 116, 14, EASE.out), transform: `translateY(${(1 - ramp(f, 116, 18, EASE.snappy)) * 16}px)`,
+      }}>
+        Nine shot recipes. Every one ready to render.
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ───────────── 卡面：封面图 + 标题 + 元信息 ─────────────
+const COVER_H = 256;
+const CardFace: React.FC<{ c: (typeof CARDS)[number]; i: number }> = ({ c, i }) => {
+  const hero = c.kind === 'hero';
+  return (
+    <div style={{ position: 'absolute', inset: 0 }}>
+      <div style={{ position: 'absolute', left: 12, right: 12, top: 12, height: COVER_H, borderRadius: 14, overflow: 'hidden', background: c.tint }}>
+        <Cover kind={c.kind} seed={i} />
+      </div>
+      <div style={{ position: 'absolute', left: 28, right: 28, top: COVER_H + 40 }}>
+        <div style={{ fontFamily: FONT.mono, fontSize: 15, letterSpacing: '0.14em', color: hero ? L.accent : L.ink3 }}>{c.meta}</div>
+        <div style={{ ...type(32, 650), color: L.ink, marginTop: 10, whiteSpace: 'nowrap' }}>{c.title}</div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 18 }}>
+          {[0, 1, 2].map((k) => (
+            <div key={k} style={{ width: 26, height: 26, borderRadius: 13, marginLeft: k ? -14 : 0, border: `2px solid ${L.surface}`, background: ['#c9d3ea', '#b8e3d9', '#dfe3ec'][(k + i) % 3] }} />
+          ))}
+          <div style={{ fontFamily: FONT.sans, fontSize: 17, color: L.ink3, marginLeft: 4 }}>{`${(2 + rand(i) * 4).toFixed(1)}s · 30 fps`}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Cover: React.FC<{ kind: Kind; seed: number }> = ({ kind, seed }) => {
+  const W = 296, H = COVER_H;
+  const A = L.accent, T = L.accent2, INK = L.ink;
+  const soft = alpha(INK, 0.1);
+  switch (kind) {
+    case 'gantt':
+      return (
+        <svg width={W} height={H}>
+          {[0, 1, 2, 3, 4, 5].map((r) => {
+            const x = 24 + rand(seed * 9 + r) * 110;
+            const w = 60 + rand(seed * 5 + r) * 110;
+            return <rect key={r} x={x} y={36 + r * 32} width={w} height={18} rx={9} fill={r === 2 ? A : r === 4 ? T : alpha(INK, 0.16)} />;
+          })}
+          <line x1={168} x2={168} y1={20} y2={236} stroke={A} strokeWidth={2} strokeDasharray="4 5" />
+        </svg>
+      );
+    case 'bars':
+      return (
+        <svg width={W} height={H}>
+          {Array.from({ length: 7 }, (_, k) => {
+            const h = 50 + rand(seed * 11 + k) * 130;
+            return <rect key={k} x={28 + k * 36} y={214 - h} width={22} height={h} rx={5} fill={k === 5 ? A : alpha(INK, 0.14)} />;
+          })}
+          <line x1={20} x2={276} y1={214.5} y2={214.5} stroke={soft} />
+        </svg>
+      );
+    case 'line': {
+      const pts = Array.from({ length: 9 }, (_, k) => [24 + k * 31, 190 - k * 15 - rand(seed * 7 + k) * 40]);
+      const d = pts.map((p, k) => `${k ? 'L' : 'M'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
+      return (
+        <svg width={W} height={H}>
+          <path d={`${d} L272,230 L24,230 Z`} fill={alpha(T, 0.18)} />
+          <path d={d} fill="none" stroke={T} strokeWidth={4} strokeLinejoin="round" strokeLinecap="round" />
+          <circle cx={pts[8][0]} cy={pts[8][1]} r={8} fill={L.surface} stroke={T} strokeWidth={4} />
+          <text x={24} y={52} fontFamily={FONT.sans} fontSize={40} fontWeight={700} fill={INK} letterSpacing="-0.03em">+38%</text>
+        </svg>
+      );
+    }
+    case 'rings':
+      return (
+        <svg width={W} height={H}>
+          {[0.82, 0.64, 0.46].map((v, k) => {
+            const r = 86 - k * 22;
+            const C = 2 * Math.PI * r;
+            return (
+              <g key={k} transform={`rotate(-90 148 128)`}>
+                <circle cx={148} cy={128} r={r} fill="none" stroke={alpha(INK, 0.08)} strokeWidth={14} />
+                <circle cx={148} cy={128} r={r} fill="none" stroke={k === 0 ? A : k === 1 ? T : alpha(INK, 0.45)} strokeWidth={14} strokeLinecap="round" strokeDasharray={`${C * v} ${C}`} />
+              </g>
+            );
+          })}
+        </svg>
+      );
+    case 'hero':
+      return (
+        <svg width={W} height={H}>
+          <defs>
+            <radialGradient id="cs-hero" cx="80%" cy="10%" r="100%">
+              <stop offset="0" stopColor="#7d9bff" />
+              <stop offset="1" stopColor={A} />
+            </radialGradient>
+          </defs>
+          <rect width={W} height={H} fill="url(#cs-hero)" />
+          {[0, 1, 2, 3, 4].map((k) => (
+            <circle key={k} cx={250} cy={40} r={60 + k * 44} fill="none" stroke="#ffffff" strokeOpacity={0.22 - k * 0.035} strokeWidth={2} />
+          ))}
+          {/* 主角模板的封面主字换成镜刻标志反白版（取景框剪辑纸色 + 琥珀斜切），128 视框缩到 64px，占原「Q4」大字的位置 */}
+          <g transform="translate(14 140) scale(0.5)">
+            <path d={MARK_PATHS.frame} fill={BRAND.paper} />
+            <path d={MARK_PATHS.cut} fill={BRAND.amber} />
+          </g>
+          <text x={24} y={234} fontFamily={FONT.sans} fontSize={30} fontWeight={600} fill="#ffffff" fillOpacity={0.85} letterSpacing="-0.02em">Launch</text>
+        </svg>
+      );
+    case 'table':
+      return (
+        <div style={{ padding: '26px 22px', display: 'flex', flexDirection: 'column', gap: 0 }}>
+          {Array.from({ length: 6 }, (_, r) => (
+            <div key={r} style={{ display: 'flex', alignItems: 'center', gap: 12, height: 34, borderBottom: `1px solid ${soft}` }}>
+              <div style={{ width: 18, height: 18, borderRadius: 9, background: r === 1 ? A : alpha(INK, 0.14) }} />
+              <div style={{ height: 8, width: 70 + rand(seed * 3 + r) * 70, borderRadius: 4, background: alpha(INK, r === 0 ? 0.32 : 0.16) }} />
+              <div style={{ flex: 1 }} />
+              <div style={{ height: 16, width: 44, borderRadius: 8, background: r === 1 ? alpha(T, 0.3) : alpha(INK, 0.07) }} />
+            </div>
+          ))}
+        </div>
+      );
+    case 'calendar':
+      return (
+        <div style={{ padding: 24, display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 7 }}>
+          {Array.from({ length: 35 }, (_, k) => {
+            const on = rand(seed * 13 + k) > 0.66;
+            return <div key={k} style={{ aspectRatio: '1', borderRadius: 6, background: k === 17 ? A : on ? alpha(T, 0.35) : alpha(INK, 0.07) }} />;
+          })}
+        </div>
+      );
+    case 'kanban':
+      return (
+        <div style={{ padding: 22, display: 'flex', gap: 10 }}>
+          {[4, 3, 2].map((n, col) => (
+            <div key={col} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 9 }}>
+              <div style={{ height: 8, width: 40, borderRadius: 4, background: alpha(INK, 0.3) }} />
+              {Array.from({ length: n }, (_, r) => (
+                <div key={r} style={{ height: 40, borderRadius: 8, background: col === 1 && r === 0 ? A : L.surface, boxShadow: `0 1px 2px ${alpha(INK, 0.1)}`, padding: 9 }}>
+                  <div style={{ height: 6, width: 30 + rand(seed + col * 5 + r) * 30, borderRadius: 3, background: col === 1 && r === 0 ? alpha('#ffffff', 0.7) : alpha(INK, 0.18) }} />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      );
+    case 'metric':
+    default:
+      return (
+        <svg width={W} height={H}>
+          <text x={24} y={96} fontFamily={FONT.sans} fontSize={66} fontWeight={800} fill={INK} letterSpacing="-0.04em">$2.4M</text>
+          <rect x={24} y={116} width={92} height={30} rx={15} fill={alpha(T, 0.22)} />
+          <text x={38} y={137} fontFamily={FONT.sans} fontSize={17} fontWeight={700} fill="#007a69">+12.4%</text>
+          <path d={Array.from({ length: 12 }, (_, k) => `${k ? 'L' : 'M'}${(24 + k * 22.5).toFixed(1)},${(230 - k * 4 - rand(k + 40) * 26).toFixed(1)}`).join(' ')}
+            fill="none" stroke={A} strokeWidth={4} strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      );
+  }
+};

package/lib/motion/shotcraft/upstream/demos/ui-entrance/carousel-3d/Carousel3D.tsx

@@ -0,0 +1,303 @@
+// carousel-3d — 8 张卡排成圆环整环自转一圈：每卡只绕 Y 公转、自身 billboard 朝外，正反两层同向贴图 +
+// backface-visibility:hidden 保证任何时刻都正立不倒置；相机全程钉在浅俯角，首尾帧无缝 loop。
+//
+// 第二轮重设计（酸柠 · 镜头配方画廊；品牌轮：原「训练计划」换成 video-shotcraft 的镜头配方卡）：
+// - look = lime（石墨暗场 + 荧光黄绿）。卡片放大到 340×460 原生像素、环半径 700px，整环占画宽约 70%；
+//   卡面是为镜头设计的"镜头配方卡"：mono 编号、生成式图形（剖面 / 闪切柱 / 声波 / 圆环…）、
+//   64px 大数字、30px 名称——转到正前方的那张被点亮（荧光描边 + 图形转荧光色 + 底光），其余保持石墨灰。
+// - 节奏：不再是死匀速。转角 = 50% 匀速底 + 50% 分步（每 21f 一步 = 8f 停靠 + 13f smooth 换位），
+//   整环永远在走（loop 稳态）但每 45° 有一次"推一把—停靠"的呼吸，正前方的卡在停靠时被读清；
+//   8 步 × 21f = 168f 正好一圈，首尾帧逐像素可接。
+// - 环下方大字幕随步进滚动换字（编号 + 72px 名称），相机固定不动（画廊而不是过山车）。
+// - 空气透视：按方位角给卡面叠深色（最后方 70%）+ 地面反光盘 + 渐隐倒影环，环真正"落地"。
+//
+// 时间表（30fps，共 168f，可无缝循环）：
+//   每 21f 一拍：0–8 停靠（正前方卡点亮、字幕定格）→ 8–21 换位（smooth，字幕上滚换字）；共 8 拍 = 360°
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, mix } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const CAROUSEL_3D_DURATION = 168; // 5600ms @30fps
+
+const L = LOOKS.lime;
+const N = 8;
+const RADIUS = 700;
+const CW = 340;
+const CH = 460;
+const RING_Y = 470; // 环中心高度
+const FLOOR = CH / 2 + 10; // 卡脚下的地面（相对环中心）
+const BEAT = 21; // 每步帧数 = 停靠 + 换位
+const DWELL = 8;
+
+type Kind = 'climb' | 'intervals' | 'pulse' | 'rings' | 'splits' | 'bars' | 'mobility' | 'race';
+const CARDS: { name: string; stat: string; unit: string; meta: string; kind: Kind }[] = [
+  { name: 'Beat Cuts', stat: '120', unit: 'bpm', meta: 'EDIT · ON THE BEAT', kind: 'splits' },
+  { name: 'Steep Tilt', stat: '38°', unit: 'tilt', meta: 'CAMERA · GLIDE', kind: 'climb' },
+  { name: 'Sound Design', stat: '−14', unit: 'LUFS', meta: 'SFX · HIT + WHOOSH', kind: 'pulse' },
+  { name: 'Gauge Readout', stat: '96', unit: '%', meta: 'DATA · 3 RINGS', kind: 'rings' },
+  { name: 'Flash Cuts', stat: '10×', unit: '2 f', meta: 'EDIT · STROBE', kind: 'intervals' },
+  { name: 'Chart Rise', stat: '45', unit: 'f', meta: 'DATA · BAR RACE', kind: 'bars' },
+  { name: 'Ease Curves', stat: '0.8', unit: 's', meta: 'MOTION · SNAPPY', kind: 'mobility' },
+  { name: 'Camera Path', stat: '4.2', unit: 's', meta: 'FLYOVER · 2.5D', kind: 'race' },
+];
+
+const clamp01 = (x: number) => (x < 0 ? 0 : x > 1 ? 1 : x);
+const rand = (n: number) => {
+  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+const hex = (h: string) => [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];
+const mixHex = (a: string, b: string, t: number) => {
+  const A = hex(a), B = hex(b), q = clamp01(t);
+  return `rgb(${A.map((v, i) => Math.round(v + (B[i] - v) * q)).join(',')})`;
+};
+
+// 转角（0→1 圈）：50% 匀速 + 50% 分步（停靠 DWELL 帧 + smooth 换位）；f=168 恰为 1 圈
+const stepPart = (f: number) => {
+  const k = Math.floor(f / BEAT);
+  const local = f - k * BEAT;
+  return (k + EASE.smooth(clamp01((local - DWELL) / (BEAT - DWELL)))) / N;
+};
+const turnAt = (f: number) => 0.5 * (f / (N * BEAT)) + 0.5 * stepPart(f);
+
+export const Carousel3D: React.FC = () => {
+  const f = useCurrentFrame();
+  const spin = turnAt(f) * 360;
+  // 每张卡的世界方位角（0 = 正前方）
+  const azimuth = (i: number) => ((((i * 360) / N - spin) % 360) + 540) % 360 - 180;
+  const depthOf = (i: number) => (1 - Math.cos((azimuth(i) * Math.PI) / 180)) / 2;
+  const hlOf = (i: number) => EASE.smooth(clamp01(1 - Math.abs(azimuth(i)) / 26));
+
+  // 字幕：停靠时定格当前卡，换位时上滚到下一张
+  const k = Math.floor(f / BEAT);
+  const roll = EASE.smooth(clamp01((f - k * BEAT - DWELL) / (BEAT - DWELL)));
+
+  const renderCard = (i: number, reflect: boolean) => {
+    const d = depthOf(i);
+    const hl = reflect ? 0 : hlOf(i);
+    const face: React.CSSProperties = {
+      position: 'absolute', inset: 0, borderRadius: 26, overflow: 'hidden', boxSizing: 'border-box',
+      backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
+      background: `linear-gradient(165deg, ${L.surface2} 0%, ${L.surface} 60%, #0f110d 100%)`,
+      border: `1.5px solid ${hl > 0.01 ? alpha(L.accent, 0.25 + 0.6 * hl) : alpha('#ffffff', 0.1)}`,
+      boxShadow: `inset 0 1px 0 ${alpha('#ffffff', 0.1)}`,
+      ...(reflect
+        ? {
+            // 透明度只能挂在叶子层：挂在 preserve-3d 容器上会把整环拍平
+            opacity: 0.08,
+            WebkitMaskImage: 'linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,0.85) 100%)',
+            maskImage: 'linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,0.85) 100%)',
+          }
+        : {}),
+    };
+    const body = (
+      <>
+        <Face i={i} hl={hl} />
+        {/* 空气透视：越靠后越暗（只叠一层带色相的深色，不改几何） */}
+        <div style={{ position: 'absolute', inset: 0, background: L.bg[2], opacity: (0.7 * d).toFixed(3) }} />
+      </>
+    );
+    return (
+      <div key={i} style={{
+        position: 'absolute', left: -CW / 2, top: -CH / 2, width: CW, height: CH, transformStyle: 'preserve-3d',
+        // 卡只做环上定位（绕 Y 公转 + 沿法向推出半径），永不绕 X/Z——永远正立
+        // 转到正前方的卡沿法向多推出 44px（只平移不旋转），停靠时读作"被选中"
+        transform: `rotateY(${(i * 360) / N}deg) translateZ(${(RADIUS + 44 * hlOf(i)).toFixed(2)}px)`,
+      }}>
+        <div style={face}>{body}</div>
+        <div style={{ ...face, transform: 'rotateY(180deg)' }}>{body}</div>
+      </div>
+    );
+  };
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[2] }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.16 }} fill={{ x: 0.5, y: 1.0 }} intensity={0.5} />
+
+      {/* 正前方卡脚下的荧光底光（固定在画面上，不随环转） */}
+      <div style={{
+        position: 'absolute', left: 960 - 520, top: RING_Y + 120, width: 1040, height: 420, borderRadius: '50%',
+        background: `radial-gradient(ellipse at 50% 40%, ${alpha(L.accent, 0.16)} 0%, ${alpha(L.accent, 0)} 65%)`,
+      }} />
+
+      {/* 3D 场景：perspective 2200px；相机固定浅俯角 */}
+      <div style={{ position: 'absolute', inset: 0, perspective: '2200px', perspectiveOrigin: `50% ${RING_Y - 60}px` }}>
+        <div style={{
+          position: 'absolute', left: 960, top: RING_Y, width: 0, height: 0, transformStyle: 'preserve-3d',
+          transform: `translateZ(${-RADIUS}px) rotateX(-9deg)`,
+        }}>
+          {/* 地面反光盘 + 刻度环 */}
+          <div style={{
+            position: 'absolute', left: -RADIUS * 1.35, top: FLOOR - RADIUS * 1.35, width: RADIUS * 2.7, height: RADIUS * 2.7, borderRadius: '50%',
+            transform: 'rotateX(90deg)',
+            background: `radial-gradient(circle, ${alpha(L.accent, 0.1)} 0%, ${alpha(L.accent, 0.03)} 45%, transparent 66%)`,
+          }} />
+          <svg width={RADIUS * 2.4} height={RADIUS * 2.4} viewBox={`${-RADIUS * 1.2} ${-RADIUS * 1.2} ${RADIUS * 2.4} ${RADIUS * 2.4}`}
+            style={{ position: 'absolute', left: -RADIUS * 1.2, top: FLOOR - RADIUS * 1.2, transform: `rotateX(90deg) rotateZ(${spin}deg)`, overflow: 'visible' }}>
+            <circle r={RADIUS * 1.08} fill="none" stroke={alpha('#ffffff', 0.08)} strokeWidth={2} />
+            {Array.from({ length: 96 }, (_, t) => {
+              const a = (t / 96) * Math.PI * 2;
+              const r0 = RADIUS * (t % 12 === 0 ? 1.02 : 1.05);
+              return <line key={t} x1={r0 * Math.cos(a)} y1={r0 * Math.sin(a)} x2={RADIUS * 1.08 * Math.cos(a)} y2={RADIUS * 1.08 * Math.sin(a)}
+                stroke={t % 12 === 0 ? alpha(L.accent, 0.5) : alpha('#ffffff', 0.12)} strokeWidth={t % 12 === 0 ? 3 : 2} />;
+            })}
+          </svg>
+          {/* 倒影环：以地面为镜面翻转 */}
+          <div style={{ position: 'absolute', transformStyle: 'preserve-3d', transform: `translateY(${FLOOR * 2}px) scaleY(-1) rotateY(${-spin}deg)` }}>
+            {Array.from({ length: N }, (_, i) => renderCard(i, true))}
+          </div>
+          {/* 圆环载体：唯一的逐帧变量 */}
+          <div style={{ position: 'absolute', transformStyle: 'preserve-3d', transform: `rotateY(${-spin}deg)` }}>
+            {Array.from({ length: N }, (_, i) => renderCard(i, false))}
+          </div>
+        </div>
+      </div>
+
+      {/* 字幕：编号 + 名称，随步进上滚换字（裁切窗） */}
+      <div style={{ position: 'absolute', left: 0, right: 0, top: 862, height: 120, overflow: 'hidden' }}>
+        {[0, 1].map((j) => {
+          const c = (k + j) % N;
+          const y = (j - roll) * 120;
+          return (
+            <div key={j} style={{
+              position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 34,
+              transform: `translateY(${y.toFixed(2)}px)`, opacity: 1 - Math.abs(j - roll) * 0.9,
+            }}>
+              <span style={{ fontFamily: FONT.mono, fontSize: 26, letterSpacing: '0.14em', color: L.accent }}>{`0${c + 1} / 08`}</span>
+              <span style={{ ...type(72, 750), color: L.ink }}>{CARDS[c].name}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 画框装饰 */}
+      <div style={{ position: 'absolute', left: 120, top: 96, display: 'flex', alignItems: 'center', gap: 14 }}>
+        <ShotcraftMark size={30} tone="dark" />
+        <div style={{ fontFamily: FONT.mono, fontSize: 22, letterSpacing: '0.1em', color: L.ink2 }}>{`${BRAND.name} · shot recipes`}</div>
+      </div>
+      <div style={{ position: 'absolute', right: 120, top: 96, fontFamily: FONT.mono, fontSize: 22, letterSpacing: '0.16em', color: L.ink3 }}>
+        1080P · 30 FPS
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ───────────── 卡面（340×460） ─────────────
+const Face: React.FC<{ i: number; hl: number }> = ({ i, hl }) => {
+  const c = CARDS[i];
+  const g = mixHex('#6b7262', L.accent, hl); // 图形主色：石墨灰 → 荧光
+  return (
+    <div style={{ position: 'absolute', inset: 0, padding: 30 }}>
+      {/* 卡顶受光 */}
+      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(120% 55% at 30% 0%, ${alpha('#ffffff', 0.07)} 0%, transparent 60%)` }} />
+      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', fontFamily: FONT.mono, fontSize: 17, letterSpacing: '0.14em', color: L.ink3 }}>
+        <span>{`SHOT ${String(i + 1).padStart(2, '0')}`}</span>
+        <span style={{ color: hl > 0.5 ? L.accent : L.ink3 }}>●</span>
+      </div>
+      <div style={{ position: 'relative', marginTop: 22, height: 150 }}>
+        <Graphic kind={c.kind} color={g} seed={i} />
+      </div>
+      <div style={{ position: 'relative', marginTop: 26, display: 'flex', alignItems: 'baseline', gap: 10 }}>
+        <span style={{ ...type(72, 800), color: L.ink, letterSpacing: '-0.04em' }}>{c.stat}</span>
+        <span style={{ ...type(28, 600), color: L.ink2 }}>{c.unit}</span>
+      </div>
+      <div style={{ position: 'relative', ...type(32, 650), color: L.ink, marginTop: 10 }}>{c.name}</div>
+      <div style={{ position: 'absolute', left: 30, bottom: 28, fontFamily: FONT.mono, fontSize: 17, letterSpacing: '0.12em', color: L.ink3 }}>{c.meta}</div>
+    </div>
+  );
+};
+
+const Graphic: React.FC<{ kind: Kind; color: string; seed: number }> = ({ kind, color, seed }) => {
+  const W = 280, H = 150;
+  const dim = alpha('#ffffff', 0.1);
+  switch (kind) {
+    case 'climb': {
+      const pts = Array.from({ length: 14 }, (_, k) => [k * (W / 13), 130 - (k % 4 < 2 ? k % 4 : 4 - (k % 4)) * 46 - rand(seed + k) * 10]);
+      const d = pts.map((p, k) => `${k ? 'L' : 'M'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
+      return (
+        <svg width={W} height={H}>
+          <path d={`${d} L${W},${H} L0,${H} Z`} fill={color} fillOpacity={0.16} />
+          <path d={d} fill="none" stroke={color} strokeWidth={4} strokeLinejoin="round" />
+        </svg>
+      );
+    }
+    case 'intervals':
+      return (
+        <svg width={W} height={H}>
+          {Array.from({ length: 10 }, (_, k) => (
+            <g key={k}>
+              <rect x={k * 28} y={20} width={14} height={130} rx={4} fill={color} />
+              <rect x={k * 28 + 16} y={100} width={8} height={50} rx={3} fill={dim} />
+            </g>
+          ))}
+        </svg>
+      );
+    case 'pulse': {
+      // 音效卡：四记"打击 + 衰减"的声波（每 14 点一记，振幅指数衰减的正负交替折线）
+      const d = Array.from({ length: 57 }, (_, k) => {
+        const x = k * 5;
+        const beat = k % 14;
+        const amp = beat < 2 ? 0 : 62 * Math.exp(-(beat - 2) * 0.32);
+        const y = 75 + amp * (k % 2 ? 1 : -1) + Math.sin(k * 0.7) * 2;
+        return `${k ? 'L' : 'M'}${x},${y.toFixed(1)}`;
+      }).join(' ');
+      return <svg width={W} height={H}><path d={d} fill="none" stroke={color} strokeWidth={4} strokeLinejoin="round" strokeLinecap="round" /></svg>;
+    }
+    case 'rings':
+      return (
+        <svg width={W} height={H}>
+          {[0.86, 0.62, 0.4].map((v, k) => {
+            const r = 66 - k * 19;
+            const C = 2 * Math.PI * r;
+            return (
+              <g key={k} transform="rotate(-90 75 75)">
+                <circle cx={75} cy={75} r={r} fill="none" stroke={dim} strokeWidth={12} />
+                <circle cx={75} cy={75} r={r} fill="none" stroke={color} strokeOpacity={1 - k * 0.3} strokeWidth={12} strokeLinecap="round" strokeDasharray={`${C * v} ${C}`} />
+              </g>
+            );
+          })}
+          <text x={168} y={70} fontFamily={FONT.mono} fontSize={18} fill={L.ink3} letterSpacing="0.1em">FPS</text>
+          <text x={168} y={104} fontFamily={FONT.sans} fontSize={34} fontWeight={700} fill={L.ink}>30</text>
+        </svg>
+      );
+    case 'splits':
+      return (
+        <svg width={W} height={H}>
+          {Array.from({ length: 8 }, (_, k) => {
+            const w = 150 + rand(seed * 7 + k) * 110;
+            return <rect key={k} x={0} y={k * 19} width={w} height={11} rx={5.5} fill={k === 5 ? color : dim} />;
+          })}
+          <line x1={210} x2={210} y1={0} y2={150} stroke={color} strokeWidth={2} strokeDasharray="4 5" />
+        </svg>
+      );
+    case 'bars':
+      return (
+        <svg width={W} height={H}>
+          {Array.from({ length: 7 }, (_, k) => {
+            const h = 40 + rand(seed * 11 + k) * 105;
+            return <rect key={k} x={k * 40} y={150 - h} width={26} height={h} rx={6} fill={k === 4 ? color : dim} />;
+          })}
+        </svg>
+      );
+    case 'mobility':
+      return (
+        <svg width={W} height={H}>
+          {[0, 1, 2].map((k) => (
+            <path key={k} d={`M 0 ${40 + k * 36} C 70 ${10 + k * 36}, 140 ${80 + k * 36}, 280 ${30 + k * 36}`} fill="none" stroke={k === 1 ? color : dim} strokeWidth={k === 1 ? 5 : 4} strokeLinecap="round" />
+          ))}
+        </svg>
+      );
+    case 'race':
+    default:
+      return (
+        <svg width={W} height={H}>
+          <path d="M 10 120 C 60 20, 120 140, 170 60 S 250 30, 270 40" fill="none" stroke={dim} strokeWidth={10} strokeLinecap="round" />
+          <path d="M 10 120 C 60 20, 120 140, 170 60" fill="none" stroke={color} strokeWidth={10} strokeLinecap="round" />
+          <circle cx={170} cy={60} r={12} fill={L.bg[2]} stroke={color} strokeWidth={5} />
+          <circle cx={270} cy={40} r={8} fill={L.ink} />
+        </svg>
+      );
+  }
+};