dsh-drawai 0.3.4 → 0.4.1

package/lib/motion/shotcraft/upstream/demos/ui-entrance/product-card-progressive-assemble/ProductCardProgressiveAssemble.tsx

@@ -0,0 +1,297 @@
+// product-card-progressive-assemble — 详情卡像被逐字段抓取般自建
+// 图 → 标题 → 分类 pill → 价格（原价被划线降级、新价 spring 跳出）→ 正文逐行 + 马克笔高亮 → 色卡 → 按钮，
+// 整卡全程极慢前推。价格降级是全片唯一的"改变"事件，放在中段最显眼处。
+//
+// 第二轮重设计（瓷白 · 自动填充的商品详情页）：
+// - look = porcelain（冷白 + 钴蓝）。原生 1920 坐标重画：一张 1520×840 的商品详情卡占画宽 79%，
+//   左侧 640 宽棚拍图（video-shotcraft 标志当棚拍主体 + 无缝背景 + 接触影），右侧字段按真实字号排版：
+//   标题 108px、价格 112px、正文 34px、pill 28px——不再是 480×270 小画布放大的小字。
+// - 手法强化：一枚钴蓝"填充光标"（描边框 + AUTOFILL 小签）领先每个字段 2–3f 跳到它的槽位，
+//   框形在字段之间不对称 in-out 变形移动；字段落位前槽位里是浅灰骨架条，落位时骨架淡出、内容升起
+//   ——读作"表单正在被一格一格自动填好"。光标是唯一的主角光效（Q4），最后缩进按钮里消失。
+// - 价格事件：$449 先完整落位 hold 18f，再 6f 内同窗"缩小 + 变灰 + 删除线从左划过"，钴蓝新价
+//   Free（Apache-2.0 开源）物理弹簧（damping 14）从 1.18 收到 1、OPEN SOURCE chip 晚 6f 滑入。
+// - 马克笔高亮：钴蓝 16% 底块 scaleX 0→1 由左向右 6f 刷过，比字段落位更快。
+// - 收尾：按钮底色由左向右填满（墨黑），光标收进按钮淡出。
+//
+// 时间表（30fps，共 172f）：
+//   0–14    卡片升起落位（scale .96→1 + 上移 30px，expo-out），骨架槽位已在
+//   8–24    光标 → 图：棚拍图揭示（失焦→清晰 + 商品 1.08→1 慢收）
+//   20–34   光标 → 标题：逐字升起
+//   30–44   光标 → pill：三枚错峰 pop（3f 间隔，过冲）
+//   42–56   光标 → 价格：$449 落位
+//   62–80   价格降级（6f 急变）+ 新价 Free 弹簧 + chip
+//   76–96   光标 → 正文：三行错峰升起（3f），两处高亮 86/90 刷过
+//   96–112  光标 → 色卡：四枚 pop（3f）+ 色名
+//   114–128 光标 → 按钮：底色左→右填满，光标收进按钮消失
+//   0–132   整卡前推 1→1.035（不对称 in-out）
+//   132–172 hold 40f，干净定格
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, springAt, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const PRODUCT_CARD_PROGRESSIVE_ASSEMBLE_DURATION = 172;
+
+const L = LOOKS.porcelain;
+const BLUE = L.accent;
+
+// 卡片几何（画面坐标）
+const CW = 1520;
+const CH = 840;
+const CL = (1920 - CW) / 2;
+const CT = (1080 - CH) / 2 + 6;
+const PAD = 60;
+const IMG = { x: PAD, y: PAD, w: 640, h: CH - PAD * 2 };
+const COL = PAD + 640 + 64; // 右列 x（卡片局部）
+const COLW = CW - COL - PAD;
+
+// 字段槽位（卡片局部坐标）+ 光标到达帧
+type Box = { x: number; y: number; w: number; h: number };
+const F = {
+  img: { box: { ...IMG }, at: 8 },
+  title: { box: { x: COL, y: 66, w: 560, h: 150 }, at: 20 },
+  pills: { box: { x: COL, y: 244, w: 560, h: 52 }, at: 30 },
+  price: { box: { x: COL, y: 322, w: 670, h: 112 }, at: 42 }, // w 670：框住 OPEN SOURCE chip
+  body: { box: { x: COL, y: 462, w: COLW, h: 150 }, at: 76 },
+  swatch: { box: { x: COL, y: 636, w: 520, h: 56 }, at: 96 },
+  cta: { box: { x: COL, y: 716, w: COLW, h: 64 }, at: 114 },
+};
+const ORDER: (keyof typeof F)[] = ['img', 'title', 'pills', 'price', 'body', 'swatch', 'cta'];
+const HOP = 6; // 光标跳格帧数
+const LAND = 2; // 字段在光标到达后几帧开始落位
+const PRICE_DROP = 62;
+
+const clamp01 = (x: number) => (x < 0 ? 0 : x > 1 ? 1 : x);
+
+// 光标当前框：在相邻两个字段框之间按 swift 插值
+const cursorBox = (f: number): Box & { k: number } => {
+  let prev = F[ORDER[0]].box as Box;
+  for (let i = 0; i < ORDER.length; i++) {
+    const cur = F[ORDER[i]];
+    const t0 = cur.at - HOP;
+    if (f < cur.at) {
+      const k = i === 0 ? 1 : ramp(f, t0, HOP, EASE.swift);
+      const b = cur.box as Box;
+      return { x: mix(prev.x, b.x, k), y: mix(prev.y, b.y, k), w: mix(prev.w, b.w, k), h: mix(prev.h, b.h, k), k };
+    }
+    prev = cur.box as Box;
+  }
+  return { ...prev, k: 1 };
+};
+
+// 字段落位：骨架淡出 + 内容上移 18px 失焦淡入（snappy 14f）
+const landP = (f: number, key: keyof typeof F, extra = 0) => ramp(f, F[key].at + LAND + extra, 14, EASE.snappy);
+const rise = (p: number, dist = 18): React.CSSProperties => ({
+  opacity: clamp01(p * 1.8),
+  transform: `translateY(${((1 - p) * dist).toFixed(2)}px)`,
+  filter: p < 0.98 ? `blur(${((1 - p) * 6).toFixed(2)}px)` : undefined,
+});
+const pop = (f: number, start: number): React.CSSProperties => {
+  const s = springAt(f, start, { damping: 13, stiffness: 260 });
+  return { opacity: clamp01((f - start) / 4), transform: `scale(${mix(0.4, 1, s).toFixed(4)})` };
+};
+
+// 骨架条（字段落位前的浅灰占位）
+const Skeleton: React.FC<{ box: Box; fade: number; rows?: number[]; radius?: number }> = ({ box, fade, rows = [1], radius = 10 }) =>
+  fade >= 1 ? null : (
+    <div style={{ position: 'absolute', left: box.x, top: box.y, width: box.w, height: box.h, opacity: 1 - fade, display: 'flex', flexDirection: 'column', gap: 14, justifyContent: 'center' }}>
+      {rows.map((w, i) => (
+        <div key={i} style={{ height: Math.min(28, (box.h - 14 * (rows.length - 1)) / rows.length), width: `${w * 100}%`, borderRadius: radius, background: '#e8edf5' }} />
+      ))}
+    </div>
+  );
+
+// 商品：video-shotcraft 标志当棚拍主体（亮底 light 版），下方一团独立的地面接触影（不是标志投影）
+const ProductMark: React.FC = () => (
+  <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+    <div style={{
+      position: 'absolute', left: 40, right: 40, top: 326, height: 52, borderRadius: '50%',
+      background: `radial-gradient(closest-side, ${alpha(L.shadow, 0.26)}, ${alpha(L.shadow, 0)})`,
+    }} />
+    <ShotcraftMark size={368} tone="light" style={{ position: 'absolute', left: 46, top: 26 }} />
+  </div>
+);
+
+const LINES: [string, boolean?][][] = [
+  [['Shot recipes that '], ['direct every move', true], ['.']],
+  [['Built on '], ['real page captures', true], [' and 2.5D,']],
+  [['cut to the beat, rendered in Remotion.']],
+];
+// 色卡 = 品牌四色（成片 look 可选）
+const SWATCHES: [string, string][] = [[BRAND.ink, 'Ink'], [BRAND.paper, 'Paper'], [BRAND.amber, 'Amber'], [BRAND.slate, 'Slate']];
+
+export const ProductCardProgressiveAssemble: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const enter = ramp(frame, 0, 14, EASE.snappy);
+  const push = 1 + 0.035 * ramp(frame, 0, 132, EASE.swift);
+
+  // 各字段进度
+  const img = landP(frame, 'img');
+  const title = landP(frame, 'title');
+  const price = landP(frame, 'price');
+  const sw = landP(frame, 'swatch');
+  const cta = ramp(frame, F.cta.at + LAND, 12, EASE.out);
+
+  // 价格降级（6f 同窗：缩小 + 变灰 + 删除线）
+  const cut = ramp(frame, PRICE_DROP, 6, EASE.snappy);
+  const strike = ramp(frame, PRICE_DROP, 5, EASE.out);
+  const newP = springAt(frame, PRICE_DROP + 1, { damping: 14, stiffness: 240 });
+  const chip = ramp(frame, PRICE_DROP + 7, 10, EASE.snappy);
+
+  // 光标
+  const cb = cursorBox(frame);
+  const cursorIn = ramp(frame, 2, 6, EASE.out);
+  const cursorOut = ramp(frame, F.cta.at + 8, 8, EASE.exit);
+  const cursorOp = cursorIn * (1 - cursorOut);
+  const pad = 14 * (1 - cursorOut);
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.3, y: 0.05 }} fill={{ x: 0.85, y: 0.95 }} vignette={0.2} />
+      {/* 远景：一块极淡的钴蓝光晕在卡片右后方（空间层次） */}
+      <div style={{ position: 'absolute', left: 1100, top: 520, width: 900, height: 700, background: `radial-gradient(closest-side, ${alpha(BLUE, 0.08)}, ${alpha(BLUE, 0)})` }} />
+
+      <div style={{
+        position: 'absolute', left: CL, top: CT, width: CW, height: CH,
+        transform: `translateY(${((1 - enter) * 30).toFixed(2)}px) scale(${(mix(0.96, 1, enter) * push).toFixed(5)})`,
+        transformOrigin: '50% 55%', opacity: clamp01(enter * 1.6),
+      }}>
+        {/* 卡面：白 + 发丝线 + 内高光 + 两层带色相软阴影 */}
+        <div style={{
+          position: 'absolute', inset: 0, borderRadius: 36, background: 'linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%)',
+          boxShadow: `inset 0 1px 0 #ffffff, 0 0 0 1px ${L.line}, 0 2px 4px ${alpha(L.shadow, 0.06)}, 0 40px 90px -20px ${alpha(L.shadow, 0.28)}`,
+        }} />
+
+        {/* 骨架槽位 */}
+        <Skeleton box={{ x: COL, y: 66, w: 200, h: 26 }} fade={title} />
+        <Skeleton box={{ x: COL, y: 112, w: 520, h: 96 }} fade={title} rows={[0.85]} radius={16} />
+        <Skeleton box={F.pills.box} fade={landP(frame, 'pills')} rows={[0.62]} radius={26} />
+        <Skeleton box={F.price.box} fade={price} rows={[0.38]} radius={16} />
+        <Skeleton box={F.body.box} fade={landP(frame, 'body')} rows={[0.92, 0.86, 0.6]} />
+        <Skeleton box={F.swatch.box} fade={sw} rows={[0.5]} radius={28} />
+        <Skeleton box={F.cta.box} fade={cta} rows={[1]} radius={32} />
+
+        {/* 图：棚拍无缝背景 + 标志 */}
+        <div style={{ position: 'absolute', left: IMG.x, top: IMG.y, width: IMG.w, height: IMG.h, borderRadius: 24, overflow: 'hidden', background: '#eef2f8' }}>
+          <div style={{ position: 'absolute', inset: 0, opacity: img, background: 'radial-gradient(110% 80% at 38% 26%, #ffffff 0%, #eef2f8 46%, #dde4ee 100%)' }} />
+          <div style={{ position: 'absolute', left: 0, right: 0, top: '72%', bottom: 0, opacity: img, background: `linear-gradient(180deg, ${alpha(L.shadow, 0.04)}, ${alpha(L.shadow, 0)})` }} />
+          <div style={{
+            position: 'absolute', left: 90, top: 150, width: 460, height: 483,
+            opacity: clamp01(img * 1.5),
+            transform: `translateY(${((1 - img) * 26).toFixed(2)}px) scale(${mix(1.08, 1, ramp(frame, 10, 40, EASE.out)).toFixed(4)})`,
+            filter: img < 0.98 ? `blur(${((1 - img) * 10).toFixed(2)}px)` : undefined,
+          }}>
+            <ProductMark />
+          </div>
+          <div style={{ position: 'absolute', left: 32, top: 30, fontFamily: FONT.mono, fontSize: 22, letterSpacing: '0.14em', color: L.ink3, opacity: img }}>01 / 06</div>
+        </div>
+
+        {/* 眉标 + 标题 */}
+        <div style={{ position: 'absolute', left: COL, top: 66, fontFamily: FONT.mono, fontSize: 22, letterSpacing: '0.18em', color: L.ink3, ...rise(title, 10) }}>
+          VIDEO-SHOTCRAFT · AGENT SKILL
+        </div>
+        <div style={{ position: 'absolute', left: COL - 4, top: 104, ...type(112, 720), color: L.ink, letterSpacing: '-0.045em', whiteSpace: 'nowrap', ...rise(landP(frame, 'title', 2), 26) }}>
+          Shotcraft
+        </div>
+
+        {/* 分类 pill：错峰 pop */}
+        <div style={{ position: 'absolute', left: COL, top: F.pills.box.y, display: 'flex', gap: 12 }}>
+          {['Agent skill', 'Remotion', 'Shot recipes'].map((t, i) => (
+            <div key={t} style={{
+              ...type(28, 560), color: i === 2 ? L.ink : L.ink2, padding: '10px 22px', borderRadius: 99,
+              background: i === 2 ? '#ffffff' : L.surface2, boxShadow: i === 2 ? `inset 0 0 0 1.5px ${alpha(L.ink, 0.16)}` : `inset 0 0 0 1px ${L.line}`,
+              transformOrigin: 'left center', ...pop(frame, F.pills.at + LAND + i * 3),
+            }}>{t}</div>
+          ))}
+        </div>
+
+        {/* 价格行：$449 落位 → 降级；Free 弹簧跳出；chip 滑入 */}
+        <div style={{ position: 'absolute', left: COL, top: F.price.box.y, height: 112, width: 680, ...rise(price, 16) }}>
+          <div style={{
+            position: 'absolute', left: 0, bottom: 4, ...type(112, 760), letterSpacing: '-0.04em',
+            color: cut > 0.5 ? L.ink3 : L.ink, transform: `scale(${mix(1, 0.46, cut).toFixed(4)})`, transformOrigin: '0% 88%', whiteSpace: 'nowrap',
+          }}>
+            $449
+            <span style={{
+              position: 'absolute', left: -6, right: -6, top: '50%', height: 9, borderRadius: 4, background: L.ink3,
+              transform: `scaleX(${strike.toFixed(4)})`, transformOrigin: 'left center',
+            }} />
+          </div>
+          <div style={{
+            position: 'absolute', left: 150, bottom: 4, ...type(112, 780), letterSpacing: '-0.04em', color: BLUE, whiteSpace: 'nowrap',
+            opacity: clamp01((frame - PRICE_DROP - 1) / 3), transform: `scale(${mix(1.18, 1, newP).toFixed(4)})`, transformOrigin: '0% 80%',
+          }}>
+            Free
+          </div>
+          <div style={{
+            position: 'absolute', left: 412, top: 40, ...type(26, 700), color: BLUE, background: alpha(BLUE, 0.1),
+            boxShadow: `inset 0 0 0 1.5px ${alpha(BLUE, 0.25)}`, padding: '8px 16px', borderRadius: 99, letterSpacing: '0.04em', whiteSpace: 'nowrap',
+            opacity: chip, transform: `translateX(${((1 - chip) * -16).toFixed(2)}px)`,
+          }}>
+            OPEN SOURCE
+          </div>
+        </div>
+
+        {/* 正文：三行错峰 + 马克笔高亮 */}
+        <div style={{ position: 'absolute', left: COL, top: F.body.box.y, width: COLW, ...type(34, 450), lineHeight: '50px', color: L.ink2, letterSpacing: '-0.012em' }}>
+          {LINES.map((segs, li) => (
+            <div key={li} style={{ whiteSpace: 'nowrap', ...rise(landP(frame, 'body', li * 3), 14) }}>
+              {segs.map(([txt, mark], si) => !mark ? <span key={si}>{txt}</span> : (
+                <span key={si} style={{ position: 'relative', display: 'inline-block' }}>
+                  <span style={{
+                    position: 'absolute', left: -4, right: -4, top: 6, bottom: 4, borderRadius: '4px 8px 6px 3px',
+                    background: alpha(BLUE, 0.16), transform: `scaleX(${ramp(frame, 86 + li * 4, 6, EASE.out).toFixed(4)})`, transformOrigin: 'left center',
+                  }} />
+                  <span style={{ position: 'relative', color: L.ink, fontWeight: 620 }}>{txt}</span>
+                </span>
+              ))}
+            </div>
+          ))}
+        </div>
+
+        {/* 色卡：四枚 pop + 色名 */}
+        <div style={{ position: 'absolute', left: COL, top: F.swatch.box.y, height: 56, display: 'flex', alignItems: 'center', gap: 16 }}>
+          {SWATCHES.map(([c], i) => (
+            <div key={c} style={{
+              width: 52, height: 52, borderRadius: 26, marginRight: i === 0 ? 4 : 0,
+              background: `radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0) 55%), ${c}`,
+              boxShadow: i === 0 ? `0 0 0 4px #ffffff, 0 0 0 6px ${L.ink}` : `inset 0 0 0 1px ${alpha(L.ink, 0.12)}`,
+              ...pop(frame, F.swatch.at + LAND + i * 3),
+            }} />
+          ))}
+          <div style={{ marginLeft: 14, ...type(30, 450), color: L.ink3, ...rise(ramp(frame, F.swatch.at + 12, 12, EASE.snappy), 10) }}>
+            Look · <span style={{ color: L.ink, fontWeight: 650 }}>Ink</span>
+          </div>
+        </div>
+
+        {/* 按钮：底色由左向右填满 */}
+        <div style={{ position: 'absolute', left: F.cta.box.x, top: F.cta.box.y, width: F.cta.box.w, height: F.cta.box.h, borderRadius: 32, overflow: 'hidden', opacity: clamp01(cta * 4) }}>
+          <div style={{ position: 'absolute', inset: 0, background: L.ink, transform: `scaleX(${cta.toFixed(4)})`, transformOrigin: 'left center' }} />
+          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, ...type(30, 650), color: '#ffffff', opacity: ramp(frame, F.cta.at + 8, 8, EASE.out) }}>
+            Get the skill <span style={{ opacity: 0.5 }}>—</span> Free
+          </div>
+        </div>
+
+        {/* 填充光标：描边框 + AUTOFILL 签，领先字段跳格 */}
+        {cursorOp > 0.01 && (
+          <div style={{
+            position: 'absolute', left: cb.x - pad, top: cb.y - pad, width: cb.w + pad * 2, height: cb.h + pad * 2,
+            borderRadius: 22, border: `2.5px solid ${BLUE}`, background: alpha(BLUE, 0.04), opacity: cursorOp,
+            boxShadow: `0 0 0 6px ${alpha(BLUE, 0.08)}, 0 10px 30px ${alpha(BLUE, 0.16)}`,
+          }}>
+            <div style={{
+              position: 'absolute', right: 18, top: -17, height: 32, padding: '0 12px', borderRadius: 8, background: BLUE, color: '#ffffff',
+              display: 'flex', alignItems: 'center', gap: 8, fontFamily: FONT.mono, fontSize: 18, letterSpacing: '0.14em', whiteSpace: 'nowrap',
+            }}>
+              <span style={{ width: 8, height: 8, borderRadius: 4, background: '#ffffff', opacity: 0.6 + 0.4 * Math.sin(frame / 3) }} />
+              AUTOFILL
+            </div>
+          </div>
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/ui-entrance/radial-wave/RadialWave.tsx

@@ -0,0 +1,57 @@
+// radial-wave — Grid Radial Wave 点阵涟漪（motion-lab 定稿转原生 Remotion）
+// 17×9 圆点阵列，波从中心向外按欧氏距离 stagger 扩散：每点 scale 0→1.5→1 +
+// 亮度脉冲，波前过后留下常亮点阵；第二道波反向收拢。offset = k·dist(cell, origin)。
+// 设计坐标 480×270（DesignStage 等比放大），参数表数值以此坐标系标定。
+import React from 'react';
+import { DesignStage, E, seg, useT } from '../../_fixtures/Motion';
+
+export const RADIAL_WAVE_DURATION = 114; // 3800ms @30fps
+
+const COLS = 17;
+const ROWS = 9;
+const CX = (COLS - 1) / 2;
+const CY = (ROWS - 1) / 2;
+const MAX_D = Math.hypot(CX, CY);
+
+const DOTS = Array.from({ length: ROWS * COLS }, (_, i) => {
+  const r = Math.floor(i / COLS);
+  const c = i % COLS;
+  return {
+    left: `${((c + 0.5) / COLS) * 100}%`,
+    top: `${((r + 0.5) / ROWS) * 100}%`,
+    dist: Math.hypot(c - CX, r - CY) / MAX_D,
+  };
+});
+
+export const RadialWave: React.FC = () => {
+  const t = useT();
+  return (
+    <DesignStage bg="#0a0b10">
+      {DOTS.map(({ left, top, dist }, i) => {
+        // 第一道波：扩散点亮；第二道波：反向脉冲
+        const w1 = seg(t, dist * 0.35, dist * 0.35 + 0.18, E.outCubic);
+        const w2 = seg(t, 0.62 + (1 - dist) * 0.25, 0.62 + (1 - dist) * 0.25 + 0.15);
+        const pulse2 = Math.sin(w2 * Math.PI);
+        const s = w1 * (1 + 0.5 * Math.sin(w1 * Math.PI)) + pulse2 * 0.8;
+        return (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              width: 10,
+              height: 10,
+              borderRadius: '50%',
+              left,
+              top,
+              margin: -5,
+              background: pulse2 > 0.3 ? '#b9f2ff' : '#6c8cff',
+              transform: `scale(${s})`,
+              opacity: 0.25 + w1 * 0.5 + pulse2 * 0.25,
+              boxShadow: pulse2 > 0.3 ? '0 0 12px #7fd8ff' : 'none',
+            }}
+          />
+        );
+      })}
+    </DesignStage>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/ui-entrance/research-card-stack-scroll/ResearchCardStackScroll.tsx

@@ -0,0 +1,155 @@
+// research-card-stack-scroll — Research Stack 论文卡叠压滚流（motion-lab 定稿转原生 Remotion）
+// 深色论文卡沿微微向右下的轴线连续飞入并叠压在中心：入场是 translateY(-40)+scale 0.94→1
+// 的 6 帧短促 spring，落位带 1 帧压缩；只有最上一张全清晰渲染标题+作者+摘要，
+// 下方卡按 depth 递增 blur/变暗只露顶部标题条，背景浅灰横向 grid 同步移动做速度参照。
+// 设计坐标 480×270（DesignStage 等比放大），参数表数值以此坐标系标定。
+import React from 'react';
+import { DesignStage, E, lerp, rand, seg, useT } from '../../_fixtures/Motion';
+
+export const RESEARCH_CARD_STACK_SCROLL_DURATION = 144; // 4800ms @30fps
+
+const ORANGE = '#FF6A1F';
+const ORANGE_SOFT = '#FF8A44';
+const INK = '#1A1A1A';
+const FONT = '-apple-system,system-ui,"SF Pro Text","PingFang SC",sans-serif';
+
+// 原 setup 里的 stage.clientWidth/clientHeight 分支——原渲染 stage 恒为 480×270
+const W = 480;
+const H = 270;
+const F = 144; // recipe 帧总数（f = t·F）
+const PER = 12; // 每 12 帧进一张卡
+const GAP = 30; // 叠压后每张卡的下移间距
+const XOFF = 9; // 滚流时的右移量
+
+// 逻辑画布 420×250 → 实际 stage 的等比缩放
+const LW = 420;
+const LH = 250;
+const S = Math.min(W / LW, H / LH);
+
+const TITLES = [
+  'Sparse Attention Mechanisms for Long-Context Reasoning',
+  'Retrieval Drift in Multi-Hop Agent Pipelines',
+  'Latent Caching Reduces Tool-Call Latency by 41%',
+  'On the Calibration of Preference Reward Models',
+  'Grid-Aligned Motion Priors for UI Animation',
+  'Cheap Verifiers Beat Expensive Samplers',
+  'Structured Decoding Without Grammar Loss',
+  'Depth-Ordered Compositing for Live Interfaces',
+  'Token-Budget Routing in Agent Fleets',
+  'Contrastive Layouts for Document Understanding',
+  'Fast Approximate Re-Ranking at Query Time',
+  'Signal Propagation in Deep Residual Agents',
+  'A Note on Deterministic Replay of Motion',
+];
+const CW = 296;
+const CH = 96;
+
+export const ResearchCardStackScroll: React.FC = () => {
+  const t = useT();
+  const f = t * F;
+  const focus = Math.floor(f / PER); // 只有最上一张卡渲染正文
+  return (
+    <DesignStage bg="#FAFAFA">
+      {/* 背景横向 grid：随滚流同步下移做速度参照 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: -40,
+          backgroundImage: 'linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px)',
+          backgroundSize: '100% 24px',
+          transform: `translateY(${((f / PER) * GAP * S) % 24}px)`,
+        }}
+      />
+      {/* 逻辑画布 track：中心锚点 + 等比缩放 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          width: 0,
+          height: 0,
+          transformOrigin: '0 0',
+          transform: `scale(${S})`,
+        }}
+      >
+        {TITLES.map((tt, i) => {
+          const e = f - i * PER; // 该卡的本地帧
+          const p = seg(Math.max(0, Math.min(1, (e + 6) / 6)), 0, 1, E.outCubic); // 6 帧入场
+          const drift = (Math.max(0, e) / PER) * GAP; // 叠压后随流下移
+          const squash = e >= 0 && e < 1.6 ? 0.97 : 1; // 落位 1 帧压缩
+          const y = lerp(p, -40, 0) + drift;
+          const x = (Math.max(0, e) / PER) * XOFF;
+          const depth = Math.min(1, drift / (GAP * 3)); // depth 递增 blur + 变暗
+          const opacity =
+            e < -6 ? 0 : Math.min(1, (e + 6) / 2) * (1 - Math.max(0, (drift - GAP * 3.2) / (GAP * 1.6)));
+          return (
+            <div
+              key={i}
+              style={{
+                position: 'absolute',
+                left: -CW / 2,
+                top: -CH / 2 - 14,
+                width: CW,
+                height: CH,
+                background: INK,
+                borderRadius: 11,
+                overflow: 'hidden',
+                fontFamily: FONT,
+                zIndex: i,
+                opacity,
+                boxShadow: '0 14px 34px rgba(0,0,0,.22)',
+                border: '1px solid #2A2A2A',
+                boxSizing: 'border-box',
+                transform: `translate(${x}px,${y}px) scale(${lerp(p, 0.94, 1)},${lerp(p, 0.94, 1) * squash})`,
+                filter: `blur(${(depth * 4).toFixed(2)}px) brightness(${(1 - depth * 0.25).toFixed(3)})`,
+              }}
+            >
+              {/* 左侧色条：每 4 张一根橙色 */}
+              <div
+                style={{
+                  position: 'absolute',
+                  left: 0,
+                  top: 0,
+                  width: 3,
+                  height: '100%',
+                  background: i % 4 === 1 ? ORANGE : '#2E2E2E',
+                }}
+              />
+              {/* 标题条：所有卡都渲染 */}
+              <div
+                style={{
+                  position: 'absolute',
+                  left: 14,
+                  top: 11,
+                  width: 264,
+                  font: `650 9.5px/1.35 ${FONT}`,
+                  color: '#F0F0F0',
+                }}
+              >
+                {tt}
+              </div>
+              {/* 正文（作者 + 摘要骨架线）：只有 focus 卡可见 */}
+              <div style={{ position: 'absolute', left: 14, top: 40, width: 266, opacity: i === focus ? 1 : 0 }}>
+                <div style={{ font: `500 8px/1 ${FONT}`, color: ORANGE_SOFT, letterSpacing: '.3px' }}>
+                  {`A. Author, B. Writer, C. Reader · preprint:24${10 + i}.0${i % 9}${i % 7}`}
+                </div>
+                {[0, 1, 2, 3].map((k) => (
+                  <div
+                    key={k}
+                    style={{
+                      marginTop: k ? 5 : 9,
+                      width: `${100 - k * 11 - rand(i * 5 + k) * 12}%`,
+                      height: 4,
+                      borderRadius: 2,
+                      background: '#3A3A3A',
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </DesignStage>
+  );
+};