dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/camera/tension-camera-moves/PullBackIsolation.tsx

@@ -0,0 +1,184 @@
+// 拉远孤立收束（pull-back-isolation）——pull-back shot。
+// 相机容器 scale 2.2→0.62（0–110f，Easing.out(cubic)）：开场怼在主卡
+// "99.9%" 特写上，缓缓后拉露出周围 8 张兄弟卡。帧 30 起兄弟卡按离主卡
+// 距离由近到远错峰熄灭（每 8f 一张，opacity→0 + brightness 压暗）；
+// 背景 60–110f 从亮场沉入带色相的深场 #111216；主卡白光晕 60–100f 淡入。
+// 帧 110–150 完全静止：暗场中央孤悬一张发光小卡——全片只为这一个数字。
+//
+// 改版要点：主卡从"白罩压在占位卡上"改为出版级指标卡（标签 + 大数字 +
+// 90 天可用率条带 + 页脚）；相机按 2.2 倍布局（CSS zoom）再缩小，开场特写
+// 文字锐利（审美准则 Q2）；兄弟卡熄灭时轻微下沉（scale 0.97）+ 失焦，而非原地变灰；
+// 背景由柔光亮底交叉沉入深场，光晕带冷色相，卡面受光上沿随暗场浮现。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing, AbsoluteFill } from 'remotion';
+import { Card, G } from '../../_fixtures/Fixtures';
+import { Backdrop, EASE, FONT, Grain, mix, softShadow } from '../../_fixtures/Polish';
+
+export const PULL_BACK_ISOLATION_DURATION = 150; // 110f 后拉 + 40f 孤悬静止
+
+// 8 张兄弟卡：相对主卡中心 (960,540) 的偏移 + 尺寸 + seed
+const SIBS = [
+  { dx: -620, dy: -330, w: 360, h: 240, seed: 3 },
+  { dx: 10, dy: -390, w: 420, h: 220, seed: 4 },
+  { dx: 620, dy: -320, w: 380, h: 260, seed: 5 },
+  { dx: -680, dy: 20, w: 340, h: 230, seed: 6 },
+  { dx: 700, dy: 40, w: 360, h: 250, seed: 7 },
+  { dx: -600, dy: 360, w: 400, h: 240, seed: 8 },
+  { dx: 40, dy: 400, w: 440, h: 220, seed: 9 },
+  { dx: 640, dy: 350, w: 370, h: 250, seed: 10 },
+].map((s) => ({ ...s, dist: Math.hypot(s.dx, s.dy) }));
+
+// 按离主卡距离排名 → 错峰熄灭顺序（近的先灭）
+const RANKED = SIBS.map((s, i) => i).sort((a, b) => SIBS[a].dist - SIBS[b].dist);
+const FADE_START = RANKED.reduce<number[]>((acc, idx, rank) => {
+  acc[idx] = 30 + rank * 8;
+  return acc;
+}, []);
+const FADE_DUR = 16;
+
+const clamp = { extrapolateLeft: 'clamp' as const, extrapolateRight: 'clamp' as const };
+
+// 相机布局倍率 = 起始特写倍率：按 2.2 倍栅格化，之后只做缩小
+const Z = 2.2;
+
+// 90 天渲染成功率条带：确定性，大部分全绿、2 天降级（让 99.9% 可信）
+const DAYS = Array.from({ length: 45 }, (_, i) => (i === 17 ? 1 : i === 33 ? 2 : 0));
+
+const HeroCard: React.FC<{ rim: number }> = ({ rim }) => (
+  <div
+    style={{
+      position: 'absolute',
+      inset: 0,
+      borderRadius: 18,
+      background: 'linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%)',
+      border: '1px solid rgba(20,22,28,0.08)',
+      boxSizing: 'border-box',
+      padding: '30px 34px 26px',
+      display: 'flex',
+      flexDirection: 'column',
+      fontFamily: FONT.sans,
+      overflow: 'hidden',
+      boxShadow: `inset 0 1px 0 rgba(255,255,255,${0.9 + rim * 0.1})`,
+    }}
+  >
+    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+      <div style={{ width: 9, height: 9, borderRadius: 5, background: '#2fa36b', boxShadow: '0 0 0 4px rgba(47,163,107,0.14)' }} />
+      <div style={{ fontSize: 17, fontWeight: 600, color: G.ink1, letterSpacing: '-0.01em' }}>Render success</div>
+      <div style={{ marginLeft: 'auto', fontSize: 13, fontWeight: 550, color: G.ink2, padding: '3px 9px', borderRadius: 7, background: G.fill, boxShadow: `inset 0 0 0 1px ${G.hairline}` }}>
+        90 days
+      </div>
+    </div>
+    <div
+      style={{
+        marginTop: 18,
+        fontSize: 128,
+        fontWeight: 700,
+        lineHeight: 0.96,
+        letterSpacing: '-0.045em',
+        color: G.ink1,
+        fontVariantNumeric: 'tabular-nums',
+      }}
+    >
+      99.9<span style={{ fontSize: '0.56em', fontWeight: 600, color: G.ink2, marginLeft: '0.04em' }}>%</span>
+    </div>
+    <div style={{ marginTop: 'auto', display: 'flex', gap: 3, height: 30, alignItems: 'stretch' }}>
+      {DAYS.map((d, i) => (
+        <div
+          key={i}
+          style={{
+            flex: 1,
+            borderRadius: 2,
+            background: d === 0 ? 'rgba(47,163,107,0.78)' : d === 1 ? '#e2a23b' : 'rgba(47,163,107,0.4)',
+          }}
+        />
+      ))}
+    </div>
+    <div style={{ marginTop: 10, display: 'flex', fontSize: 13, color: G.ink3, fontVariantNumeric: 'tabular-nums' }}>
+      <span>90 days ago</span>
+      <span style={{ marginLeft: 'auto' }}>Today</span>
+    </div>
+  </div>
+);
+
+export const PullBackIsolation: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 相机后拉：2.2（怼脸特写）→ 0.62（大远景孤悬）
+  const scale = interpolate(frame, [0, 110], [2.2, 0.62], {
+    easing: Easing.out(Easing.cubic),
+    ...clamp,
+  });
+
+  // 背景沉入黑暗（60–110f）：亮柔光底 → 带色相深场，交叉淡化
+  const bgT = interpolate(frame, [60, 110], [0, 1], { easing: Easing.inOut(Easing.quad), ...clamp });
+
+  // 主卡光晕淡入（60–100f）
+  const glow = interpolate(frame, [60, 100], [0, 1], { easing: Easing.inOut(Easing.quad), ...clamp });
+
+  return (
+    <AbsoluteFill style={{ background: G.dark, overflow: 'hidden' }}>
+      <Backdrop tone="light" light={{ x: 0.5, y: 0.3 }} grain={0} />
+      <AbsoluteFill style={{ opacity: bgT }}>
+        <Backdrop tone="dark" light={{ x: 0.5, y: 0.5 }} accent="#5b63d3" grain={0} vignette={0.6} />
+      </AbsoluteFill>
+
+      {/* 相机容器：按 Z 倍布局，再以主卡中心（画面中心）为原点 scale(scale/Z) */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          width: 1920 * Z,
+          height: 1080 * Z,
+          transformOrigin: `${960 * Z}px ${540 * Z}px`,
+          transform: `translate(${960 - 960 * Z}px, ${540 - 540 * Z}px) scale(${scale / Z})`,
+        }}
+      >
+        <div style={{ position: 'relative', width: 1920, height: 1080, zoom: Z }}>
+          {/* 兄弟卡：由近到远错峰熄灭，熄灭时轻微下沉 */}
+          {SIBS.map((s, i) => {
+            const t0 = FADE_START[i];
+            const k = interpolate(frame, [t0, t0 + FADE_DUR], [0, 1], clamp);
+            // 透明度先走（ease-out），压暗后走（k²）：熄灭过程不会在亮底上停成一块灰板
+            const op = 1 - EASE.out(k);
+            const dk = k * k;
+            return (
+              <div
+                key={i}
+                style={{
+                  position: 'absolute',
+                  left: 960 + s.dx - s.w / 2,
+                  top: 540 + s.dy - s.h / 2,
+                  opacity: op,
+                  // 压暗 + 轻微失焦：像沉进暗处
+                  filter: k > 0.001 ? `brightness(${mix(1, 0.3, dk).toFixed(3)}) blur(${(k * 5).toFixed(2)}px)` : undefined,
+                  transform: `scale(${mix(1, 0.97, k)})`,
+                }}
+              >
+                <Card w={s.w} h={s.h} seed={s.seed} />
+              </div>
+            );
+          })}
+
+          {/* 主卡：520×340 居中；落入暗场后外圈冷白光晕 */}
+          <div
+            style={{
+              position: 'absolute',
+              left: 960 - 260,
+              top: 540 - 170,
+              width: 520,
+              height: 340,
+              borderRadius: 18,
+              boxShadow:
+                `${softShadow(18, { strength: 1 - glow * 0.6 })}, ` +
+                `0 0 70px rgba(214,222,255,${(glow * 0.32).toFixed(3)}), 0 0 180px rgba(150,162,240,${(glow * 0.2).toFixed(3)})`,
+            }}
+          >
+            <HeroCard rim={glow} />
+          </div>
+        </div>
+      </div>
+      <Grain opacity={mix(0.05, 0.09, bgT)} blend={bgT > 0.5 ? 'soft-light' : 'overlay'} />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/camera/terminal-3d/Terminal3D.tsx

@@ -0,0 +1,390 @@
+// terminal-3d —— 三个终端窗散布 3D 空间，相机窗间飞行（途中拉远），每到一窗打字机敲命令、结果逐行吐出。
+// 手法不变：窗口姿态表 → 相机逆变换；两段飞行各带一个正弦拉远鼓包；离焦窗虚化；飞行中不打字。
+//
+// 第二轮重设计（设计决定）
+// - look = lime（石墨暗场 · 荧光黄绿）：终端是技术感，单一强调色只给提示符、✓ 与最后的 READY 成片名。
+// - 内容编成一条完整的"三步出片"（品牌轮：video-shotcraft 的世界）：示意 CLI「shotcraft」——01 init 搭分镜
+//   → 02 render 渲染（镜头计数 + 进度格）→ 03 export 混音导出，最后一行 ● READY launch-film.mp4 是全片唯一的泛光（Q4）。
+// - 窗口按镜头重做：1240×700 的真实尺寸布局（相机落定时 1:1 栅格化，文字不糊，Q2），命令 46px、
+//   输出 34px 等宽（≥ 辅助字 32px，Q11）；标题栏写步骤号与路径，不再是通用 "~/workspace — zsh"。
+// - 空间：窗口沿一条弧线前后错落、各自偏转；每站相机不正对，留 8–10° 侧视（读得清且有体积）；
+//   地面是按相机矩阵逐线投影的 SVG 透视网格（线宽恒定不闪），焦点窗下方地面有一摊黄绿反光；
+//   每窗背后立一枚 560px 描边步骤号，飞行时与窗口产生视差。
+// - 打字有人手节奏：每字 1–2f 的确定性抖动、敲完停 2f 再"回车"；输出是终端式的快速打印（3f 淡入 +
+//   左移 10px 收回、行距 4f），状态位先转 braille 小菊花再落成 ✓。
+//
+// 时间表（30fps，246f）
+//   0–24    开场：相机从拉远 260px 推近落定第一窗（out 曲线），窗口第 0 帧即在画面
+//   8–26    敲 `shotcraft init`（14 字）→ ~28 回车 → 30–50 四行输出（菊花 → ✓）
+//   48–62   hold 读秒
+//   62–92   飞行 1→2（30f，swift 不对称 in-out + sin 拉远 820px；按横向屏速加方向性模糊）
+//   94–111  敲 `shotcraft render` → ~113 回车 → 进度格 + 计数 0→24（20f，out）→ 三行 DONE → ✓ 汇总
+//   140–152 hold
+//   152–182 飞行 2→3
+//   184–201 敲 `shotcraft export` → ~203 回车 → 三行导出 → ~220 ● READY 成片名弹出 + 泛光
+//   222–246 hold：相机极缓推近 2%，尾帧是"成片已交付"的海报
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, SpeedBlur, mix, ramp } from '../../_fixtures/Polish';
+import { Dust, LOOKS, Stage, alpha, glow } from '../../_fixtures/Look';
+
+export const TERMINAL_3D_DURATION = 246;
+
+const L = LOOKS.lime;
+// 舞台主光降饱和成橄榄灰绿：荧光色只留给提示符 / ✓ / READY，背景不被染成一片绿
+const STAGE = { ...L, light: '#56613f', accent2: '#3a4a1c' };
+const MONO = FONT.mono;
+const W = 1180; // 窗口布局尺寸（= 落定时屏幕尺寸）
+const H = 620;
+const PERSP = 1800; // 场景透视距离
+const FLOOR_Y = 500; // 地面高度（世界坐标，y 向下）
+
+// ───────────── 窗口姿态表（世界坐标，px / 度）+ 每站相机侧视角 ─────────────
+type Pose = { x: number; y: number; z: number; ry: number };
+const POSES: Pose[] = [
+  { x: -1500, y: -30, z: -220, ry: 24 },
+  { x: 0, y: 30, z: 260, ry: -14 },
+  { x: 1520, y: -40, z: -160, ry: 28 },
+];
+const VIEW = [9, -8, 10]; // 每站相机相对窗口的侧视角（度）
+const TILT = -4; // 相机微俯（rotateX，度）
+
+// 站点时序：每站 [到站帧, 打字起点]；飞行区间
+const FLY = [[62, 92], [152, 182]] as const;
+const TYPE_AT = [8, 94, 184];
+const PULL_PEAK = 1250; // 飞行中拉远量（峰值处画面缩到 ~0.6，三窗同框）
+
+// 确定性伪随机
+const rand = (n: number) => {
+  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+// ───────────── 相机 ─────────────
+// s = 连续站点参数（0..2），pull = 拉远量
+const camAt = (f: number) => {
+  let s = 0;
+  let pull = 260 * (1 - ramp(f, 0, 24, EASE.out)); // 开场推近
+  FLY.forEach(([a, b], i) => {
+    const u = ramp(f, a, b - a, EASE.swift);
+    s += u;
+    const raw = Math.min(1, Math.max(0, (f - a) / (b - a)));
+    pull += Math.sin(Math.PI * Math.pow(raw, 0.85)) * PULL_PEAK * (i === 0 ? 1 : 1.05);
+  });
+  pull -= 36 * ramp(f, 222, 24, EASE.smooth); // 尾段极缓推近 ~2%
+  const i0 = Math.min(1, Math.floor(s));
+  const k = s - i0;
+  const a = POSES[i0], b = POSES[i0 + 1];
+  const pose: Pose = { x: mix(a.x, b.x, k), y: mix(a.y, b.y, k), z: mix(a.z, b.z, k), ry: mix(a.ry, b.ry, k) };
+  const view = mix(VIEW[i0], VIEW[i0 + 1], k);
+  return { s, pull, pose, yaw: view - pose.ry };
+};
+
+// 与 world 的 CSS transform 完全同构的投影：translateZ(-pull) rotateX(TILT) rotateY(yaw) translate(-pose)
+const project = (cam: ReturnType<typeof camAt>, p: [number, number, number]) => {
+  const x0 = p[0] - cam.pose.x, y0 = p[1] - cam.pose.y, z0 = p[2] - cam.pose.z;
+  const ty = (cam.yaw * Math.PI) / 180, tx = (TILT * Math.PI) / 180;
+  const x1 = x0 * Math.cos(ty) + z0 * Math.sin(ty);
+  const z1 = -x0 * Math.sin(ty) + z0 * Math.cos(ty);
+  const y2 = y0 * Math.cos(tx) - z1 * Math.sin(tx);
+  const z2 = y0 * Math.sin(tx) + z1 * Math.cos(tx) - cam.pull;
+  return { x: x1, y: y2, z: z2 };
+};
+const toScreen = (q: { x: number; y: number; z: number }) => {
+  const k = PERSP / (PERSP - q.z);
+  return { x: 960 + q.x * k, y: 540 + q.y * k, k };
+};
+
+// ───────────── 透视地面（SVG，逐线投影；近处亮、远处隐入暗场） ─────────────
+const Floor: React.FC<{ cam: ReturnType<typeof camAt>; frame: number }> = ({ cam }) => {
+  const segs: React.ReactNode[] = [];
+  const CELL = 240;
+  const near = PERSP - 120;
+  const line = (a: [number, number, number], b: [number, number, number], key: string) => {
+    const N = 8;
+    for (let j = 0; j < N; j++) {
+      const pa = project(cam, [mix(a[0], b[0], j / N), a[1], mix(a[2], b[2], j / N)]);
+      const pb = project(cam, [mix(a[0], b[0], (j + 1) / N), a[1], mix(a[2], b[2], (j + 1) / N)]);
+      if (pa.z > near || pb.z > near) continue;
+      const depth = PERSP - (pa.z + pb.z) / 2; // 到相机的距离
+      const op = Math.max(0, Math.min(1, 1.25 - depth / 4200));
+      if (op < 0.02) continue;
+      const sa = toScreen(pa), sb = toScreen(pb);
+      segs.push(<line key={`${key}${j}`} x1={sa.x} y1={sa.y} x2={sb.x} y2={sb.y} strokeOpacity={op * op} />);
+    }
+  };
+  for (let i = -14; i <= 14; i++) line([i * CELL, FLOOR_Y, -3600], [i * CELL, FLOOR_Y, 2400], `c${i}`);
+  for (let j = -15; j <= 10; j++) line([-3400, FLOOR_Y, j * CELL], [3400, FLOOR_Y, j * CELL], `r${j}`);
+  return (
+    <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+      <g stroke={alpha(L.accent, 0.34)} strokeWidth={1.4}>{segs}</g>
+    </svg>
+  );
+};
+
+// 焦点窗下方的地面反光（投影到窗口脚下）
+const FloorPool: React.FC<{ cam: ReturnType<typeof camAt>; i: number; on: number }> = ({ cam, i, on }) => {
+  if (on < 0.02) return null;
+  const p = POSES[i];
+  const q = project(cam, [p.x, FLOOR_Y, p.z]);
+  if (q.z > PERSP - 200) return null;
+  const s = toScreen(q);
+  const w = 1500 * s.k, h = 260 * s.k;
+  return (
+    <div style={{
+      position: 'absolute', left: s.x - w / 2, top: s.y - h / 2, width: w, height: h, borderRadius: '50%',
+      background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(L.accent, 0.26 * on)} 0%, ${alpha(L.accent, 0.08 * on)} 45%, ${alpha(L.accent, 0)} 72%)`,
+    }} />
+  );
+};
+
+// 焦点窗背后的背光（投影到窗心，屏幕空间）：把暗色窗体从暗场里剥离出来
+const BackLight: React.FC<{ cam: ReturnType<typeof camAt>; i: number; on: number }> = ({ cam, i, on }) => {
+  if (on < 0.02) return null;
+  const p = POSES[i];
+  const q = project(cam, [p.x, p.y - 60, p.z - 300]);
+  if (q.z > PERSP - 200) return null;
+  const s = toScreen(q);
+  const w = 2500 * s.k, h = 1250 * s.k;
+  return (
+    <div style={{
+      position: 'absolute', left: s.x - w / 2, top: s.y - h / 2, width: w, height: h, borderRadius: '50%',
+      background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha('#d8e4b8', 0.3 * on)} 0%, ${alpha('#a8b878', 0.11 * on)} 46%, ${alpha('#9fb06a', 0)} 72%)`,
+    }} />
+  );
+};
+
+// ───────────── 终端内容 ─────────────
+type Seg = [string, string]; // [文本, 颜色]
+type Line = { mark?: 'spin' | 'pass'; segs: Seg[]; at: number; big?: boolean };
+const C = { key: L.ink3, val: L.ink, dim: L.ink2, ok: L.accent };
+
+type Win = { step: string; name: string; path: string; cmd: string; lines: Line[] };
+const WINS: Win[] = [
+  {
+    step: '01', name: 'storyboard', path: '~/promo', cmd: 'shotcraft init',
+    lines: [
+      { mark: 'spin', at: 0, segs: [['template   ', C.key], ['ink-press', C.val]] },
+      { mark: 'spin', at: 4, segs: [['shots      ', C.key], ['12 recipe cards', C.val], [' · 2.5D', C.dim]] },
+      { mark: 'spin', at: 8, segs: [['audio      ', C.key], ['beat grid at ', C.dim], ['120 bpm', C.val]] },
+      { mark: 'pass', at: 14, segs: [['ready      ', C.ok], ['next: shotcraft render', C.val]] },
+    ],
+  },
+  {
+    step: '02', name: 'render', path: '~/promo', cmd: 'shotcraft render',
+    lines: [
+      { at: 0, segs: [] }, // 进度格 + 计数（特殊绘制）
+      { at: 10, segs: [['DONE ', C.ok], [' act-1/opening     ', C.val], [' 8', C.dim]] },
+      { at: 14, segs: [['DONE ', C.ok], [' act-2/features    ', C.val], ['10', C.dim]] },
+      { at: 18, segs: [['DONE ', C.ok], [' act-3/outro       ', C.val], [' 6', C.dim]] },
+      { mark: 'pass', at: 24, segs: [['24 shots', C.ok], ['  ·  ', C.dim], ['1080p · 30fps', C.val]] },
+    ],
+  },
+  {
+    step: '03', name: 'export', path: '~/promo', cmd: 'shotcraft export',
+    lines: [
+      { mark: 'spin', at: 0, segs: [['mix        ', C.key], ['voice + sfx', C.val], [' · -14 LUFS', C.dim]] },
+      { mark: 'spin', at: 4, segs: [['encode     ', C.key], ['h264 · 1080p30', C.val]] },
+      { mark: 'spin', at: 8, segs: [['jianying   ', C.key], ['draft exported', C.val]] },
+      { at: 15, big: true, segs: [] }, // ● READY 成片名（特殊绘制）
+    ],
+  },
+];
+
+// 每字打字节奏：基础 1.15f/字 + 确定性抖动；返回第 k 字出现的帧偏移
+const charTimes = (cmd: string, seed: number) => {
+  const out: number[] = [];
+  let t = 0;
+  for (let k = 0; k < cmd.length; k++) {
+    out.push(t);
+    const c = cmd[k];
+    t += 0.75 + rand(seed * 31 + k) * 0.9 + (c === ' ' ? 0.6 : 0);
+  }
+  return { out, end: t };
+};
+const TYPING = WINS.map((w, i) => charTimes(w.cmd, i + 3));
+const enterAt = (i: number) => TYPE_AT[i] + TYPING[i].end + 2; // 敲完停 2f 再回车
+const SPIN = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+const Mark: React.FC<{ kind: 'spin' | 'pass'; t: number }> = ({ kind, t }) => {
+  const done = kind === 'pass' || t > 6;
+  return (
+    <span style={{ display: 'inline-block', width: '1.6em', color: done ? C.ok : C.dim }}>
+      {done ? '✓' : SPIN[Math.floor(t * 1.5) % SPIN.length]}
+    </span>
+  );
+};
+
+const Terminal: React.FC<{ i: number; frame: number; focus: number }> = ({ i, frame, focus }) => {
+  const w = WINS[i];
+  const t0 = TYPE_AT[i];
+  const tf = frame - t0;
+  const n = TYPING[i].out.filter((x) => x <= tf).length;
+  const typing = tf >= 0 && n < w.cmd.length;
+  const ent = enterAt(i);
+  const caretOn = typing || Math.floor((frame - (tf < 0 ? 0 : t0 + TYPING[i].end)) / 8) % 2 === 0;
+  const out0 = ent + 2;
+  const lineIn = (at: number) => ramp(frame, out0 + at, 6, EASE.snappy);
+
+  return (
+    <div style={{
+      position: 'absolute', inset: 0, borderRadius: 22, overflow: 'hidden',
+      background: `linear-gradient(180deg, #20241b 0%, #181b14 30%, #111309 100%)`,
+      boxShadow: `inset 0 0 0 1.5px ${alpha('#e8ffc0', 0.1 + 0.08 * focus)}, inset 0 2px 0 ${alpha('#ffffff', 0.08 + 0.1 * focus)}`,
+      fontFamily: MONO,
+    }}>
+      {/* 标题栏：三灯（降饱和）+ 步骤号 / 名称 + 路径 */}
+      <div style={{
+        position: 'absolute', left: 0, top: 0, right: 0, height: 72, display: 'flex', alignItems: 'center',
+        padding: '0 30px', gap: 14, borderBottom: `1.5px solid ${alpha('#e8ffc0', 0.07)}`,
+        background: `linear-gradient(180deg, ${alpha('#ffffff', 0.035)}, ${alpha('#ffffff', 0)})`,
+      }}>
+        {[0, 1, 2].map((k) => (
+          <div key={k} style={{ width: 16, height: 16, borderRadius: 8, background: alpha(L.ink, 0.16), boxShadow: `inset 0 1px 0 ${alpha('#ffffff', 0.12)}` }} />
+        ))}
+        <div style={{ marginLeft: 22, fontSize: 24, fontWeight: 700, color: L.accent, letterSpacing: '0.04em' }}>{w.step}</div>
+        <div style={{ fontSize: 24, fontWeight: 500, color: L.ink2, letterSpacing: '0.02em' }}>{w.name}</div>
+        <div style={{ marginLeft: 'auto', fontSize: 22, color: L.ink3 }}>{w.path} — zsh</div>
+      </div>
+
+      {/* 命令行：常驻提示符 + 已打出字符 + 紧贴的块光标 */}
+      <div style={{ position: 'absolute', left: 56, top: 124, fontSize: 52, fontWeight: 600, color: L.ink, whiteSpace: 'pre', lineHeight: 1 }}>
+        <span style={{ color: L.accent }}>❯ </span>
+        {w.cmd.slice(0, Math.max(0, n))}
+        {frame < ent + 1 && (
+          <span style={{
+            display: 'inline-block', width: '0.58em', height: '1.08em', marginLeft: 4, verticalAlign: '-0.16em',
+            borderRadius: 3, background: L.accent, opacity: caretOn ? 0.95 : 0,
+          }} />
+        )}
+      </div>
+
+      {/* 输出 */}
+      <div style={{ position: 'absolute', left: 56, right: 56, top: 220 }}>
+        {w.lines.map((ln, k) => {
+          const p = lineIn(ln.at);
+          if (p <= 0) return null;
+          const lt = frame - (out0 + ln.at);
+          const style: React.CSSProperties = {
+            position: 'absolute', left: 0, top: k * 70, fontSize: 38, fontWeight: 500, whiteSpace: 'pre', lineHeight: 1,
+            opacity: Math.min(1, p * 1.8), transform: `translateX(${((1 - p) * -10).toFixed(2)}px)`,
+          };
+          if (i === 1 && k === 0) {
+            // 进度格 + 镜头计数（20f out 曲线；一格一个镜头）
+            const c = ramp(frame, out0, 20, EASE.out);
+            const N = 24;
+            return (
+              <div key={k} style={{ ...style, display: 'flex', alignItems: 'center', gap: 22 }}>
+                <div style={{ display: 'flex', gap: 5 }}>
+                  {Array.from({ length: N }, (_, j) => (
+                    <div key={j} style={{
+                      width: 17, height: 34, borderRadius: 3,
+                      background: j < Math.round(c * N) ? L.accent : alpha(L.ink, 0.1),
+                    }} />
+                  ))}
+                </div>
+                <span style={{ color: L.ink, fontVariantNumeric: 'tabular-nums' }}>{String(Math.round(c * N)).padStart(2, ' ')}</span>
+                <span style={{ color: L.ink3 }}>/ {N} shots</span>
+              </div>
+            );
+          }
+          if (ln.big) {
+            // ● READY 成片名：全片唯一泛光（Q4）
+            const pop = ramp(frame, out0 + ln.at, 14, EASE.overshoot);
+            const g = ramp(frame, out0 + ln.at, 26, EASE.out);
+            const pulse = 0.55 + 0.45 * Math.cos(Math.max(0, lt) / 6);
+            return (
+              <div key={k} style={{
+                ...style, top: k * 70 + 16, display: 'flex', alignItems: 'center', gap: 26,
+                transform: `translateX(${((1 - p) * -10).toFixed(2)}px) scale(${mix(0.94, 1, pop).toFixed(4)})`, transformOrigin: 'left center',
+              }}>
+                <div style={{
+                  display: 'flex', alignItems: 'center', gap: 14, height: 56, padding: '0 22px', borderRadius: 12,
+                  background: L.accent, color: L.onAccent, fontSize: 30, fontWeight: 800, letterSpacing: '0.08em',
+                  boxShadow: `0 0 ${(40 * g).toFixed(1)}px ${alpha(L.accent, 0.45 * g)}`,
+                }}>
+                  <div style={{ width: 14, height: 14, borderRadius: 7, background: L.onAccent, opacity: 0.4 + 0.6 * pulse }} />
+                  READY
+                </div>
+                <span style={{ fontSize: 52, fontWeight: 700, color: L.accent, letterSpacing: '-0.01em', textShadow: glow(L.accent, 0.55 * g) }}>
+                  launch-film.mp4
+                </span>
+              </div>
+            );
+          }
+          return (
+            <div key={k} style={style}>
+              {ln.mark && <Mark kind={ln.mark} t={lt} />}
+              {!ln.mark && <span style={{ display: 'inline-block', width: '0em' }} />}
+              {ln.segs.map(([s, c], j) => <span key={j} style={{ color: c }}>{s}</span>)}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+// ───────────── 主组件 ─────────────
+export const Terminal3D: React.FC = () => {
+  const frame = useCurrentFrame();
+  const cam = camAt(frame);
+  const v = cam.pose;
+
+  // 横向屏速（px/帧）：相机目标在屏幕上的位移速度 → 方向性模糊，只在飞行段生效
+  const a = camAt(frame - 0.5), b = camAt(frame + 0.5);
+  const kS = PERSP / (PERSP + cam.pull);
+  const vx = -(b.pose.x - a.pose.x) * kS;
+  const vy = -(b.pose.y - a.pose.y) * kS;
+
+  const world = `translateZ(${(-cam.pull).toFixed(2)}px) rotateX(${TILT}deg) rotateY(${cam.yaw.toFixed(3)}deg) translate3d(${(-v.x).toFixed(2)}px,${(-v.y).toFixed(2)}px,${(-v.z).toFixed(2)}px)`;
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[2] }}>
+      <Stage look={STAGE} keyLight={{ x: 0.36, y: -0.06 }} fill={{ x: 0.82, y: 1.0 }} horizon={0.47} intensity={1} breathe={0.4}>
+        <Floor cam={cam} frame={frame} />
+        {[0, 1, 2].map((i) => (
+          <BackLight key={`b${i}`} cam={cam} i={i} on={Math.max(0, 1 - Math.abs(cam.s - i))} />
+        ))}
+        {[0, 1, 2].map((i) => (
+          <FloorPool key={i} cam={cam} i={i} on={Math.max(0, 1 - Math.abs(cam.s - i))} />
+        ))}
+        <Dust look={L} count={36} seed={5} drift={0.35} opacity={0.45} />
+      </Stage>
+      <SpeedBlur vx={vx} vy={vy} amount={0.14} max={10}>
+        <div style={{ position: 'absolute', inset: 0, perspective: PERSP, overflow: 'hidden' }}>
+          <div style={{ position: 'absolute', left: 960, top: 540, width: 0, height: 0, transformStyle: 'preserve-3d', transform: world }}>
+            {POSES.map((p, i) => {
+              // 景深：离当前站越远越虚；拉远时景深变深（全景三窗都要看得出是终端），离焦量随拉远收窄
+              const wide = Math.min(1, Math.max(0, cam.pull / PULL_PEAK));
+              const focus = Math.min(1, Math.max(0, 1 - Math.abs(cam.s - i) * 1.25) + wide * 0.45);
+              const blur = (1 - focus) * 3;
+              return (
+                <React.Fragment key={i}>
+                  {/* 背后的描边步骤号（与窗口同朝向，位于窗后左上） */}
+                  <div style={{
+                    position: 'absolute', left: -W / 2 - 120, top: -H / 2 - 270, whiteSpace: 'nowrap',
+                    transform: `translate3d(${p.x}px,${p.y}px,${p.z - 380}px) rotateY(${p.ry}deg)`,
+                    fontFamily: FONT.sans, fontSize: 560, fontWeight: 800, lineHeight: 1, letterSpacing: '-0.05em',
+                    color: 'transparent', WebkitTextStroke: `2px ${alpha(L.accent, 0.07 + 0.3 * focus)}`,
+                  }}>{WINS[i].step}</div>
+                  {/* 窗口 */}
+                  <div style={{
+                    position: 'absolute', left: -W / 2, top: -H / 2, width: W, height: H,
+                    transform: `translate3d(${p.x}px,${p.y}px,${p.z}px) rotateY(${p.ry}deg)`,
+                    borderRadius: 22,
+                    boxShadow: `0 50px 120px ${alpha('#000000', 0.7)}, 0 0 0 1px ${alpha('#000000', 0.4)}, 0 0 90px ${alpha(L.accent, 0.07 * focus)}`,
+                    filter: blur > 0.3 ? `blur(${blur.toFixed(2)}px) brightness(${(0.62 + 0.38 * focus).toFixed(3)})` : undefined,
+                    opacity: 0.72 + 0.28 * focus,
+                  }}>
+                    <Terminal i={i} frame={frame} focus={focus} />
+                  </div>
+                </React.Fragment>
+              );
+            })}
+          </div>
+        </div>
+      </SpeedBlur>
+    </AbsoluteFill>
+  );
+};