dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/camera/basic-3d-scene/Basic3DScene.tsx

@@ -0,0 +1,250 @@
+// basic-3d-scene — impress.js 式空间步进（第二轮重设计）
+// 手法不变：卡片散布在 3D 空间（各有 x·y·z + 旋转 + 缩放），相机取每站姿态之逆依次飞行对齐，
+// 末站拉远成 OVERVIEW 总览。核心配方 camera = stepTransform.inverse()。
+//
+// 设计决定
+// - look：graphite（近单色暗场，白为强调、香槟金只做点缀）——像发布会上"三章节"的空间叙事。
+//   产品是 video-shotcraft，三站 = 品牌短句拆成的三个章节：Frame / Craft / Ship，
+//   总览站是品牌落版「Craft the shot.」（标志 + 字标做眉题）。
+// - 卡片是为镜头设计的海报而不是小 UI：1240×700 原生 1:1 排版（对位时屏幕上就是原生像素，
+//   不经 DesignStage 放大，字不糊），150px 标题 + 44px 说明 + 420px 细体大号章节数字（被卡边裁切的编辑感）。
+// - 空间感：世界里散布 70 颗真 3D 浮尘（各有 z，相机飞/转时有真实视差）；非当前卡按"站距"退焦变暗；
+//   飞行中段相机额外拉远 ~30%（hop）让观众看见"还有别的卡在空间里"，再推近落位。
+// - 每站停留时卡底一条金色进度线走满（像幻灯片计时），停留段不是死帧；落位前 8f 标题逐词从线下升起，
+//   每张卡只揭示一次，之后在总览里保持已读状态。
+// - 运动模糊：飞行段做时间采样（快门 0.5f，子帧 3–8 个按相机位移自适应），停留段零开销。
+//
+// 时间表（30fps，225f = 7.5s）
+//   0–36    站 1 Capture：相机从 1.06 倍距离缓推到位（snappy 30f）；2f 起标题逐词升起；进度线走满
+//   36–64   飞行 1→2（28f）：右移 + 世界左转 38°，途中 hop 拉远 30%
+//   64–96   站 2 Connect 停留 32f
+//   96–128  飞行 2→3（32f）：画框侧躺 90° 被转正——最长的一段，观众要看懂"世界在转"
+//   128–158 站 3 Ship 停留 30f
+//   158–190 飞行 3→总览（32f）：相机 1/2.7 拉远，三卡与品牌落版同框
+//   184–212 落版：眉题字距收拢 → 「Craft the shot.」逐词升起 → 副句淡入
+//   206–224 hold：极缓推近 1.5%，尾帧是一张完整海报
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, bezier, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, SERIF, Stage, TextReveal, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const BASIC_3D_SCENE_DURATION = 225; // 7.5s @30fps
+
+const L = LOOKS.graphite;
+const GOLD = L.accent2;
+const CW = 1240; // 卡片原生尺寸（对位时屏幕 1:1）
+const CH = 700;
+const PERSP = 2600;
+
+type Pose = { x: number; y: number; z: number; rx: number; ry: number; rz: number; s: number };
+// 每站：卡片自己的 pose（相机取其逆）。站 2 世界左转 38°、站 3 画框侧躺 90°、总览 s=2.7 拉远
+const POSES: Pose[] = [
+  { x: 0, y: 0, z: 0, rx: 0, ry: 0, rz: 0, s: 1 },
+  { x: 1690, y: -260, z: -650, rx: 0, ry: -38, rz: 0, s: 1 },
+  { x: 2590, y: 830, z: -850, rx: 0, ry: 0, rz: 90, s: 1 },
+  { x: 594, y: 480, z: -400, rx: 0, ry: 0, rz: 0, s: 2.7 },
+];
+const CHAPTERS = [
+  { no: '01', kicker: 'Frame', title: 'Frame.', body: 'Real page captures, staged for the camera.' },
+  { no: '02', kicker: 'Craft', title: 'Craft.', body: 'Shot recipe cards turn moves into code.' },
+  { no: '03', kicker: 'Ship', title: 'Ship.', body: 'One prompt to a finished promo.' },
+];
+
+// 飞行时刻表（帧）：[起, 止]
+const FLIGHTS: [number, number][] = [[36, 64], [96, 128], [158, 190]];
+const ARRIVE = [0, 64, 128, 190]; // 每站落位帧（站 0 开场即在）
+const HOLD_END = [36, 96, 158, 225];
+const FLY_EASE = bezier(0.62, 0, 0.16, 1); // 起步稳、落位很软的不对称 in-out
+const HOP = 0.3; // 站间飞行途中额外拉远比例
+
+// 相机姿态（帧的纯函数，可取小数帧：运动模糊子帧采样用）
+const camAt = (f: number) => {
+  const cam: Pose = { ...POSES[0] };
+  // 开场：从 1.06 倍距离缓推到位（不是死帧起手）
+  cam.s = mix(1.06, 1, ramp(f, 0, 30, EASE.snappy));
+  let af = 0; // 累计飞行进度（0..3，小数 = 途中）
+  let hop = 0;
+  FLIGHTS.forEach(([a, b], i) => {
+    const u = ramp(f, a, b - a, FLY_EASE);
+    af += u;
+    const p = POSES[i + 1];
+    (Object.keys(cam) as (keyof Pose)[]).forEach((k) => {
+      cam[k] = mix(cam[k], p[k], u);
+    });
+    if (i < 2 && u > 0 && u < 1) hop = HOP * Math.sin(Math.PI * u);
+  });
+  cam.s *= 1 + hop;
+  // 停留段极缓推近 1.5%：落位后慢慢吃进去，下一段飞行起步时同曲线还原（画面活着但不晃）
+  let creep = 0;
+  for (let i = 0; i < 3; i++) {
+    creep += ramp(f, ARRIVE[i] + 4, HOLD_END[i] - ARRIVE[i], EASE.smooth) * (1 - ramp(f, FLIGHTS[i][0], 14, EASE.smooth));
+  }
+  cam.s *= 1 - 0.015 * creep;
+  // 总览落定后极缓推近 1.5%（hold 段活着，不晃）
+  cam.s *= 1 - 0.015 * ramp(f, 196, 29, EASE.smooth);
+  return { cam, af };
+};
+
+const camTransform = (c: Pose) =>
+  `scale(${(1 / c.s).toFixed(5)}) rotateZ(${(-c.rz).toFixed(4)}deg) rotateY(${(-c.ry).toFixed(4)}deg) rotateX(${(-c.rx).toFixed(4)}deg) translate3d(${(-c.x).toFixed(3)}px,${(-c.y).toFixed(3)}px,${(-c.z).toFixed(3)}px)`;
+const poseTransform = (p: Pose) =>
+  `translate3d(${p.x}px,${p.y}px,${p.z}px) rotateX(${p.rx}deg) rotateY(${p.ry}deg) rotateZ(${p.rz}deg) scale(${p.s})`;
+
+const hash = (n: number) => {
+  const x = Math.sin(n * 91.345 + 47.853) * 43758.5453;
+  return x - Math.floor(x);
+};
+// 世界里的真 3D 浮尘：位置固定在世界坐标，视差全部来自相机
+const MOTES = Array.from({ length: 70 }, (_, i) => ({
+  x: -2600 + hash(i * 3.1) * 6800,
+  y: -2000 + hash(i * 5.7 + 1) * 4800,
+  z: -3200 + hash(i * 7.3 + 2) * 3600,
+  r: 3 + hash(i * 11.9 + 3) * 7,
+  a: 0.25 + hash(i * 13.1 + 4) * 0.55,
+}));
+
+// ───────── 章节卡 ─────────
+const ChapterCard: React.FC<{ i: number; frame: number; focus: number }> = ({ i, frame, focus }) => {
+  const c = CHAPTERS[i];
+  const arrive = ARRIVE[i];
+  const reveal = arrive - (i === 0 ? -2 : 8); // 标题在落位前一拍开始升起
+  const hold = ramp(frame, arrive, HOLD_END[i] - arrive, EASE.smooth); // 进度线
+  const numIn = ramp(frame, reveal - 4, 26, EASE.out);
+  const bodyIn = ramp(frame, reveal + 8, 18, EASE.out);
+  return (
+    <div style={{ position: 'absolute', inset: 0, padding: '74px 84px', boxSizing: 'border-box', fontFamily: FONT.sans }}>
+      {/* 细体大号章节数字：被卡右缘裁掉一截（编辑感），只做纹理层 */}
+      <div style={{
+        position: 'absolute', right: -36, bottom: -118, ...type(560, 200), letterSpacing: '-0.06em',
+        color: 'transparent', backgroundImage: `linear-gradient(170deg, ${alpha('#ffffff', 0.16)} 10%, ${alpha('#ffffff', 0.02)} 70%)`,
+        WebkitBackgroundClip: 'text', backgroundClip: 'text',
+        transform: `translateY(${((1 - numIn) * 60).toFixed(1)}px)`, opacity: numIn,
+      }}>{c.no}</div>
+      {/* 眉题 */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 18, ...type(26, 600, { mono: true }), letterSpacing: '0.14em', color: L.ink3, textTransform: 'uppercase' }}>
+        <span style={{ color: GOLD }}>{c.no}</span>
+        <span style={{ width: 44, height: 1, background: alpha(GOLD, 0.6) }} />
+        <span>Chapter · {c.kicker}</span>
+        <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12, textTransform: 'none', fontFamily: BRAND.font, fontSize: 28, fontWeight: 700, letterSpacing: '0.03em', color: L.ink2 }}>
+          <ShotcraftMark size={32} tone="dark" />{BRAND.name}
+        </span>
+      </div>
+      {/* 标题：逐词从线下升起 */}
+      <div style={{ marginTop: 150, ...type(156, 760), color: L.ink }}>
+        <TextReveal text={c.title} by="char" variant="rise" start={reveal} each={20} gap={1.8} />
+      </div>
+      <div style={{
+        marginTop: 34, maxWidth: 820, ...type(44, 420), lineHeight: 1.3, color: L.ink2, textWrap: 'balance',
+        opacity: bodyIn, transform: `translateY(${((1 - bodyIn) * 18).toFixed(1)}px)`,
+      }}>{c.body}</div>
+      {/* 底部：三段章节进度，当前段金色走满 */}
+      <div style={{ position: 'absolute', left: 84, right: 84, bottom: 70, display: 'flex', gap: 14 }}>
+        {[0, 1, 2].map((k) => (
+          <div key={k} style={{ flex: 1, height: 3, borderRadius: 2, background: alpha('#ffffff', 0.1), overflow: 'hidden' }}>
+            <div style={{
+              height: '100%', width: `${(k < i ? 1 : k === i ? hold : 0) * 100}%`,
+              background: k === i ? `linear-gradient(90deg, ${alpha(GOLD, 0.7)}, ${GOLD})` : alpha('#ffffff', 0.45),
+              boxShadow: k === i ? `0 0 ${10 * focus}px ${alpha(GOLD, 0.6)}` : undefined,
+            }} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// ───────── 总览落版（世界里挂在总览站：放大 s 倍排版，相机 1/s 看回来 = 屏幕 1:1） ─────────
+const OverviewPlate: React.FC<{ frame: number }> = ({ frame }) => {
+  const st = 184;
+  const kick = ramp(frame, st, 22, EASE.snappy);
+  const sub = ramp(frame, st + 20, 18, EASE.out);
+  return (
+    <div style={{ position: 'absolute', left: -960, top: -540, width: 1920, height: 1080, pointerEvents: 'none' }}>
+      <div style={{ position: 'absolute', left: 120, bottom: 128 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16, ...type(24, 600, { mono: true }), letterSpacing: `${mix(0.6, 0.16, kick).toFixed(3)}em`, color: GOLD, opacity: kick, textTransform: 'uppercase' }}>
+          <ShotcraftMark size={40} tone="dark" />
+          <span style={{ textTransform: 'none', fontFamily: BRAND.font, fontSize: 30, fontWeight: 700, letterSpacing: '0.03em', color: L.ink }}>{BRAND.name}</span>
+          <span>· Three chapters, one film</span>
+        </div>
+        <div style={{ marginTop: 26, ...type(150, 400, { serif: true }), letterSpacing: '-0.035em', color: L.ink }}>
+          <TextReveal text="Craft the shot." by="word" variant="rise" start={st + 6} each={22} gap={5} />
+        </div>
+        <div style={{ marginTop: 22, ...type(38, 420), color: L.ink2, opacity: sub, transform: `translateY(${((1 - sub) * 14).toFixed(1)}px)` }}>
+          Shot recipes for cinematic product films.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// 一个完整的世界（给定帧，可为小数帧）
+const World: React.FC<{ f: number; frame: number }> = ({ f, frame }) => {
+  const { cam, af } = camAt(f);
+  const over = ramp(f, FLIGHTS[2][0], FLIGHTS[2][1] - FLIGHTS[2][0], EASE.smooth);
+  const plateOn = ramp(frame, 176, 16, EASE.out);
+  return (
+    <div style={{ position: 'absolute', left: '50%', top: '50%', width: 0, height: 0, transformStyle: 'preserve-3d', transform: camTransform(cam) }}>
+      {MOTES.map((m, k) => (
+        <div key={k} style={{
+          position: 'absolute', left: -m.r, top: -m.r, width: m.r * 2, height: m.r * 2, borderRadius: '50%',
+          transform: `translate3d(${m.x}px,${m.y}px,${m.z}px)`,
+          background: `radial-gradient(circle, ${alpha('#f4efe4', m.a)} 0%, ${alpha('#f4efe4', 0)} 70%)`,
+        }} />
+      ))}
+      {CHAPTERS.map((_, i) => {
+        const p = POSES[i];
+        // enter/exit：按"站距"退焦变暗；总览时全部回到可读（但略压暗，给落版让主次）
+        const d = Math.min(1, Math.abs(af - i));
+        const focus = Math.max(1 - d, over * 0.85);
+        const lift = (1 - d) * 18;
+        return (
+          <div key={i} style={{
+            position: 'absolute', left: -CW / 2, top: -CH / 2, width: CW, height: CH, borderRadius: 34, overflow: 'hidden',
+            transform: `${poseTransform(p)} translateZ(${lift.toFixed(2)}px)`,
+            background: `radial-gradient(ellipse 80% 90% at 18% 0%, ${alpha('#ffffff', 0.07)} 0%, ${alpha('#ffffff', 0)} 60%), linear-gradient(165deg, #202226 0%, #16171a 55%, #111214 100%)`,
+            border: `1.5px solid ${alpha('#ffffff', 0.08 + 0.08 * focus)}`,
+            boxShadow: `inset 0 1.5px 0 ${alpha('#ffffff', 0.12)}, 0 30px 80px -10px rgba(0,0,0,0.7), 0 6px 18px rgba(0,0,0,0.5)`,
+            opacity: 0.22 + 0.78 * focus,
+            filter: focus < 0.985 ? `blur(${((1 - focus) * 7).toFixed(2)}px)` : undefined,
+          }}>
+            {/* 顶沿受光线：中间亮两端隐 */}
+            <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 2, background: `linear-gradient(90deg, transparent, ${alpha('#ffffff', 0.35 * (0.4 + 0.6 * focus))}, transparent)` }} />
+            <ChapterCard i={i} frame={frame} focus={focus} />
+          </div>
+        );
+      })}
+      {/* 总览落版：在总览站姿态上（放大 2.7 倍排版），只在最后一段飞行开始显影 */}
+      <div style={{ position: 'absolute', left: 0, top: 0, transform: poseTransform(POSES[3]), opacity: plateOn }}>
+        <OverviewPlate frame={frame} />
+      </div>
+    </div>
+  );
+};
+
+// 飞行段时间采样：快门 0.5 帧内 N 个子帧逐层 opacity 1/(i+1) 叠加 = 等权平均；N 按相机位移自适应
+const SHUTTER = 0.5;
+const samplesAt = (f: number) => {
+  const a = camAt(f).cam, b = camAt(f - SHUTTER).cam;
+  const disp = Math.hypot(a.x - b.x, a.y - b.y) / a.s + Math.abs(a.z - b.z) * 0.4
+    + (Math.abs(a.ry - b.ry) + Math.abs(a.rz - b.rz)) * 14 + Math.abs(Math.log(a.s / b.s)) * 1400;
+  return Math.max(1, Math.min(8, Math.ceil(disp / 5)));
+};
+
+export const Basic3DScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const flying = FLIGHTS.some(([a, b]) => frame > a && frame < b);
+  const n = flying ? samplesAt(frame) : 1;
+  return (
+    <AbsoluteFill style={{ background: L.bg[2] }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: -0.08 }} fill={{ x: 0.85, y: 1.05 }} breathe={0.6} intensity={0.55} />
+      <AbsoluteFill style={{ overflow: 'hidden' }}>
+        {Array.from({ length: n }, (_, i) => (
+          <AbsoluteFill key={i} style={{ perspective: `${PERSP}px`, opacity: 1 / (i + 1) }}>
+            <World f={n > 1 ? frame - (SHUTTER * i) / (n - 1) : frame} frame={frame} />
+          </AbsoluteFill>
+        ))}
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/camera/crash-zoom-punch/CrashImpactReal.tsx

@@ -0,0 +1,305 @@
+// crash-impact 急推撞停（第二轮重设计）——同 crash-zoom 的急推，到位瞬间不回弹而是撞停震屏：
+// 高频抖 + 指数衰减 6f，然后真静止。对比点：重量感（"就是它"）vs 回弹款的弹性感（"看这个"）。
+//
+// 设计决定
+// - look：lime（石墨暗场 + 荧光黄绿）。和同卡的回弹款（ember · 后仰浏览器窗口 · 编辑式读数）拉开：
+//   这一款是"战术 HUD"语言——真实 projects 页做成一块正视的监视屏，舞台铺淡网格；
+//   一只荧光取景框在全景里扫描（card1 → card5 → card4，snappy 跳格），锁定 card4 后才急推。
+// - 撞停的重量：到位帧一记"冲击帧"——卡外整片先被荧光黄绿占满（1f），3f 内压成近黑（重物砸地扬起的
+//   一闪，而不是暖色曝光）；两道荧光冲击波环从卡缘向外扩散；震屏 14px·e^(−t/1.8)，首拍沿冲击方向下沉。
+//   目标卡不浮起、不发光晕——是"砸实"不是"弹起"。全片只这一处作用于整画面（R4）。
+// - 落定后：一道扫描线自上而下扫过卡面一次（Q4：唯一一次光效，裁进圆角），左右两栏 HUD 读数错峰落位：
+//   左栏 TARGET / OWNER / STATE 等宽读数，右栏 240px 荧光「P0」+ 说明。尾帧是一张完整海报。
+// - 截图纹理保留（Q1）；card4 用 4x 高清纹理覆盖原位，特写不糊字（Q2）。
+//
+// 时间表（30fps，126f）
+//   0–4    全景：监视屏已在画面、网格与角标显影，舞台 zoom 0.78 起极缓推近 2%
+//   4–30   扫描：取景框落 card1（4f）→ 10f 跳 card5 → 20f 跳 card4（各 8f snappy），28f 收紧锁定 + LOCK 标签
+//   32–40  预备：zoom 回退 ~3%（smooth），取景框外扩一呼吸
+//   40–46  急推 6f：log 空间强 ease-in 0.76→2.35，目标卡屏幕位置单调收向画面中心；只这段做时间采样运动模糊
+//   46     撞停：冲击帧（46 荧光 / 47 余辉 / 48 起近黑）+ 冲击波环；46–52 震屏收干（清晰抖动，不加模糊）
+//   52–68  扫描线扫过卡面（16f）；54–84 左右 HUD 读数错峰落位（标签 → 数值，3–4f 一拍）
+//   84–125 hold 42f：极缓推近 1→1.012，尾帧干净落定
+import React from 'react';
+import { AbsoluteFill, Img, staticFile, useCurrentFrame } from 'remotion';
+import layout from '../../_textures/live-layout.json';
+import { EASE, Grain, Vignette, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, type } from '../../_fixtures/Look';
+
+export const CRASHIMPACT_DUR = 126;
+
+// lime 的主光换成偏冷的灰绿：舞台光不抢荧光强调色（荧光只给取景框 / 冲击 / P0）
+const L = { ...LOOKS.lime, light: '#9aa58a' };
+const LIME = L.accent;
+const CARDS = layout.projects.cards;
+const CARD = CARDS[3];
+const TARGET = { cx: CARD.x + CARD.w / 2, cy: CARD.y + CARD.h / 2 }; // ≈ (960, 772) 页面坐标
+const CARD_R = 8.5; // 截图里卡片圆角（页面 px）
+// 监视屏取景（页面坐标）：以 card4 为中心裁一块，全景里看得到三排卡
+const CROP = { x: 395, y: 222, w: 1130, h: 1100 };
+const CROP_C = { x: CROP.x + CROP.w / 2, y: CROP.y + CROP.h / 2 };
+const SCREEN_R = 22; // 监视屏圆角（页面 px）
+
+const PUSH = 40;
+const HIT = 46;
+const Z_WIDE = 0.78;
+const Z_HIT = 2.35; // 落定倍率：卡片 ≈ 840×733，占画高 68%，左右各留 ~540px 给 HUD 读数
+
+// 相机：zoom + 目标卡中心的屏幕位置（插值"目标位置"而不是相机中心：急推时目标单调收向画面中心）
+const camAt = (f: number) => {
+  const creep = mix(Z_WIDE, Z_WIDE * 1.02, ramp(f, 0, 32, EASE.smooth));
+  const wind = creep * mix(1, 0.97, ramp(f, 32, 8, EASE.smooth));
+  const wideSx = 960 + (TARGET.cx - CROP_C.x) * wind;
+  const wideSy = 540 + (TARGET.cy - CROP_C.y) * wind;
+  if (f < PUSH) return { zoom: wind, sx: wideSx, sy: wideSy };
+  const p = ramp(f, PUSH, HIT - PUSH, EASE.exit); // 到位即停：没有回弹段
+  const zoom = Math.exp(mix(Math.log(wind), Math.log(Z_HIT), p)) * (1 + 0.012 * ramp(f, 84, 41, EASE.smooth));
+  return { zoom, sx: mix(wideSx, 960, p), sy: mix(wideSy, 540, p) };
+};
+
+// 撞停震屏（屏幕空间，确定性）：cos 起相让第 0 帧取包络峰值且朝下（冲击方向延续），
+// 频率 ~2.9 rad/f 使相邻帧几乎反号——高频"硬抖"而非手持晃；x 轴幅度 0.55、微旋转 0.025°/px
+const shakeAt = (f: number) => {
+  const t = f - HIT;
+  if (t < 0) return { sx: 0, sy: 0, rot: 0 };
+  const env = 14 * Math.exp(-t / 1.8);
+  if (env < 0.15) return { sx: 0, sy: 0, rot: 0 };
+  return { sx: env * 0.55 * Math.sin(t * 2.4 + 0.6), sy: env * Math.cos(t * 2.9), rot: env * 0.025 * Math.sin(t * 3.7 + 1.9) };
+};
+
+// 扫描取景框：依次落在 card1 → card5 → card4（页面坐标的中心与尺寸），snappy 跳格
+const HOPS = [
+  { at: 4, c: CARDS[0] },
+  { at: 10, c: CARDS[4] },
+  { at: 20, c: CARD },
+];
+const reticleAt = (f: number) => {
+  const box = (c: typeof CARD) => ({ x: c.x + c.w / 2, y: c.y + c.h / 2, w: c.w, h: c.h });
+  let r = box(HOPS[0].c);
+  for (let i = 1; i < HOPS.length; i++) {
+    const u = ramp(f, HOPS[i].at, 8, EASE.snappy);
+    const b = box(HOPS[i].c);
+    r = { x: mix(r.x, b.x, u), y: mix(r.y, b.y, u), w: mix(r.w, b.w, u), h: mix(r.h, b.h, u) };
+  }
+  return r;
+};
+
+// 一个相机姿态下的整个世界（监视屏 + 页面 + 取景框 + 冲击波），给运动模糊子帧复用
+const World: React.FC<{ f: number; frame: number }> = ({ f, frame }) => {
+  const { zoom, sx, sy } = camAt(f);
+  const tx = sx - TARGET.cx * zoom;
+  const ty = sy - TARGET.cy * zoom;
+  const px = (n: number) => n / zoom; // 屏幕 px → 页面 px（线宽恒定）
+  // 取景框
+  const r = reticleAt(frame);
+  const show = ramp(frame, 3, 6, EASE.out);
+  const lock = ramp(frame, 28, 8, EASE.snappy);
+  const breath = ramp(frame, 32, 8, EASE.smooth) * (1 - ramp(frame, PUSH, 5, EASE.exit));
+  const pad = mix(26, 10, lock) + 16 * breath;
+  const arm = px(30);
+  const bx = r.x - r.w / 2 - pad, by = r.y - r.h / 2 - pad, bw = r.w + pad * 2, bh = r.h + pad * 2;
+  // 撞停：卡外先冲击帧（荧光）→ 3f 压成近黑
+  const t = frame - HIT;
+  const crush = t >= 0;
+  const impact = t < 0 ? 0 : t < 1 ? 0.8 : t < 2 ? 0.22 : 0; // 冲击帧：1f 荧光 → 1f 余辉 → 近黑
+  const scrimColor = `rgba(${Math.round(mix(11, 198, impact))},${Math.round(mix(12, 244, impact))},${Math.round(mix(9, 50, impact))},${(t < 0 ? 0 : 1).toFixed(3)})`;
+  return (
+    <div style={{ position: 'absolute', left: 0, top: 0, width: 1920, height: layout.projects.pageH, transformOrigin: '0 0', transform: `translate(${tx.toFixed(2)}px, ${ty.toFixed(2)}px) scale(${zoom.toFixed(5)})` }}>
+      {/* 监视屏：裁出 CROP 那一块页面；屏外是舞台 */}
+      <div style={{
+        position: 'absolute', left: CROP.x, top: CROP.y, width: CROP.w, height: CROP.h, borderRadius: SCREEN_R, overflow: 'hidden',
+        background: '#f9f6f1',
+        boxShadow: `0 0 0 ${px(1.5)}px ${alpha(LIME, 0.35)}, 0 ${px(40)}px ${px(110)}px ${px(-10)}px rgba(0,0,0,0.85)`,
+      }}>
+        <div style={{ position: 'absolute', left: -CROP.x, top: -CROP.y, width: 1920, height: layout.projects.pageH }}>
+          <Img src={staticFile('textures/live/projects-full.png')} style={{ position: 'absolute', width: 1920 }} />
+          {/* 全景时页面略压一档，和暗场舞台不打架 */}
+          <div style={{ position: 'absolute', inset: 0, background: 'rgba(12,14,10,0.1)' }} />
+          {/* 扫描十字线：贯穿监视屏，跟着取景框中心走 */}
+          <div style={{ position: 'absolute', left: 0, right: 0, top: r.y, height: px(1.2), background: alpha('#2d3a00', 0.35 * show * (1 - lock * 0.6)) }} />
+          <div style={{ position: 'absolute', top: 0, bottom: 0, left: r.x, width: px(1.2), background: alpha('#2d3a00', 0.35 * show * (1 - lock * 0.6)) }} />
+        </div>
+      </div>
+      {/* 撞停压暗：卡外一圈极大 spread 影子当遮罩（冲击帧先荧光后近黑） */}
+      {crush && (
+        <div style={{ position: 'absolute', left: CARD.x, top: CARD.y, width: CARD.w, height: CARD.h, borderRadius: CARD_R, boxShadow: `0 0 0 6000px ${scrimColor}` }} />
+      )}
+      {/* 压暗后的"桌面"：卡后一片极淡的冷灰光池，暗场不是死平底色（不是光晕——卡本身不发光） */}
+      {crush && (
+        <div style={{
+          position: 'absolute', left: CARD.x - CARD.w * 1.6, top: CARD.y - CARD.h * 1.3, width: CARD.w * 4.2, height: CARD.h * 3.6,
+          background: `radial-gradient(ellipse 50% 50% at 50% 46%, ${alpha('#c9d4b8', 0.09 * (1 - impact))}, ${alpha('#c9d4b8', 0)} 70%)`,
+        }} />
+      )}
+      {/* 高清目标卡覆盖原位（Q2） */}
+      <Img src={staticFile('textures/live/card4-hires.png')} style={{ position: 'absolute', left: CARD.x, top: CARD.y, width: CARD.w, height: CARD.h, borderRadius: CARD_R }} />
+      {/* 扫描线：落定后自上而下扫过卡面一次，裁进圆角（Q4） */}
+      {frame >= 52 && frame <= 70 && (
+        <div style={{ position: 'absolute', left: CARD.x, top: CARD.y, width: CARD.w, height: CARD.h, borderRadius: CARD_R, overflow: 'hidden', pointerEvents: 'none' }}>
+          {(() => {
+            const y = mix(-0.12, 1.08, ramp(frame, 52, 16, EASE.swift)) * CARD.h;
+            return (
+              <>
+                <div style={{ position: 'absolute', left: 0, right: 0, top: y - 60, height: 60, background: `linear-gradient(180deg, ${alpha(LIME, 0)}, ${alpha(LIME, 0.16)})` }} />
+                <div style={{ position: 'absolute', left: 0, right: 0, top: y - px(1.5), height: px(3), background: alpha(LIME, 0.95), boxShadow: `0 0 ${px(14)}px ${alpha(LIME, 0.8)}` }} />
+              </>
+            );
+          })()}
+        </div>
+      )}
+      {/* 冲击波：两道圆角环从卡缘向外扩散（页面坐标、线宽屏幕恒定） */}
+      {t >= 0 && t < 20 && [0, 3].map((d, k) => {
+        const u = ramp(frame, HIT + d, 16, EASE.snappy);
+        const grow = mix(0, k ? 60 : 110, u);
+        const op = (1 - u) * (k ? 0.6 : 1) * (frame >= HIT + d ? 1 : 0);
+        return (
+          <div key={k} style={{
+            position: 'absolute', left: CARD.x - grow, top: CARD.y - grow, width: CARD.w + grow * 2, height: CARD.h + grow * 2,
+            borderRadius: CARD_R + grow * 0.5, border: `${px(k ? 2 : 4)}px solid ${alpha(LIME, op)}`, boxSizing: 'border-box',
+            boxShadow: `0 0 ${px(20)}px ${alpha(LIME, op * 0.5)}`,
+          }} />
+        );
+      })}
+      {/* 卡缘：落定后一圈荧光发丝线（取景框的"已锁定"状态） */}
+      {t >= 0 && (
+        <div style={{ position: 'absolute', left: CARD.x, top: CARD.y, width: CARD.w, height: CARD.h, borderRadius: CARD_R, boxShadow: `0 0 0 ${px(2)}px ${alpha(LIME, 0.9)}`, pointerEvents: 'none' }} />
+      )}
+      {/* 取景框角标（页面坐标；线宽按 zoom 反算，屏幕恒定 4px） */}
+      {show > 0 && (
+        <svg width={bw + 80} height={bh + 80} viewBox={`${bx - 40} ${by - 40} ${bw + 80} ${bh + 80}`}
+          style={{ position: 'absolute', left: bx - 40, top: by - 40, overflow: 'visible', opacity: show }}>
+          <g fill="none" stroke={LIME} strokeWidth={px(4)} strokeLinecap="square">
+            <path d={`M${bx} ${by + arm} V${by} H${bx + arm}`} />
+            <path d={`M${bx + bw - arm} ${by} H${bx + bw} V${by + arm}`} />
+            <path d={`M${bx + bw} ${by + bh - arm} V${by + bh} H${bx + bw - arm}`} />
+            <path d={`M${bx + arm} ${by + bh} H${bx} V${by + bh - arm}`} />
+          </g>
+          {/* 中心十字准星 */}
+          <g stroke={LIME} strokeWidth={px(2)} opacity={1 - lock}>
+            <path d={`M${r.x - px(14)} ${r.y} H${r.x + px(14)} M${r.x} ${r.y - px(14)} V${r.y + px(14)}`} />
+          </g>
+        </svg>
+      )}
+    </div>
+  );
+};
+
+// 快门窗口内等权叠加：第 i 层不透明度 1/(i+1)，逐层 over 合成后恰为算术平均；子帧间距 ≤8px，封顶 36
+const SHUTTER = 0.55;
+const edgeAt = (f: number) => {
+  const a = camAt(f), b = camAt(f - SHUTTER);
+  return Math.abs(a.zoom - b.zoom) * 1100 + Math.hypot(a.sx - b.sx, a.sy - b.sy);
+};
+
+// HUD 读数（屏幕空间）：标签 → 数值，错峰落位
+const Readout: React.FC<{ frame: number; at: number; label: string; children: React.ReactNode }> = ({ frame, at, label, children }) => {
+  const a = ramp(frame, at, 12, EASE.snappy);
+  return (
+    <div style={{ marginBottom: 46 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, ...type(22, 600, { mono: true }), letterSpacing: '0.2em', color: LIME, opacity: a, textTransform: 'uppercase' }}>
+        <span style={{ height: 2, width: mix(0, 28, a), background: LIME }} />
+        {label}
+      </div>
+      <div style={{ marginTop: 12, opacity: ramp(frame, at + 3, 10, EASE.out), transform: `translateX(${((1 - ramp(frame, at + 3, 14, EASE.snappy)) * -24).toFixed(1)}px)` }}>{children}</div>
+    </div>
+  );
+};
+
+export const CrashImpactReal: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { sx, sy, rot } = shakeAt(frame);
+  const n = frame >= PUSH && frame <= HIT ? Math.max(1, Math.min(36, Math.ceil(edgeAt(frame) / 8))) : 1;
+  const smear = n > 1 ? Math.min(4, (edgeAt(frame) / n) * 0.5 * Math.min(1, Math.max(0, (edgeAt(frame) - 60) / 200))) : 0;
+  const wide = 1 - ramp(frame, PUSH, HIT - PUSH, EASE.exit);
+  const vig = frame < HIT ? 0.35 + 0.25 * ramp(frame, PUSH, HIT - PUSH, EASE.exit) : mix(0.75, 0.4, ramp(frame, HIT, 16, EASE.out));
+  // 取景框标签（屏幕空间，跟着全景里的取景框走；急推开始即收起）
+  const cam = camAt(frame);
+  const r = reticleAt(frame);
+  const lock = ramp(frame, 28, 8, EASE.snappy);
+  const tagX = cam.sx + (r.x - r.w / 2 - TARGET.cx) * cam.zoom - 12;
+  const tagY = cam.sy + (r.y + r.h / 2 - TARGET.cy) * cam.zoom + 22; // 标签挂在取景框左下（首格 card1 在顶排，挂上沿会压到屏幕标题）
+  const hop = frame < 10 ? '01' : frame < 20 ? '05' : '04';
+  return (
+    <AbsoluteFill style={{ background: L.bg[2], overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: -0.1 }} fill={{ x: 0.5, y: 1.1 }} intensity={0.6} breathe={0.4} vignette={0.2}>
+        {/* 舞台网格：跟随相机 30% 的缩放做视差，急推后隐入暗场 */}
+        <div style={{
+          position: 'absolute', inset: -400, opacity: 0.55 * wide + 0.1,
+          transform: `scale(${(1 + (cam.zoom / Z_WIDE - 1) * 0.3).toFixed(4)})`,
+          backgroundImage: `linear-gradient(${alpha(LIME, 0.07)} 1.5px, transparent 1.5px), linear-gradient(90deg, ${alpha(LIME, 0.07)} 1.5px, transparent 1.5px)`,
+          backgroundSize: '64px 64px', backgroundPosition: '400px 400px',
+          WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
+        }} />
+      </Stage>
+
+      {/* 震屏层：整页 + 遮罩 + 冲击波一起抖（2.35x 下页面远超画框，抖动不露边） */}
+      <AbsoluteFill style={{ transform: `translate(${sx.toFixed(2)}px, ${sy.toFixed(2)}px) rotate(${rot.toFixed(4)}deg)` }}>
+        {n > 1 ? (
+          Array.from({ length: n }, (_, i) => (
+            <AbsoluteFill key={i} style={{ opacity: 1 / (i + 1), filter: smear > 0.3 ? `blur(${smear.toFixed(2)}px)` : undefined }}>
+              <World f={frame - (SHUTTER * i) / (n - 1)} frame={frame} />
+            </AbsoluteFill>
+          ))
+        ) : (
+          <World f={frame} frame={frame} />
+        )}
+      </AbsoluteFill>
+
+      {/* 全景 HUD：监视屏上沿两角的等宽标签 + 取景框标签 */}
+      <AbsoluteFill style={{ opacity: wide, pointerEvents: 'none' }}>
+        <div style={{ position: 'absolute', left: 960 - (CROP.w / 2) * cam.zoom, top: 540 - (CROP.h / 2) * cam.zoom - 50, display: 'flex', gap: 14, alignItems: 'center', ...type(22, 600, { mono: true }), letterSpacing: '0.18em', color: L.ink2, opacity: ramp(frame, 0, 8, EASE.out) }}>
+          <span style={{ width: 10, height: 10, borderRadius: 5, background: LIME, boxShadow: `0 0 12px ${alpha(LIME, 0.8)}` }} />
+          LIVE · /PROJECTS
+        </div>
+        <div style={{ position: 'absolute', right: 960 - (CROP.w / 2) * cam.zoom, top: 540 - (CROP.h / 2) * cam.zoom - 50, ...type(22, 600, { mono: true }), letterSpacing: '0.18em', color: L.ink3 }}>
+          10 PROJECTS · SCANNING
+        </div>
+        {frame >= 4 && (
+          <div style={{
+            position: 'absolute', left: tagX, top: tagY, height: 34, padding: '0 12px', display: 'flex', alignItems: 'center', gap: 10, borderRadius: 4,
+            background: lock > 0.5 ? LIME : alpha('#0b0d06', 0.85), color: lock > 0.5 ? L.onAccent : LIME,
+            border: `1.5px solid ${LIME}`, ...type(22, 700, { mono: true }), letterSpacing: '0.14em',
+            opacity: ramp(frame, 4, 4, EASE.out), transform: `scale(${mix(1.25, 1, ramp(frame, 28, 6, EASE.snappy)).toFixed(3)})`, transformOrigin: '0 0',
+          }}>
+            {lock > 0.5 ? `LOCK ${hop}` : `SCAN ${hop}`}
+          </div>
+        )}
+      </AbsoluteFill>
+
+      {/* 落定 HUD：左栏等宽读数，右栏 P0 */}
+      {frame >= 52 && (
+        <AbsoluteFill style={{ pointerEvents: 'none', transform: `translate(${(sx * 0.4).toFixed(2)}px, ${(sy * 0.4).toFixed(2)}px)` }}>
+          <div style={{ position: 'absolute', left: 104, top: 262 }}>
+            <Readout frame={frame} at={54} label="Target">
+              <div style={{ ...type(64, 600, { mono: true }), color: L.ink }}>04<span style={{ color: L.ink3 }}>/10</span></div>
+            </Readout>
+            <Readout frame={frame} at={58} label="Owner">
+              <div style={{ ...type(48, 600), color: L.ink }}>Yuki</div>
+            </Readout>
+            <Readout frame={frame} at={62} label="State">
+              <div style={{ ...type(48, 600), color: L.ink, display: 'flex', alignItems: 'center', gap: 16 }}>
+                <span style={{ width: 16, height: 16, borderRadius: 8, background: LIME, boxShadow: `0 0 16px ${alpha(LIME, 0.9)}` }} />
+                Active
+              </div>
+            </Readout>
+          </div>
+          <div style={{ position: 'absolute', left: 1452, top: 258, width: 400 }}>
+            <div style={{ ...type(22, 600, { mono: true }), letterSpacing: '0.2em', color: LIME, opacity: ramp(frame, 60, 10, EASE.out) }}>PRIORITY · THIS SPRINT</div>
+            <div style={{ ...type(250, 800, { mono: true }), letterSpacing: '-0.04em', color: LIME, marginTop: 18, marginLeft: -12, textShadow: `0 0 60px ${alpha(LIME, 0.35)}` }}>
+              <TextReveal text="P0" by="char" variant="rise" start={62} each={16} gap={3} />
+            </div>
+            <div style={{ height: 2, width: 360, marginTop: 28, background: alpha(L.ink, 0.18), transform: `scaleX(${ramp(frame, 70, 18, EASE.snappy).toFixed(4)})`, transformOrigin: '0 50%' }} />
+            <div style={{ ...type(40, 500), color: L.ink, marginTop: 28 }}>
+              <TextReveal text="7 open questions" by="word" variant="blur" start={74} each={14} gap={3} ease={EASE.out} />
+            </div>
+            <div style={{ ...type(32, 400), color: L.ink2, marginTop: 10 }}>
+              <TextReveal text="Routing ships first." by="word" variant="blur" start={79} each={14} gap={3} ease={EASE.out} />
+            </div>
+          </div>
+        </AbsoluteFill>
+      )}
+      <Vignette strength={vig} inner={0.4} color={L.shadow} cy={0.5} />
+      <Grain opacity={0.07} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};