dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/ui-entrance/deck-deal-flyin/DeckDealFlyin.tsx

@@ -0,0 +1,307 @@
+// deck-deal-flyin —— 牌堆特写环绕 → 预备 → 一摞卡硬加速发进网格 → 相机追着发牌升起 → 满板定格（第二轮重设计）
+// 手法不变：实体牌堆（真实卡片切片）特写 orbit 开局，预备拍后 26 张卡按阅读序、出牌间隔硬加速地甩进页面网格，
+// 相机追着发牌走，满板后停住。
+//
+// 设计决定
+// - look = graphite（近单色暗场 · 白为强调 · 一点香槟金）。整镜头发生在一张暗色拉丝石墨桌面上：
+//   牌堆放在页面板（真实 projects 截图，Q1 纹理保留）右侧的桌面上，一盏顶光只打牌堆；
+//   拉远时"灯"从牌堆亮到页面板（板面由暗到亮的光圈），页面板像一块被摆上桌的白色展板，四周始终是暗场——
+//   不再整屏切成白纸，暗/亮反差贯穿到最后一帧。
+// - 相机：一条连续的单调 Hermite 样条（关键帧处速度连续，无顿挫）——低机位侧斜绕牌堆 → 拉远正视板顶 →
+//   追着越发越快的牌往板尾走、同时升高后仰 → 落在一张"跑道式"俯瞰：整块板沿对角线伸向远处，
+//   26 张卡全部在画，近大远小（满板的体量一眼可见）。俯瞰位只保留极缓推近（1.5%）。
+// - 景深：俯瞰位远端（板首）压暗 + 降对比，近端最亮——光跟着最后几张卡走到镜头前。
+// - 版式：满板后左下升起两行标题「Your product, / in motion.」（video-shotcraft 标语，120px 800/300 字重对比）+ 一行 mono 计数
+//   「video-shotcraft 标志 · 26 REAL PAGE CAPTURES」——计数在发牌期间就跟着落地数跳（26 张卡 = 26）。
+//
+// 时间表（30fps，共 150f）
+//   0–28    orbit：侧斜低机位绕牌堆（rotY −30°→+26°），顶光只打牌堆，板面暗
+//   26–36   预备：牌堆整体下压 48px、顶卡向出牌反方向回拉 30px（过肉眼阈值判例）
+//   36–~101 发牌：第 k 张 cue = 36 + 4k − 0.0792·k(k−1)（间隔 4f → 0.2f 硬加速），
+//           单卡 8f 俯冲（z 弧顶 + 峰值 1.06x）+ 4f 过冲落定 + 2f press；飞行残影
+//   34–62   拉远：板面光圈亮起，相机正视板顶
+//   62–108  追逐 + 升起：相机沿板往下追、升高后仰、侧转 → 跑道俯瞰
+//   100–126 标题逐词升起、计数行定格
+//   108–150 hold：满板静止（> 0.5s），极缓推近 + 光的呼吸
+import React from 'react';
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+import { EASE, FONT, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, type } from '../../_fixtures/Look';
+import layout from '../../_textures/live-layout.json';
+import { ShotcraftMark } from '../../_fixtures/Brand';
+
+export const DECK_DEAL_FLYIN_DURATION = 150;
+
+const L = LOOKS.graphite;
+const cards = layout.projects.cards;
+const PAGE_H = layout.projects.pageH;
+const PAPER = '#f9f6f1';
+
+// 页面板：只取内容区（左右各留一截页边），下方纸面延长容纳 16 张溢出卡
+const BOARD = { x: 352, w: 1216 };
+const COLS = [408, 781.328125, 1154.65625];
+const CARD_W = 357.328125;
+const EXTRA_ROWS = [1795, 2188, 2581, 2974, 3367];
+const BOARD_H = PAGE_H + 2036;
+
+const extras = Array.from({ length: 16 }, (_, i) => ({
+  file: `card${((i * 3 + 2) % 10) + 1}.png`,
+  x: i === 0 ? COLS[2] : COLS[(i - 1) % 3],
+  y: i === 0 ? 1402 : EXTRA_ROWS[Math.floor((i - 1) / 3)],
+  w: CARD_W,
+  h: 312,
+}));
+
+// 牌堆：放在板右侧的桌面上（页面坐标）
+const PILE = { x: 1640, y: 250 };
+const N_CARDS = 26;
+const DEAL_START = 36;
+const STACK_STEP = 3;
+const PILE_CX = PILE.x + CARD_W / 2;
+const PILE_CY = PILE.y + 156;
+
+const grid = [...cards.map((c) => ({ file: c.file, x: c.x, y: c.y, w: c.w, h: c.h })), ...extras]
+  .sort((a, b) => a.y - b.y || a.x - b.x)
+  .map((c, k) => ({
+    ...c,
+    cue: DEAL_START + 4 * k - 0.0792 * k * (k - 1),
+    px: PILE.x + (((k * 7) % 9) - 4) * 2,
+    py: PILE.y + (((k * 5) % 7) - 3) * 2,
+    protZ: ((k * 11) % 7) - 3,
+    pz: (N_CARDS - k) * STACK_STEP,
+  }));
+
+const HOVER_H = 40;
+const SETTLE_EASE = Easing.bezier(0.3, 0, 0.25, 1.15);
+const DIVE_EASE = Easing.bezier(0.3, 0, 0.2, 1);
+const ANTICIPATE = { from: 26, to: 36, pileDown: 48, topPull: 30 };
+
+// ───────────── 相机：单调三次 Hermite 样条（各参数分别过锚点，关键帧处速度连续） ─────────────
+type Cam = { cx: number; cy: number; zoom: number; rotX: number; rotY: number; rotZ: number; persp: number; sx: number };
+type Key = Cam & { frame: number };
+const ANCHORS: Key[] = [
+  { frame: 0, cx: PILE_CX - 40, cy: PILE_CY + 60, zoom: 1.9, rotX: 48, rotY: -30, rotZ: 9, persp: 1100, sx: 0 },
+  { frame: 30, cx: PILE_CX + 20, cy: PILE_CY + 40, zoom: 1.8, rotX: 42, rotY: 24, rotZ: -6, persp: 1100, sx: 0 },
+  { frame: 62, cx: 1080, cy: 760, zoom: 0.8, rotX: 22, rotY: 0, rotZ: 2, persp: 1700, sx: 0 },
+  { frame: 86, cx: 980, cy: 1720, zoom: 0.56, rotX: 38, rotY: -4, rotZ: -10, persp: 2500, sx: 120 },
+  { frame: 110, cx: 960, cy: 2150, zoom: 0.5, rotX: 52, rotY: -6, rotZ: -26, persp: 3300, sx: 300 },
+  { frame: 150, cx: 960, cy: 2160, zoom: 0.508, rotX: 52, rotY: -6, rotZ: -26, persp: 3300, sx: 300 },
+];
+const PARAMS: (keyof Cam)[] = ['cx', 'cy', 'zoom', 'rotX', 'rotY', 'rotZ', 'persp', 'sx'];
+const hermite = (xs: number[], ys: number[]) => {
+  const n = xs.length;
+  const d = xs.slice(0, -1).map((x, i) => (ys[i + 1] - ys[i]) / (xs[i + 1] - x));
+  const m = xs.map((_, i) => (i === 0 ? d[0] : i === n - 1 ? 0 : d[i - 1] * d[i] <= 0 ? 0 : (d[i - 1] + d[i]) / 2));
+  for (let i = 0; i < n - 1; i++) {
+    if (d[i] === 0) { m[i] = 0; m[i + 1] = 0; continue; }
+    const a = m[i] / d[i], b = m[i + 1] / d[i], h = a * a + b * b;
+    if (h > 9) { const k = 3 / Math.sqrt(h); m[i] = k * a * d[i]; m[i + 1] = k * b * d[i]; }
+  }
+  return (x: number) => {
+    if (x <= xs[0]) return ys[0];
+    if (x >= xs[n - 1]) return ys[n - 1];
+    let i = 0;
+    while (i < n - 2 && x > xs[i + 1]) i++;
+    const h = xs[i + 1] - xs[i];
+    const t = (x - xs[i]) / h;
+    const t2 = t * t, t3 = t2 * t;
+    return (2 * t3 - 3 * t2 + 1) * ys[i] + (t3 - 2 * t2 + t) * h * m[i] + (-2 * t3 + 3 * t2) * ys[i + 1] + (t3 - t2) * h * m[i + 1];
+  };
+};
+const CURVES = Object.fromEntries(PARAMS.map((p) => [p, hermite(ANCHORS.map((k) => k.frame), ANCHORS.map((k) => k[p]))])) as Record<keyof Cam, (x: number) => number>;
+const camAt = (f: number): Cam => Object.fromEntries(PARAMS.map((p) => [p, CURVES[p](f)])) as Cam;
+
+// ───────────── 拉丝石墨桌面纹理（确定性 feTurbulence：x 极低频 / y 高频 = 横向拉丝） ─────────────
+const BRUSH_TILE = (() => {
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'>` +
+    `<filter id='b' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'>` +
+    `<feTurbulence type='fractalNoise' baseFrequency='0.0018 0.62' numOctaves='3' seed='11' stitchTiles='stitch'/>` +
+    `<feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.4 0.4 0.4 0 -0.5'/>` +
+    `</filter><rect width='100%' height='100%' filter='url(#b)'/></svg>`;
+  return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+})();
+
+const T = 4000; // 桌面平面外扩（页面坐标），任意斜角不穿帮
+
+export const DeckDealFlyin: React.FC = () => {
+  const frame = useCurrentFrame();
+  const cam = camAt(frame);
+
+  // 板面"灯亮"：f34→64 以牌堆为圆心的柔边光圈把暗板照亮
+  const lightUp = interpolate(frame, [34, 64], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.5, 0, 0.6, 1) });
+  const holeR = 4200 * lightUp;
+  const feather = 600 + 1000 * lightUp;
+  // 俯瞰位景深：远端（板首）压暗
+  const fog = ramp(frame, 80, 34, EASE.smooth);
+
+  // 预备拍
+  const antT = interpolate(frame, [ANTICIPATE.from, ANTICIPATE.to], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.quad) });
+
+  // 计数：已落地张数
+  const landed = grid.filter((c) => frame >= c.cue + 8).length;
+  const statIn = ramp(frame, 90, 12, EASE.out);
+
+  const tableBg = [
+    // 顶光：落在牌堆上（开场最亮），随拉远扩大成照亮整块板的大光
+    `radial-gradient(${1100 + 1400 * lightUp}px ${800 + 1600 * lightUp}px at ${T + PILE_CX - 600 * lightUp}px ${T + PILE_CY + 900 * lightUp}px, rgba(235,232,224,${0.2 - 0.08 * lightUp}), rgba(220,216,206,0.05) 45%, transparent 70%)`,
+    // 宽幅镜面高光带
+    `linear-gradient(104deg, transparent ${T + PILE_CX - 1600}px, rgba(220,226,236,0.07) ${T + PILE_CX - 500}px, rgba(240,244,252,0.11) ${T + PILE_CX}px, rgba(220,226,236,0.05) ${T + PILE_CX + 600}px, transparent ${T + PILE_CX + 1800}px)`,
+    `${BRUSH_TILE} 0 0 / 640px 640px repeat`,
+    'linear-gradient(115deg, #1b1c1f 0%, #24262a 30%, #18191c 56%, #202226 80%, #141518 100%)',
+  ].join(', ');
+
+  const persp = cam.persp * cam.zoom;
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT.sans, overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.6, y: 0.2 }} fill={null} intensity={0.5} grain={0} vignette={0} />
+
+      {/* 3D 相机（PageCam2D 同款坐标数学：CSS zoom 做放大，Q2 文字按放大后尺寸栅格化） */}
+      <AbsoluteFill style={{ transform: `translateX(${cam.sx.toFixed(2)}px)` }}>
+        <div style={{ position: 'absolute', inset: 0, perspective: `${persp.toFixed(2)}px`, perspectiveOrigin: '960px 540px' }}>
+          <div
+            style={{
+              position: 'absolute', width: 1920, height: BOARD_H, zoom: cam.zoom,
+              transform: `translate(${(960 / cam.zoom - cam.cx).toFixed(3)}px, ${(540 / cam.zoom - cam.cy).toFixed(3)}px) rotateY(${cam.rotY.toFixed(3)}deg) rotateX(${cam.rotX.toFixed(3)}deg) rotateZ(${cam.rotZ.toFixed(3)}deg)`,
+              transformOrigin: `${cam.cx.toFixed(2)}px ${cam.cy.toFixed(2)}px`,
+              transformStyle: 'preserve-3d',
+            }}
+          >
+            {/* 石墨桌面：远处柔边隐进暗场 */}
+            <div
+              style={{
+                position: 'absolute', left: -T, top: -T, width: 1920 + 2 * T, height: BOARD_H + 2 * T, background: tableBg,
+                WebkitMaskImage: `radial-gradient(ellipse ${2600}px ${3600}px at ${T + 960}px ${T + BOARD_H / 2}px, #000 40%, transparent 100%)`,
+                maskImage: `radial-gradient(ellipse ${2600}px ${3600}px at ${T + 960}px ${T + BOARD_H / 2}px, #000 40%, transparent 100%)`,
+              }}
+            />
+
+            {/* 页面板：真实截图 + 纸面延长；落在桌上的大投影 + 上沿受光 */}
+            <div
+              style={{
+                position: 'absolute', left: BOARD.x, top: 0, width: BOARD.w, height: BOARD_H, overflow: 'hidden', borderRadius: 18,
+                background: PAPER,
+                boxShadow: '0 0 0 1px rgba(255,255,255,0.08), 0 60px 160px rgba(0,0,0,0.7), 0 12px 40px rgba(0,0,0,0.5)',
+              }}
+            >
+              <Img src={staticFile('textures/live/projects-empty.png')} style={{ position: 'absolute', left: -BOARD.x, top: 0, width: 1920, height: PAGE_H }} />
+              {/* 纸面延长段的分区小标（与截图同款排版：大写字距 + 计数） */}
+              <div style={{ position: 'absolute', left: 408 - BOARD.x, top: PAGE_H + 6, width: 1104, height: 1, background: 'rgba(60,45,30,0.08)' }} />
+              {/* 板面暗层：开场整块板在暗处，灯从牌堆处亮开（柔边光圈） */}
+              {lightUp < 1 && (
+                <div
+                  style={{
+                    position: 'absolute', inset: 0, background: 'rgba(14,14,16,0.88)',
+                    WebkitMaskImage: lightUp > 0 ? `radial-gradient(circle at ${PILE_CX - BOARD.x}px ${PILE_CY}px, transparent ${holeR.toFixed(0)}px, #000 ${(holeR + feather).toFixed(0)}px)` : undefined,
+                    maskImage: lightUp > 0 ? `radial-gradient(circle at ${PILE_CX - BOARD.x}px ${PILE_CY}px, transparent ${holeR.toFixed(0)}px, #000 ${(holeR + feather).toFixed(0)}px)` : undefined,
+                  }}
+                />
+              )}
+            </div>
+
+            {/* 26 张卡：牌堆在板右侧桌面上，按硬加速节拍逐张发进网格 */}
+            {grid.map((c, i) => {
+              const { cue } = c;
+              const diveT = interpolate(frame, [cue, cue + 8], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: DIVE_EASE });
+              const settleT = interpolate(frame, [cue + 8, cue + 12], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: SETTLE_EASE });
+              const dx = (c.px - c.x) * (1 - diveT);
+              const dy = (c.py - c.y) * (1 - diveT);
+              const rotFlight = c.protZ * (1 - diveT);
+              const arc = Math.sin(diveT * Math.PI) * 110;
+              const zDive = interpolate(diveT, [0, 1], [c.pz, HOVER_H]) + arc;
+              const z = frame < cue ? c.pz : zDive * (1 - settleT);
+              const dealScale = 1 + Math.sin(diveT * Math.PI) * 0.06;
+              const press = interpolate(frame, [cue + 10, cue + 11, cue + 12], [1, 0.996, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+              const scale = dealScale * press;
+              const isLanded = frame >= cue + 12;
+              const inPile = frame < cue;
+              const antDy = inPile ? ANTICIPATE.pileDown * antT * (frame < ANTICIPATE.to + 2 ? 1 : 0) : 0;
+              const antPull = i === 0 && inPile ? ANTICIPATE.topPull * antT : 0;
+              const transform = isLanded
+                ? 'translate3d(0px, 0px, 0px)'
+                : inPile
+                  ? `translate3d(${c.px - c.x - antPull}px, ${c.py - c.y + antDy}px, ${c.pz}px) rotateZ(${c.protZ}deg)`
+                  : `translate3d(${dx}px, ${dy}px, ${z}px) rotateZ(${rotFlight}deg) scale(${scale})`;
+              // 阴影：牌堆在暗桌上投重影；飞行时又高又虚；落地后在纸面上收成静置影（滞后卡体 ~3f 收敛）
+              const shadowLag = interpolate(frame, [cue + 8, cue + 15], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: EASE.out });
+              const shadow = isLanded
+                ? `0 ${(2 + 14 * (1 - shadowLag)).toFixed(1)}px ${(6 + 30 * (1 - shadowLag)).toFixed(1)}px rgba(40,30,20,${(0.1 + 0.12 * (1 - shadowLag)).toFixed(3)})`
+                : inPile
+                  ? i === N_CARDS - 1
+                    ? '0 1px 3px rgba(0,0,0,.4), 0 26px 60px rgba(0,0,0,0.75)'
+                    : '0 1px 2px rgba(0,0,0,.35)'
+                  : `0 ${36 - 24 * settleT}px ${70 - 50 * settleT}px rgba(0,0,0,${(0.45 - 0.25 * settleT).toFixed(3)})`;
+              const showGhost = diveT > 0.02 && diveT < 0.98;
+              const gx = (c.px - c.x) * 0.06;
+              const gy = (c.py - c.y) * 0.06;
+              // 牌堆里的卡带一点顶光暗部（开场只亮顶面），灯亮后恢复
+              // 落进还没被照亮的板面区域的卡同样在暗处（与板面光圈同一公式），牌堆本身只压一点暗部
+              const dist = Math.hypot(c.x + c.w / 2 - PILE_CX, c.y + c.h / 2 - PILE_CY);
+              const dark = Math.min(1, Math.max(0, (dist - holeR) / feather)) * 0.88 * (lightUp < 1 ? 1 : 0);
+              const pileShade = inPile ? 0.08 * (1 - lightUp) : diveT > 0.6 ? dark * Math.min(1, (diveT - 0.6) / 0.4) : 0;
+              return (
+                <div key={`${c.file}-${i}`} style={{ transformStyle: 'preserve-3d' }}>
+                  {showGhost ? (
+                    <div
+                      style={{
+                        position: 'absolute', left: c.x, top: c.y, width: c.w, height: c.h,
+                        transform: `translate3d(${dx + gx}px, ${dy + gy}px, ${z}px) rotateZ(${rotFlight}deg) scale(${scale})`,
+                        opacity: 0.28 * (1 - diveT), filter: 'blur(7px)', borderRadius: 16, overflow: 'hidden',
+                      }}
+                    >
+                      <Img src={staticFile(`textures/live/${c.file}`)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
+                    </div>
+                  ) : null}
+                  <div
+                    style={{
+                      position: 'absolute', left: c.x, top: c.y, width: c.w, height: c.h,
+                      transform, boxShadow: shadow, borderRadius: 16, overflow: 'hidden',
+                    }}
+                  >
+                    <Img src={staticFile(`textures/live/${c.file}`)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
+                    {pileShade > 0.005 && <div style={{ position: 'absolute', inset: 0, background: `rgba(10,10,12,${pileShade.toFixed(3)})` }} />}
+                  </div>
+                </div>
+              );
+            })}
+
+            {fog > 0 && (
+              <div
+                style={{
+                  position: 'absolute', left: BOARD.x - 2, top: -2, width: BOARD.w + 4, height: BOARD_H + 4, pointerEvents: 'none', borderRadius: 18,
+                  transform: 'translateZ(1px)',
+                  background: `linear-gradient(180deg, rgba(12,12,14,${(0.62 * fog).toFixed(3)}) 0%, rgba(12,12,14,${(0.3 * fog).toFixed(3)}) 35%, rgba(12,12,14,0) 70%)`,
+                }}
+              />
+            )}
+          </div>
+        </div>
+      </AbsoluteFill>
+
+      {/* 暗角 + 颗粒（屏幕空间，全程） */}
+      <AbsoluteFill style={{ pointerEvents: 'none', background: `radial-gradient(ellipse 75% 75% at 58% 46%, transparent 45%, ${alpha('#050506', 0.55)} 100%)` }} />
+
+      {/* 左下：标题 + 计数行 */}
+      <div style={{ position: 'absolute', left: 120, top: 664, color: L.ink }}>
+        <div style={{ ...type(120, 800) }}>
+          <TextReveal text="Your product," by="word" variant="rise" start={100} each={16} gap={4} />
+        </div>
+        <div style={{ ...type(120, 300), color: L.ink2, marginTop: 4 }}>
+          <TextReveal text="in motion." by="word" variant="rise" start={106} each={16} gap={4} />
+        </div>
+      </div>
+      <div
+        style={{
+          position: 'absolute', left: 124, top: 610, display: 'flex', alignItems: 'center', gap: 16, opacity: statIn,
+          ...type(30, 600, { mono: true }), letterSpacing: '0.14em', color: L.ink2,
+        }}
+      >
+        {/* video-shotcraft 标志（暗底反白版，不加发光） */}
+        <ShotcraftMark size={34} tone="dark" style={{ margin: '-6px 0' }} />
+        <span style={{ color: L.ink, fontVariantNumeric: 'tabular-nums', minWidth: '2.2ch' }}>{String(landed).padStart(2, '0')}</span>
+        REAL PAGE CAPTURES
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/ui-entrance/doc-park-left-pill-deal/DocParkLeftPillDeal.tsx

@@ -0,0 +1,349 @@
+// doc-park-left-pill-deal — Doc Park 文档靠左 + 结论慢发牌（motion-lab 定稿转原生 Remotion）
+// 扫描结束文档不淡出，而是向左滑出只露约 35% 宽并微缩到 0.92；右侧按旁白节奏
+// 慢速发牌三张白底描边药丸（outBack 弹入），每张落定后其下方走逐词加深字幕、
+// 下一张到来前整句淡出；左侧文档全程做极缓慢自动滚动保持"正在被读"。
+// 设计坐标 480×270（DesignStage 等比放大），440×240 定尺画布居中排版。
+// 质感层（改版）：文档从骨架条换成出版级 video-shotcraft「宣传片简报」正文（标题 / 元信息 / 分节正文），
+// 右侧三张药丸是 agent 据此推荐的三张镜头配方卡（Crash Zoom / Deck Deal / Logo Sting）；
+// 自动滚动改为连续匀速（原取模写法每 1/3 片长整页回跳 40px）；每张药丸落定时，文档里对应的
+// 依据句被荧光笔划出，并有一条强调色细线从该句连到药丸（"结论从文档里长出来"），随字幕退场；
+// 药丸换成受光白面 + 发丝线 + 两层软阴影 + 强调色图标底；柔光浅底 + 颗粒。
+import React from 'react';
+import { AbsoluteFill } from 'remotion';
+import { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';
+import { Backdrop, EASE, FONT, softShadow } from '../../_fixtures/Polish';
+
+export const DOC_PARK_LEFT_PILL_DEAL_DURATION = 174; // 5800ms @30fps
+
+// ---- 本卡共享量（浅灰瑞士极简系配色，与 Phase 0 fixture 令牌协调） ----
+const SANS = FONT.sans;
+const TXT = '#17181c'; // 正文近黑（带冷调）
+const DIM = '#c4c6cc'; // 浅灰占位字
+const INK2 = '#5d5f66';
+const INK3 = '#9b9da3';
+const LINE = 'rgba(20,22,28,0.09)'; // 发丝描边
+const ACCENT = '#5b63d3';
+
+const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);
+const h2r = (h: string) => [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];
+// 颜色插值：mix(p,'#C9C9CE','#111')
+const mix = (p: number, a: string, b: string) => {
+  const A = h2r(a), B = h2r(b), q = clamp01(p);
+  return `rgb(${Math.round(A[0] + (B[0] - A[0]) * q)},${Math.round(A[1] + (B[1] - A[1]) * q)},${Math.round(A[2] + (B[2] - A[2]) * q)})`;
+};
+
+// 简易线性占位图标（纯 SVG，零依赖），强调色描边
+// zoom = 推镜取景角标、deck = 一摞卡、sting = 星芒（片尾 logo 一击）
+const Icon: React.FC<{ k: 'zoom' | 'deck' | 'sting'; size: number }> = ({ k, size }) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={ACCENT} strokeWidth={1.35} strokeLinecap="round" strokeLinejoin="round">
+    {k === 'zoom' && (
+      <>
+        <path d="M2.5 6V2.5H6M10 2.5h3.5V6M13.5 10v3.5H10M6 13.5H2.5V10" />
+        <circle cx={8} cy={8} r={1.6} />
+      </>
+    )}
+    {k === 'deck' && (
+      <>
+        <rect x={4.5} y={2.5} width={9} height={7} rx={1.4} />
+        <path d="M2.5 6.2v5.9c0 .8.6 1.4 1.4 1.4h7.4" />
+      </>
+    )}
+    {k === 'sting' && (
+      <>
+        <path d="M8 2.2 9.3 6.7 13.8 8 9.3 9.3 8 13.8 6.7 9.3 2.2 8 6.7 6.7Z" />
+      </>
+    )}
+  </svg>
+);
+
+// 逐词加深字幕（本系列统一语法）：浅灰占位 → 逐词加深到黑 → 逐词淡回浅灰 → 整行归零
+// innP: 入场加深进度；outP: 出场进度（>0 时覆盖颜色与整行透明）；showV: 行基础透明
+const Caption: React.FC<{
+  text: string;
+  left: number;
+  top: number;
+  size: number;
+  showV: number;
+  innP: number;
+  outP: number;
+}> = ({ text, left, top, size, showV, innP, outP }) => {
+  const words = text.split(' ');
+  const n = words.length;
+  const st = 0.78 / n, win = st * 1.5; // 入场逐词交错
+  const stw = 0.55 / n;                // 出场逐词交错
+  const rowOpacity = outP > 0 ? clamp01(1 - (outP - 0.7) / 0.3) : showV;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        display: 'flex',
+        alignItems: 'baseline',
+        whiteSpace: 'nowrap',
+        left,
+        top,
+        opacity: rowOpacity,
+      }}
+    >
+      {words.map((w, i) => {
+        const q = clamp01((innP - i * st) / win);
+        let color = mix(q, DIM, TXT);
+        if (outP > 0) {
+          const p = clamp01((outP - i * stw) / (stw * 1.4));
+          color = mix(1 - p, DIM, TXT);
+        }
+        return (
+          <span
+            key={i}
+            style={{
+              font: `600 ${size}px/1.25 ${SANS}`,
+              color,
+              letterSpacing: (-0.03 * (1 - q)).toFixed(4) + 'em',
+              marginRight: i === n - 1 ? 0 : 4.5,
+            }}
+          >
+            {w}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+// ---- 文档：出版级客户档案（内容坐标，宽 DW；只露右侧约 35%，行尾要铺满） ----
+const DW = 250, DH = 190;
+type Line = { y: number; kind: 'title' | 'meta' | 'h' | 'p'; text: string; mark?: number };
+const DOC: Line[] = [
+  { y: 17, kind: 'title', text: 'Launch film brief · video-shotcraft' },
+  { y: 30, kind: 'meta', text: 'Prepared by the Shotcraft agent  ·  Oct 2  ·  12 captures' },
+  { y: 53, kind: 'h', text: 'PRODUCT' },
+  { y: 63, kind: 'p', text: 'Agent skill for Claude Code and Codex, rendered with Remotion.' },
+  { y: 73, kind: 'p', text: 'Takes a frontend repo, real page captures and a one-line prompt.' },
+  { y: 83, kind: 'p', text: 'Ships a 1080p promo with beat-synced cuts and film-grade SFX.' },
+  { y: 97, kind: 'h', text: 'OPENER' },
+  { y: 107, kind: 'p', text: 'Wants a bold opener that hits the hero number on the first beat.', mark: 0 },
+  { y: 117, kind: 'p', text: 'Asked twice for camera moves instead of static slide transitions.' },
+  { y: 127, kind: 'p', text: 'The hook has to read in two seconds on a muted autoplay feed.' },
+  { y: 141, kind: 'h', text: 'MIDDLE' },
+  { y: 151, kind: 'p', text: 'The shot recipe library is the proof point viewers remember.', mark: 1 },
+  { y: 161, kind: 'p', text: 'Cards should pour in fast enough to feel like a full catalogue.' },
+  { y: 171, kind: 'p', text: 'Keep the 2.5D camera moving; no frame should sit dead for long.' },
+  { y: 185, kind: 'h', text: 'ENDING' },
+  { y: 195, kind: 'p', text: 'Every cut should resolve on the Frame Chisel mark at the close.', mark: 2 },
+  { y: 205, kind: 'p', text: 'Hold the final lockup for a full second before the music tails.' },
+  { y: 215, kind: 'p', text: 'The wordmark stays lowercase; amber is the only accent colour.' },
+  { y: 229, kind: 'h', text: 'AUDIO' },
+  { y: 239, kind: 'p', text: 'Track runs at 120 bpm; cuts snap to the downbeat of each bar.' },
+  { y: 249, kind: 'p', text: 'A whoosh on every camera move, one heavy hit on the logo sting.' },
+  { y: 259, kind: 'p', text: 'Voiceover optional; on-screen captions carry the story on mute.' },
+  { y: 273, kind: 'h', text: 'NEXT STEPS' },
+  { y: 283, kind: 'p', text: 'Render the crash zoom, deck deal and logo sting as a first cut.' },
+  { y: 293, kind: 'p', text: 'Open the workbench to tune timing and swap shots beat by beat.' },
+  { y: 303, kind: 'p', text: 'Export a JianYing draft for the final pass with the team.' },
+];
+// 自动滚动总行程（设计 px）：等于原 3 周期 × 40 的速度（≈0.7px/f），改为连续匀速、不回跳
+const SCROLL = 120;
+// 文档内容坐标 → 画布坐标（与文档窗格 transform 同一套：left 34 / top 25 / origin 左缘中点）
+const DOC_LEFT = 34, DOC_TOP = (240 - DH) / 2;
+
+const ITEMS: { n: string; ic: 'zoom' | 'deck' | 'sting'; cap: string }[] = [
+  { n: 'Crash Zoom', ic: 'zoom', cap: 'Zoom lands the hero number' },
+  { n: 'Deck Deal', ic: 'deck', cap: 'Deal shows off the shot library' },
+  { n: 'Logo Sting', ic: 'sting', cap: 'Sting ends on the brand mark' },
+];
+const PX = 214, PY = 54, PH = 34, PG = 14;
+const T0 = [0.26, 0.48, 0.70]; // 三张药丸的发牌起点
+
+export const DocParkLeftPillDeal: React.FC = () => {
+  const t = useT();
+  // 文档靠左驻留：滑出只露约 35% 宽 + 微缩 0.92
+  const park = seg(t, 0.06, 0.24, E.inOutCubic);
+  const tx = lerp(park, 0, -0.55 * DW);
+  const sc = lerp(park, 1, 0.92);
+  // 极缓慢自动滚动：连续匀速（不取模，避免整页回跳）
+  const scrollY = -t * SCROLL;
+  const toCanvas = (xd: number, yd: number) => ({
+    x: DOC_LEFT + tx + sc * xd,
+    y: DOC_TOP + DH / 2 + sc * (yd - DH / 2),
+  });
+
+  return (
+    <AbsoluteFill>
+      <Backdrop tone="light" light={{ x: 0.6, y: 0.24 }} accent={ACCENT} grain={0.05} vignette={0.12} />
+      <DesignStage bg="transparent">
+        {/* 页面 + 440×240 定尺画布（居中） */}
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            overflow: 'hidden',
+            fontFamily: SANS,
+            WebkitFontSmoothing: 'antialiased',
+          }}
+        >
+          <div style={{ position: 'absolute', left: '50%', top: '50%', width: 440, height: 240, margin: '-120px 0 0 -220px' }}>
+            {/* 左侧文档窗格：靠左驻留 + 微缩，origin 钉在左缘中点 */}
+            <div
+              style={{
+                position: 'absolute',
+                left: DOC_LEFT,
+                top: DOC_TOP,
+                width: DW,
+                height: DH,
+                transformOrigin: '0% 50%',
+                transform: `translateX(${tx.toFixed(2)}px) scale(${sc.toFixed(4)})`,
+              }}
+            >
+              {/* 文档卡：白面 + 发丝线 + 内高光 + 两层软阴影 */}
+              <div
+                style={{
+                  position: 'absolute',
+                  left: 0,
+                  top: 0,
+                  width: DW,
+                  height: DH,
+                  background: '#fff',
+                  border: `0.5px solid ${LINE}`,
+                  borderRadius: 10,
+                  boxShadow: `inset 0 0.5px 0 rgba(255,255,255,1), ${softShadow(6, { strength: 0.7 })}`,
+                  overflow: 'hidden',
+                }}
+              >
+                <div style={{ position: 'absolute', left: 0, top: 0, right: 0, height: 330, transform: `translateY(${scrollY.toFixed(2)}px)` }}>
+                  <div style={{ position: 'absolute', left: 14, right: 14, top: 41.5, height: 0.5, background: LINE }} />
+                  {DOC.map((l, i) => {
+                    const st: React.CSSProperties =
+                      l.kind === 'title'
+                        ? { fontSize: 8.6, fontWeight: 650, color: TXT, letterSpacing: '-0.015em' }
+                        : l.kind === 'meta'
+                          ? { fontSize: 5.4, fontWeight: 500, color: INK3, letterSpacing: '0.01em' }
+                          : l.kind === 'h'
+                            ? { fontSize: 5, fontWeight: 650, color: INK3, letterSpacing: '0.1em' }
+                            : { fontSize: 6.3, fontWeight: 450, color: INK2, letterSpacing: '0' };
+                    // 依据句荧光笔：对应药丸落定后自左向右划出
+                    const mk = l.mark !== undefined ? seg(t, T0[l.mark] + 0.06, T0[l.mark] + 0.13, EASE.out) : 0;
+                    return (
+                      <div key={i} style={{ position: 'absolute', left: 14, width: DW - 28, top: l.y - 5, height: 10, lineHeight: '10px', whiteSpace: 'nowrap', ...st }}>
+                        {mk > 0 && (
+                          <div
+                            style={{
+                              position: 'absolute',
+                              left: -2,
+                              top: 1.2,
+                              height: 7.6,
+                              width: `calc(${(mk * 100).toFixed(1)}% + 4px)`,
+                              borderRadius: 2,
+                              background: 'rgba(91,99,211,0.14)',
+                            }}
+                          />
+                        )}
+                        <span style={{ position: 'relative', color: mk > 0 ? mix(mk, '#5d5f66', '#2c3190') : undefined }}>{l.text}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+
+            {/* 依据连线：文档依据句右端 → 药丸左缘，药丸落定后 draw-on，随字幕退场淡出 */}
+            <svg width={440} height={240} style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible' }}>
+              {ITEMS.map((_, k) => {
+                const f = T0[k];
+                const ce = k < 2 ? T0[k + 1] - 0.03 : 0.98;
+                const draw = seg(t, f + 0.04, f + 0.11, EASE.out);
+                const fade = 1 - seg(t, ce - 0.06, ce - 0.01, EASE.out);
+                if (draw <= 0 || fade <= 0) return null;
+                const line = DOC.find((l) => l.mark === k)!;
+                const a = toCanvas(DW - 6, line.y + scrollY);
+                const b = { x: PX - 3, y: PY + k * (PH + PG) + PH / 2 };
+                const mx = (a.x + b.x) / 2;
+                return (
+                  <g key={k} opacity={(0.9 * fade).toFixed(3)}>
+                    <path
+                      d={`M${a.x.toFixed(2)},${a.y.toFixed(2)} C${mx.toFixed(2)},${a.y.toFixed(2)} ${mx.toFixed(2)},${b.y.toFixed(2)} ${b.x.toFixed(2)},${b.y.toFixed(2)}`}
+                      fill="none"
+                      stroke={ACCENT}
+                      strokeWidth={0.75}
+                      strokeLinecap="round"
+                      pathLength={1}
+                      strokeDasharray="1 1"
+                      strokeDashoffset={(1 - draw).toFixed(4)}
+                    />
+                    <circle cx={a.x} cy={a.y} r={1.6} fill={ACCENT} opacity={Math.min(1, draw * 3)} />
+                  </g>
+                );
+              })}
+            </svg>
+
+            {/* 右侧三张药丸 + 逐词字幕，按 T0 节奏慢发牌 */}
+            {ITEMS.map((it, k) => {
+              const f = T0[k];
+              const o = seg(t, f, f + 0.035, E.outQuad);
+              const b = seg(t, f, f + 0.062, E.outBack);
+              // 字幕：落定 +3 帧起加深，下一张入场前淡出
+              const cs = f + 0.05, ce = k < 2 ? T0[k + 1] - 0.03 : 0.98;
+              const showV = seg(t, cs, cs + 0.02);
+              const innP = seg(t, cs, cs + (ce - cs) * 0.7);
+              const outP = seg(t, ce - 0.05, ce, E.outQuad);
+              // 落定前阴影更高更虚（飞入感），落定后收成静置阴影
+              const lift = lerp(clamp01(b), 14, 4);
+              return (
+                <React.Fragment key={k}>
+                  <div
+                    style={{
+                      position: 'absolute',
+                      left: PX,
+                      top: PY + k * (PH + PG),
+                      width: 172,
+                      height: PH,
+                      borderRadius: PH / 2,
+                      background: 'linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%)',
+                      border: `0.5px solid ${LINE}`,
+                      boxSizing: 'border-box',
+                      boxShadow: `inset 0 0.5px 0 rgba(255,255,255,1), ${softShadow(lift, { strength: 0.75 })}`,
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8,
+                      padding: '0 12px 0 7px',
+                      opacity: o,
+                      transform: `translateY(${lerp(b, 14, 0).toFixed(2)}px) scale(${lerp(b, 0.94, 1).toFixed(4)})`,
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: 21,
+                        height: 21,
+                        borderRadius: 11,
+                        background: 'rgba(91,99,211,0.10)',
+                        border: '0.5px solid rgba(91,99,211,0.16)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flex: 'none',
+                      }}
+                    >
+                      <Icon k={it.ic} size={12} />
+                    </div>
+                    <div style={{ font: `600 12.5px/1 ${SANS}`, color: TXT, letterSpacing: '-.012em' }}>{it.n}</div>
+                    <div style={{ flex: 1 }} />
+                    <div style={{ font: `500 8px/1 ${SANS}`, color: INK3, letterSpacing: '0.02em', fontVariantNumeric: 'tabular-nums' }}>
+                      {['92%', '88%', '95%'][k]}
+                    </div>
+                  </div>
+                  <Caption
+                    text={it.cap}
+                    left={PX + 4}
+                    top={PY + k * (PH + PG) + PH + 7}
+                    size={11}
+                    showV={showV}
+                    innP={innP}
+                    outP={outP}
+                  />
+                </React.Fragment>
+              );
+            })}
+          </div>
+        </div>
+      </DesignStage>
+    </AbsoluteFill>
+  );
+};