dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/transition/line-carry-transition/LineCarryTransition.tsx

@@ -0,0 +1,248 @@
+// line-carry-transition｜线条接力横移转场（Catch Me If You Can 片头式图形接力）
+// 场景 A 的进度条走满 → 末端延伸成长线冲出卡缘 → 镜头跟线横移 1920px → 线在移动中直角拐弯围出
+// 场景 B 的画框，框闭合、画框里的海报长出来。全程一条线、没有切。
+//
+// 第二轮重设计（沙色制图 · Saul Bass 平面海报）：
+// - look = sand（米色纸 + 墨 + 赤陶）。线是 8px 墨色硬线、方头直角，笔头是全片唯一的赤陶色点——
+//   观众的眼睛只需要追这一个点。
+// - 叙事：A = video-shotcraft 的「渲染发布片」进度卡（160px 百分比随线计数，走满 = 线出发的理由）；
+//   B = 线围出的 720×480 画框里长出这支片的海报（赤陶太阳 + 海军蓝山丘 + 粗黑体品牌短句），左侧是展签式标题，
+//   线的水平段在 B 里刚好成了展签下的基线。
+// - 世界宽 3840（A 左半 / B 右半），一条折线 path 全程 dashoffset 生长：
+//   M 336,760 → H 2880（画框左下角）→ V 280 → H 3600 → V 760 → H 2880 闭合，总长 4944。
+// - 命门：横移段 drawn = 1144 + cam，线生长与镜头同速，笔头钉在画面 x≈1480 直到拐角；
+//   每段交接处速度连续（进度条 ease-out 到零 → 冲出段两端零速 → 镜头 in-out 起步 → 收框 in-out）。
+// - 横移时世界内容（卡、点阵、展签）按镜头速度做水平运动模糊；线与笔头在模糊层外，始终锐利。
+//
+// 时间表（30fps，共 190f）：
+//   0–4     A 进度卡静置（第 0 帧即在画面里），空轨道
+//   4–40    进度条 0→100%（36f ease-out），百分比与 MB 同步计数
+//   40–46   满格停一拍：状态变「Ready to ship」，对勾弹出（弹簧）
+//   46–56   冲出段：线从条尾冲出卡缘到画面 x=1480（两端零速）
+//   56–112  镜头左移 1920px（56f smooth in-out），线同速延伸；~92f 线到画框左下角、开始向上拐
+//   100–126 B 展签标题逐行升起（框外，可以先到）
+//   112–136 收框：线走完上边、右边、底边闭合（24f in-out）；136–142 笔头消散并卸载
+//   136–166 框内海报：底色铺开 → 太阳升起 → 山丘错峰 → 海报字升起
+//   166–190 hold 24f
+// 线下的制图刻度（1200–2760，每 120px 一格）在线经过后才出现，给横移中段一个速度参照。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, SpeedBlur, mix, ramp, softShadow, velocity } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TYPE, alpha, springAt, stagger, type } from '../../_fixtures/Look';
+import { BRAND } from '../../_fixtures/Brand';
+
+export const LINE_CARRY_TRANSITION_DURATION = 190;
+
+const L = LOOKS.sand;
+const LINE_Y = 760;
+const X0 = 336; // 进度条起点（卡内左边距）
+const BAR = 648; // 进度条长度
+const TIP_X = 1480; // 横移时笔头钉住的屏幕 x
+const FX0 = 2880, FX1 = 3600, FY0 = 280; // B 画框（底边 = LINE_Y）
+const SEGS: Array<[number, number, number, number]> = [
+  [X0, LINE_Y, FX0, LINE_Y],
+  [FX0, LINE_Y, FX0, FY0],
+  [FX0, FY0, FX1, FY0],
+  [FX1, FY0, FX1, LINE_Y],
+  [FX1, LINE_Y, FX0, LINE_Y],
+];
+const lens = SEGS.map(([a, b, c, d]) => Math.hypot(c - a, d - b));
+const TOTAL = lens.reduce((s, x) => s + x, 0); // 4944
+const PATH = `M ${X0} ${LINE_Y} H ${FX0} V ${FY0} H ${FX1} V ${LINE_Y} H ${FX0}`;
+
+const PAN0 = 56, PAN1 = 112;
+const camAt = (f: number) => 1920 * ramp(f, PAN0, PAN1 - PAN0, EASE.smooth);
+const LEAD = TIP_X - X0; // 横移段：drawn = LEAD + cam
+const drawnAt = (f: number) => {
+  if (f < 46) return BAR * ramp(f, 4, 36, EASE.out);
+  if (f < PAN0) return mix(BAR, LEAD, ramp(f, 46, 10, EASE.swift));
+  if (f < PAN1) return LEAD + camAt(f);
+  return mix(LEAD + 1920, TOTAL, ramp(f, PAN1, 24, EASE.smooth));
+};
+const tipAt = (d: number): [number, number] => {
+  let r = Math.max(0, Math.min(d, TOTAL));
+  for (let i = 0; i < SEGS.length; i++) {
+    const [a, b, c, e] = SEGS[i];
+    if (r <= lens[i]) {
+      const t = r / lens[i];
+      return [a + (c - a) * t, b + (e - b) * t];
+    }
+    r -= lens[i];
+  }
+  return [FX0, LINE_Y];
+};
+
+const NAVY = L.accent2;
+const CREAM = '#f7eedf';
+
+// 平面海报（Saul Bass 式剪纸）：赤陶太阳 + 海军蓝山丘 + 粗黑体字；p = 各层入场进度
+const Poster: React.FC<{ w: number; h: number; f: number; mini?: boolean }> = ({ w, h, f, mini }) => {
+  const sun = mini ? 1 : ramp(f, 140, 22, EASE.snappy);
+  const hill = (i: number) => (mini ? 1 : ramp(f, 146 + stagger(i, 2, 6, EASE.out), 20, EASE.snappy));
+  const txt = mini ? 1 : ramp(f, 152, 18, EASE.snappy);
+  const k = w / 720;
+  return (
+    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: CREAM }}>
+      <svg width={w} height={h} viewBox="0 0 720 480" style={{ position: 'absolute', inset: 0 }}>
+        <circle cx={468} cy={mix(480, 226, sun)} r={142} fill={L.accent} />
+        {/* 海军蓝山丘与太阳叠印（multiply = 孔版印刷的套色叠印） */}
+        <path d={`M 250 480 Q 540 ${mix(620, 250, hill(0))} 830 480 Z`} fill={NAVY} style={{ mixBlendMode: 'multiply' }} />
+        <path d={`M -60 480 Q 150 ${mix(600, 300, hill(1))} 420 480 Z`} fill={L.ink} />
+        <rect x={0} y={420} width={720} height={60} fill={L.ink} opacity={hill(1)} />
+      </svg>
+      {!mini && (
+        <div style={{ position: 'absolute', left: 44 * k, top: 38 * k, overflow: 'hidden' }}>
+          <div style={{ transform: `translateY(${((1 - txt) * 110).toFixed(2)}%)`, ...type(72, 900), color: L.ink, lineHeight: 0.9, letterSpacing: '-0.035em' }}>
+            FRAME<br />MOTION
+          </div>
+        </div>
+      )}
+      {!mini && (
+        <div style={{ position: 'absolute', left: 44, bottom: 14, ...type(22, 600, { mono: true }), color: CREAM, opacity: txt, letterSpacing: '0.08em' }}>
+          CRAFT THE SHOT.
+        </div>
+      )}
+    </div>
+  );
+};
+
+// 场景 A：渲染进度卡（760×500 @ 280,300；进度条轨道在卡内 y=760）
+const ExportCard: React.FC<{ pct: number; f: number }> = ({ pct, f }) => {
+  const done = pct >= 99.95;
+  const check = springAt(f, 40, { damping: 14, stiffness: 220 });
+  return (
+    <div style={{
+      position: 'absolute', left: 280, top: 300, width: 760, height: 500, boxSizing: 'border-box', padding: '48px 56px',
+      background: `linear-gradient(180deg, ${L.surface}, #f8f1e6)`, borderRadius: 28,
+      boxShadow: `inset 0 1px 0 #fff, inset 0 0 0 1px ${L.line}, ${softShadow(22, { color: L.shadow, strength: 0.9 })}`,
+      fontFamily: FONT.sans,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
+        <div style={{ position: 'relative', width: 120, height: 80, borderRadius: 8, overflow: 'hidden', boxShadow: `0 0 0 1px ${L.line}`, flex: 'none' }}>
+          <Poster w={120} h={80} f={f} mini />
+        </div>
+        <div>
+          <div style={{ ...type(38, 680), color: L.ink }}>launch-film.mp4</div>
+          <div style={{ ...type(28, 500), color: L.ink3, marginTop: 8 }}>1920×1080 · 30 fps · h264</div>
+        </div>
+      </div>
+      <div style={{ position: 'absolute', left: 56, right: 56, top: 236, display: 'flex', alignItems: 'flex-end' }}>
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12, ...type(30, 600), color: done ? L.accent : L.ink3 }}>
+            {done && (
+              <svg width={30} height={30} viewBox="0 0 30 30" style={{ transform: `scale(${check.toFixed(3)})` }}>
+                <circle cx={15} cy={15} r={15} fill={L.accent} />
+                <path d="M8.5 15.5 13 20l8.5-9" stroke="#fff" strokeWidth={3.2} fill="none" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            )}
+            {done ? 'Ready to ship' : 'Rendering…'}
+          </div>
+          <div style={{ ...type(170, 780), color: L.ink, marginTop: 4 }}>
+            {Math.round(pct)}<span style={{ ...type(TYPE.h3, 650), color: L.ink3, marginLeft: 6 }}>%</span>
+          </div>
+        </div>
+        <div style={{ marginLeft: 'auto', ...type(28, 500, { mono: true }), color: L.ink3, paddingBottom: 34 }}>
+          {(pct * 0.48).toFixed(1)} / 48 MB
+        </div>
+      </div>
+      {/* 进度条轨道（墨色填充即 path 本体） */}
+      <div style={{ position: 'absolute', left: X0 - 280, top: LINE_Y - 300 - 4, width: BAR, height: 8, background: alpha(L.ink, 0.1) }} />
+    </div>
+  );
+};
+
+export const LineCarryTransition: React.FC = () => {
+  const f = useCurrentFrame();
+  const cam = camAt(f);
+  const drawn = drawnAt(f);
+  const vx = -velocity(camAt, f);
+  const pct = Math.min(100, (Math.min(drawn, BAR) / BAR) * 100);
+  const [tx, ty] = tipAt(drawn);
+  const tipO = 1 - ramp(f, 136, 6, EASE.linear);
+  const closed = f >= 136;
+  const fillIn = ramp(f, 134, 10, EASE.out); // 框内底色
+  const world: React.CSSProperties = { position: 'absolute', left: 0, top: 0, width: 3840, height: 1080, transform: `translateX(${(-cam).toFixed(2)}px)` };
+  const capIn = (k: number) => ramp(f, 100 + k * 6, 20, EASE.snappy);
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden' }}>
+      {/* 共享舞台（屏幕空间，像摄影棚里的固定灯） */}
+      <Stage look={L} keyLight={{ x: 0.28, y: 0.02 }} fill={{ x: 0.9, y: 0.95 }} />
+
+      {/* 世界内容：随镜头横移，快段水平模糊 */}
+      <SpeedBlur vx={vx} amount={0.28} max={16}>
+        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+          <div style={world}>
+            {/* 制图点阵：给眼睛一个速度参照，上下渐隐 */}
+            <div style={{
+              position: 'absolute', inset: 0,
+              backgroundImage: `radial-gradient(circle, ${alpha(L.ink, 0.13)} 1.7px, ${alpha(L.ink, 0)} 2.3px)`,
+              backgroundSize: '60px 60px', backgroundPosition: '6px 10px',
+              WebkitMaskImage: 'linear-gradient(180deg, transparent 6%, #000 28%, #000 80%, transparent 97%)',
+              maskImage: 'linear-gradient(180deg, transparent 6%, #000 28%, #000 80%, transparent 97%)',
+            }} />
+            {/* A 眉题 */}
+            <div style={{ position: 'absolute', left: 280, top: 214, display: 'flex', gap: 18, alignItems: 'baseline', ...type(TYPE.label + 4, 700, { caps: true }), letterSpacing: '0.24em' }}>
+              <span style={{ color: L.accent }}>01</span><span style={{ color: L.ink2 }}>Render</span>
+            </div>
+            <ExportCard pct={pct} f={f} />
+            {/* B 展签：框外标题，镜头到位前后逐行升起 */}
+            <div style={{ position: 'absolute', left: 2080, top: 300, width: 720 }}>
+              <div style={{ display: 'flex', gap: 18, alignItems: 'baseline', ...type(TYPE.label + 4, 700, { caps: true }), letterSpacing: '0.24em', opacity: capIn(0) }}>
+                <span style={{ color: L.accent }}>02</span><span style={{ color: L.ink2 }}>Premiere</span>
+              </div>
+              <div style={{ ...type(TYPE.h1, 820), color: L.ink, marginTop: 26 }}>
+                {['Launch', 'film.'].map((t, k) => (
+                  <div key={t} style={{ overflow: 'hidden', padding: '0.04em 0 0.14em', margin: '-0.04em 0 -0.14em' }}>
+                    <div style={{ transform: `translateY(${((1 - capIn(k + 0.5)) * 115).toFixed(2)}%)` }}>{t}</div>
+                  </div>
+                ))}
+              </div>
+              <div style={{ ...type(TYPE.small, 500), color: L.ink2, marginTop: 30, opacity: capIn(2.2) }}>
+                Crafted with {BRAND.name} · 30 fps
+              </div>
+            </div>
+            {/* B 画框内：框闭合后才长出海报 */}
+            {closed && (
+              <div style={{
+                position: 'absolute', left: FX0, top: FY0, width: FX1 - FX0, height: LINE_Y - FY0, opacity: fillIn,
+                boxShadow: softShadow(26 * fillIn, { color: L.shadow, strength: 0.8 }),
+              }}>
+                <Poster w={FX1 - FX0} h={LINE_Y - FY0} f={f} />
+              </div>
+            )}
+          </div>
+        </div>
+      </SpeedBlur>
+
+      {/* 一条线全程 evolve（模糊层外，始终锐利） */}
+      <div style={world}>
+        <svg width={3840} height={1080} style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
+          {/* 制图刻度：线经过后才出现在线下（横移中段的速度参照 + 尺规感），主刻度标距离 */}
+          {Array.from({ length: 14 }, (_, i) => {
+            const x = 1200 + i * 120;
+            const on = ramp(X0 + drawn, x, 40, EASE.out);
+            if (on <= 0) return null;
+            const major = i % 4 === 0;
+            return (
+              <g key={i} opacity={on}>
+                <line x1={x} x2={x} y1={LINE_Y + 10} y2={LINE_Y + (major ? 34 : 20)} stroke={alpha(L.ink, major ? 0.55 : 0.3)} strokeWidth={2} />
+                {major && (
+                  <text x={x + 8} y={LINE_Y + 62} fill={alpha(L.ink, 0.42)} style={{ ...type(22, 600, { mono: true }) }}>{`${(i / 4 + 1) * 12} cm`}</text>
+                )}
+              </g>
+            );
+          })}
+          <path d={PATH} fill="none" stroke={L.ink} strokeWidth={8} strokeLinecap="square" strokeLinejoin="miter"
+            strokeDasharray={`${drawn.toFixed(2)} ${TOTAL + 20}`} />
+          {tipO > 0.001 && (
+            <g opacity={tipO}>
+              <circle cx={tx} cy={ty} r={30} fill={L.accent} opacity={0.16} />
+              <circle cx={tx} cy={ty} r={14} fill={L.accent} />
+            </g>
+          )}
+        </svg>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/transition/mosaic-reframe/MosaicReframe.tsx

@@ -0,0 +1,359 @@
+// mosaic-reframe — 12 张瓦片在三种排版间连续变形：规则网格 → feature mosaic → 对角瀑布串。
+// 位置 / 宽高 / 旋转各自独立插值（不走 transform 整体缩放），逐片错峰，段间留 hold。
+//
+// 第二轮重设计（暖沙 · 胶片分镜板）：
+// - look = sand（米色 · 赤陶）。主体是 video-shotcraft 的一块分镜板（12 个镜头的定帧）：12 张程序绘制的
+//   "胶片照片"（落日海面 / 沙丘 / 拱门 / 雾山 / 泳池 / 柑橘静物 / 棕榈影 / 麦田八式，暖调统一），
+//   1920 原生坐标直接排版（不再从 480 设计坐标放大）。
+// - 因果：右上角分段控件 Grid / Mosaic / Cascade 是"布局的开关"——赤陶色指示胶囊先滑到下一档
+//   （父先动），瓦片晚 4f 开始重排（子跟随），让观众看见"一次切换 → 整版重新思考"。
+// - 三态三种语气：A 规则网格（档案）→ B feature mosaic（首图占 3×2，压上衬线大字图注 = 策展）
+//   → C 对角瀑布（每张变成带白边的相纸，-15° 起每张 +3° 递增旋转，像一手牌被摊开 = 态度），
+//   C 态左下留白处升起衬线大标题「Every shot, in sequence.」，尾帧是一张完整的分镜海报。
+// - 运动：每片 x/y 用强 in-out（0.75,0,0.15,1）果断换位，w/h 晚 2f、旋转晚 4f 收敛（位置先到）；
+//   换位途中按段进度 sin 包络"抬起"（放大 3.5% + 阴影变大变虚），落位贴回；B→C 旋转带一次轻过冲。
+// - 错峰：A→B 自左上主图起按序号波浪扫过（先密后疏）；B→C 像发牌一样按序号依次摊开。
+//
+// 时间表（30fps，共 214f）：
+//   0–22    预备：舞台、页眉与控件在场；12 张照片自左上沿对角线错峰升起（第 0 帧已有首张起始态）
+//   22–52   hold A：读网格（全程相机极缓推近 1→1.025）
+//   52–64   控件胶囊 Grid→Mosaic（snappy 12f）
+//   56–92   A→B 重排：每片 26f，错峰 10f；84–104 主图图注逐词升起
+//   92–128  hold B：读 mosaic
+//   128–140 控件胶囊 Mosaic→Cascade；图注 128 起退场
+//   132–176 B→C 摊牌：每片 30f，等间隔错峰 14f；相纸白边 0→14px；158–186 大标题逐词升起、副行淡入
+//   180–214 hold C：海报落定
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { EASE, FONT, Grain, bezier, mix, ramp, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, SERIF, Stage, TextReveal, alpha, stagger, type } from '../../_fixtures/Look';
+import { BRAND, PITCH, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const MOSAIC_REFRAME_DURATION = 214;
+
+const L = LOOKS.sand;
+const N = 12;
+
+// ───────────── 时间常量 ─────────────
+const T_AB = 52; // 控件切到 Mosaic
+const T_BC = 128; // 控件切到 Cascade
+const LAG = 4; // 瓦片晚于控件起跳的帧数（父先动、子跟随）
+const D_AB = 26;
+const D_BC = 30;
+const MOVE = bezier(0.75, 0, 0.15, 1); // 果断换位：慢起 → 急走 → 长尾软落
+const ROT_SETTLE = bezier(0.45, 0, 0.3, 1.22); // 旋转晚到并轻过冲一次
+
+// ───────────── 三套布局（1920×1080 原生像素）─────────────
+type Box = { x: number; y: number; w: number; h: number; rot: number };
+const X0 = 96, X1 = 1824, Y0 = 212, Y1 = 984; // 内容区：安全边距 96，页眉下方
+
+// A：4×3 规则网格
+const AG = 24;
+const AW = (X1 - X0 - 3 * AG) / 4, AH = (Y1 - Y0 - 2 * AG) / 3;
+const A: Box[] = Array.from({ length: N }, (_, i) => ({
+  x: X0 + (i % 4) * (AW + AG), y: Y0 + Math.floor(i / 4) * (AH + AG), w: AW, h: AH, rot: 0,
+}));
+
+// B：6×4 单元格 feature mosaic，首片占 3×2
+const BG = 16;
+const UW = (X1 - X0 - 5 * BG) / 6, UH = (Y1 - Y0 - 3 * BG) / 4;
+const SLOTS: [number, number, number, number][] = [
+  [0, 0, 3, 2], [3, 0, 1, 1], [4, 0, 1, 1], [5, 0, 1, 1], [3, 1, 2, 1], [5, 1, 1, 1],
+  [0, 2, 1, 1], [1, 2, 2, 1], [3, 2, 1, 2], [4, 2, 2, 1], [0, 3, 3, 1], [4, 3, 2, 1],
+];
+const B: Box[] = SLOTS.map(([c, r, cw, rh]) => ({
+  x: X0 + c * (UW + BG), y: Y0 + r * (UH + BG), w: cw * UW + (cw - 1) * BG, h: rh * UH + (rh - 1) * BG, rot: 0,
+}));
+
+// C：对角瀑布串——竖幅相纸沿 (850,214)→(1724,930) 摊开，旋转 -15° 起每张 +3° 递增
+const CW = 300, CH = 372;
+const C: Box[] = Array.from({ length: N }, (_, i) => {
+  const s = i / (N - 1);
+  const cx = 850 + 874 * s, cy = 214 + 716 * s;
+  return { x: cx - CW / 2, y: cy - CH / 2, w: CW, h: CH, rot: -15 + i * 3 };
+});
+
+// ───────────── 照片（程序插画，viewBox 160×100 + slice ≈ object-fit: cover）─────────────
+type Kind = 'sun' | 'dune' | 'arch' | 'ridge' | 'pool' | 'citrus' | 'palm' | 'field';
+const PHOTOS: { kind: Kind; v: number }[] = [
+  { kind: 'sun', v: 0 }, { kind: 'dune', v: 0 }, { kind: 'pool', v: 0 }, { kind: 'arch', v: 0 },
+  { kind: 'ridge', v: 0 }, { kind: 'citrus', v: 0 }, { kind: 'palm', v: 0 }, { kind: 'field', v: 0 },
+  { kind: 'dune', v: 1 }, { kind: 'arch', v: 1 }, { kind: 'sun', v: 1 }, { kind: 'ridge', v: 1 },
+];
+
+const Photo: React.FC<{ i: number }> = ({ i }) => {
+  const { kind, v } = PHOTOS[i];
+  const id = `mr${i}`;
+  const g = (stops: [string, number][], vertical = true) => (
+    <linearGradient id={`${id}g`} x1="0" y1="0" x2={vertical ? 0 : 1} y2={vertical ? 1 : 0}>
+      {stops.map(([c, o], k) => <stop key={k} offset={o} stopColor={c} />)}
+    </linearGradient>
+  );
+  let body: React.ReactNode = null;
+  let defs: React.ReactNode = null;
+  if (kind === 'sun') {
+    const warm = v === 0;
+    const sx = warm ? 126 : 80; // 主图的太阳偏右，给左下图注让位
+    defs = g(warm ? [['#f6c58e', 0], ['#ec8f5b', 0.55], ['#d8643f', 1]] : [['#f4d3b0', 0], ['#e6a07a', 0.6], ['#c97a62', 1]]);
+    body = (
+      <>
+        <rect width="160" height="64" fill={`url(#${id}g)`} />
+        <circle cx={sx} cy="56" r={warm ? 15 : 11} fill="#fff1d6" />
+        <circle cx={sx} cy="56" r={warm ? 26 : 20} fill="#fff1d6" opacity="0.18" />
+        <rect y="60" width="160" height="40" fill={warm ? '#3e4a63' : '#5a5f78'} />
+        <rect y="60" width="160" height="6" fill={warm ? '#566078' : '#6e728a'} opacity="0.8" />
+        {[63, 67, 72, 78, 85].map((y, k) => (
+          <rect key={k} x={sx - (16 - k * 2.2)} y={y} width={2 * (16 - k * 2.2)} height={1.2 + k * 0.2} rx="0.6" fill="#ffe2b4" opacity={0.75 - k * 0.12} />
+        ))}
+      </>
+    );
+  } else if (kind === 'dune') {
+    const a = v === 0;
+    defs = g(a ? [['#f3dcc0', 0], ['#ecc39a', 1]] : [['#e9d2c4', 0], ['#e1b6a0', 1]]);
+    body = (
+      <>
+        <rect width="160" height="100" fill={`url(#${id}g)`} />
+        <circle cx={a ? 118 : 40} cy="24" r="8" fill="#fff4e2" opacity="0.9" />
+        <path d="M0 62 C 30 46, 60 44, 92 58 S 140 66, 160 52 V100 H0Z" fill={a ? '#dc9a68' : '#cf8f72'} />
+        <path d="M0 74 C 40 60, 70 64, 100 76 S 140 82, 160 70 V100 H0Z" fill={a ? '#c4733f' : '#b4705a'} />
+        <path d="M30 100 C 60 80, 100 78, 160 86 V100Z" fill={a ? '#8f4a2b' : '#7f4c3f'} />
+        <path d="M0 62 C 30 46, 60 44, 92 58" fill="none" stroke="#fbe3c4" strokeWidth="0.8" opacity="0.7" />
+      </>
+    );
+  } else if (kind === 'arch') {
+    const a = v === 0;
+    defs = g(a ? [['#efd2b4', 0], ['#e2b48f', 1]] : [['#e9c9c0', 0], ['#d9a497', 1]], false);
+    body = (
+      <>
+        <rect width="160" height="100" fill={`url(#${id}g)`} />
+        <path d="M58 100 V52 A22 22 0 0 1 102 52 V100Z" fill={a ? '#6e3f2b' : '#5d3a3a'} />
+        <path d="M66 100 V56 A14 14 0 0 1 94 56 V100Z" fill={a ? '#f1c795' : '#f0c2a8'} opacity="0.9" />
+        <polygon points="0,0 70,0 20,100 0,100" fill="#ffffff" opacity="0.12" />
+        <polygon points="102,100 160,40 160,100" fill={a ? '#b97d58' : '#a8706a'} opacity="0.45" />
+        <rect y="92" width="160" height="8" fill={a ? '#c08a62' : '#b1817a'} />
+      </>
+    );
+  } else if (kind === 'ridge') {
+    const a = v === 0;
+    defs = g(a ? [['#e9e4dc', 0], ['#c9cfd6', 1]] : [['#efe0d0', 0], ['#d7c4b4', 1]]);
+    body = (
+      <>
+        <rect width="160" height="100" fill={`url(#${id}g)`} />
+        <polygon points="0,62 26,40 46,54 74,28 104,52 126,38 160,56 160,100 0,100" fill={a ? '#a9b4c2' : '#c4ab98'} />
+        <polygon points="0,74 34,54 62,68 96,46 130,66 160,58 160,100 0,100" fill={a ? '#7d8ca0' : '#a5846c'} />
+        <polygon points="0,86 40,70 84,84 120,68 160,80 160,100 0,100" fill={a ? '#4f5d72' : '#7a5a46'} />
+        <rect y="56" width="160" height="10" fill="#ffffff" opacity="0.18" />
+      </>
+    );
+  } else if (kind === 'pool') {
+    defs = g([['#6cc3c1', 0], ['#2f8c96', 1]]);
+    body = (
+      <>
+        <rect width="160" height="100" fill={`url(#${id}g)`} />
+        <rect y="0" width="160" height="22" fill="#efe2cf" />
+        <rect y="20" width="160" height="3" fill="#d9c7ad" />
+        {[40, 62, 84].map((y, k) => <rect key={k} x="0" y={y} width="160" height="1.6" fill="#ffffff" opacity="0.35" />)}
+        <path d="M10 50 Q 40 44 70 52 T 130 50" fill="none" stroke="#ffffff" strokeWidth="1.2" opacity="0.5" />
+        <path d="M30 72 Q 60 66 90 74 T 150 72" fill="none" stroke="#ffffff" strokeWidth="1" opacity="0.4" />
+        <polygon points="100,23 160,23 160,100 130,100" fill="#1c5f6c" opacity="0.35" />
+      </>
+    );
+  } else if (kind === 'citrus') {
+    defs = g([['#f1e3cc', 0], ['#e6d1b2', 1]]);
+    body = (
+      <>
+        <rect width="160" height="100" fill={`url(#${id}g)`} />
+        <rect y="64" width="160" height="36" fill="#c67a45" />
+        <rect y="64" width="160" height="2" fill="#e29a63" />
+        <ellipse cx="74" cy="78" rx="44" ry="5" fill="#8d4f2a" opacity="0.4" />
+        <circle cx="64" cy="60" r="15" fill="#ef8a36" />
+        <circle cx="90" cy="64" r="11" fill="#f3a246" />
+        <circle cx="59" cy="55" r="4" fill="#ffd29a" opacity="0.7" />
+        <circle cx="87" cy="60" r="3" fill="#ffe0b0" opacity="0.7" />
+        <path d="M64 45 q 5 -6 11 -4 q -4 6 -11 4z" fill="#5d7a4a" />
+      </>
+    );
+  } else if (kind === 'palm') {
+    defs = g([['#ecc2aa', 0], ['#e0a68c', 1]], false);
+    body = (
+      <>
+        <rect width="160" height="100" fill={`url(#${id}g)`} />
+        {[0, 1, 2, 3, 4, 5].map((k) => (
+          <path key={k} d={`M40 10 Q ${60 + k * 14} ${10 + k * 10} ${78 + k * 16} ${28 + k * 14}`} fill="none" stroke="#b97862" strokeWidth={5 - k * 0.4} strokeLinecap="round" opacity="0.55" />
+        ))}
+        <path d="M40 10 L 34 100" stroke="#b97862" strokeWidth="3" opacity="0.5" />
+        <rect y="88" width="160" height="12" fill="#c98d74" />
+      </>
+    );
+  } else {
+    defs = g([['#f3e1c0', 0], ['#e9c992', 1]]);
+    body = (
+      <>
+        <rect width="160" height="100" fill={`url(#${id}g)`} />
+        <rect y="0" width="160" height="40" fill="#e8d7bd" />
+        <circle cx="128" cy="20" r="7" fill="#fff3dc" />
+        {Array.from({ length: 9 }, (_, k) => (
+          <path key={k} d={`M80 40 L ${-60 + k * 35} 100`} stroke="#c49a52" strokeWidth={1.4 + k * 0.1} opacity="0.55" />
+        ))}
+        <path d="M0 40 H160" stroke="#b9925a" strokeWidth="1" opacity="0.6" />
+      </>
+    );
+  }
+  return (
+    <svg width="100%" height="100%" viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, display: 'block' }}>
+      <defs>{defs}</defs>
+      {body}
+    </svg>
+  );
+};
+
+// ───────────── 分段控件（布局开关）─────────────
+const SEG = ['Grid', 'Mosaic', 'Cascade'];
+const SEG_W = 168, SEG_H = 60, SEG_PAD = 6;
+const Segmented: React.FC<{ frame: number }> = ({ frame }) => {
+  const p1 = ramp(frame, T_AB, 12, EASE.snappy);
+  const p2 = ramp(frame, T_BC, 12, EASE.snappy);
+  const pos = p1 + p2; // 0 → 1 → 2
+  // 胶囊在途中横向拉长（像被拽过去），到位收回
+  const stretch = 1 + 0.18 * (Math.sin(Math.PI * p1) + Math.sin(Math.PI * p2));
+  const press = (k: number, t: number) => 1 - 0.05 * Math.sin(Math.PI * ramp(frame, t - 3, 8, EASE.linear)) * (k > 0 ? 1 : 0);
+  return (
+    <div style={{
+      position: 'absolute', right: 96, top: 92, width: SEG_W * 3 + SEG_PAD * 2, height: SEG_H + SEG_PAD * 2, borderRadius: 999,
+      background: alpha('#ffffff', 0.55), boxShadow: `inset 0 0 0 1px ${L.line}, ${softShadow(6, { color: L.shadow, strength: 0.6 })}`,
+    }}>
+      <div style={{
+        position: 'absolute', top: SEG_PAD, left: SEG_PAD + pos * SEG_W, width: SEG_W, height: SEG_H, borderRadius: 999,
+        background: L.accent, transform: `scaleX(${stretch.toFixed(4)})`,
+        boxShadow: `0 6px 16px -6px ${alpha(L.accent, 0.7)}, inset 0 1px 0 rgba(255,255,255,0.25)`,
+      }} />
+      {SEG.map((s, k) => {
+        const on = Math.max(0, 1 - Math.abs(pos - k));
+        return (
+          <div key={s} style={{
+            position: 'absolute', top: SEG_PAD, left: SEG_PAD + k * SEG_W, width: SEG_W, height: SEG_H,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            ...type(30, 600), letterSpacing: '-0.01em',
+            color: on > 0.5 ? L.onAccent : L.ink2,
+            transform: `scale(${(k === 1 ? press(1, T_AB) : k === 2 ? press(2, T_BC) : 1).toFixed(4)})`,
+          }}>{s}</div>
+        );
+      })}
+    </div>
+  );
+};
+
+// 瓦片在某帧的几何：A→B、B→C 两段各自的进度，位置 / 宽高 / 旋转错开收敛
+const tileAt = (frame: number, i: number) => {
+  const sAB = T_AB + LAG + stagger(i, N, 10, EASE.out);
+  const sBC = T_BC + LAG + stagger(i, N, 14, EASE.linear); // 发牌：等间隔依次摊开
+  const pAB = ramp(frame, sAB, D_AB, MOVE);
+  const pBC = ramp(frame, sBC, D_BC, MOVE);
+  const sAB2 = ramp(frame, sAB + 2, D_AB, MOVE); // 宽高晚 2f
+  const sBC2 = ramp(frame, sBC + 2, D_BC, MOVE);
+  const rBC = ramp(frame, sBC + 4, D_BC, ROT_SETTLE); // 旋转晚 4f + 过冲
+  const a = A[i], b = B[i], c = C[i];
+  // 以中心插值位置（宽高变化时中心走直线，不会"先长后跑"）
+  const cxA = a.x + a.w / 2, cyA = a.y + a.h / 2, cxB = b.x + b.w / 2, cyB = b.y + b.h / 2, cxC = c.x + c.w / 2, cyC = c.y + c.h / 2;
+  const cx = mix(mix(cxA, cxB, pAB), cxC, pBC);
+  const cy = mix(mix(cyA, cyB, pAB), cyC, pBC);
+  const w = mix(mix(a.w, b.w, sAB2), c.w, sBC2);
+  const h = mix(mix(a.h, b.h, sAB2), c.h, sBC2);
+  const rot = mix(0, c.rot, rBC);
+  const lift = Math.max(Math.sin(Math.PI * pAB), Math.sin(Math.PI * pBC));
+  return { cx, cy, w, h, rot, lift, pBC: sBC2, moving: pBC > 0 };
+};
+
+export const MosaicReframe: React.FC = () => {
+  const frame = useCurrentFrame();
+  const cam = mix(1, 1.025, ramp(frame, 0, 214, EASE.smooth)); // 全程极缓推近
+
+  // 主图图注（B 态）：84f 起逐词升起，128f 起退场
+  const capOut = ramp(frame, T_BC, 10, EASE.exit);
+  // C 态大标题
+  const HEAD = 158;
+
+  const tiles = Array.from({ length: N }, (_, i) => ({ i, ...tileAt(frame, i) }));
+  // 叠放次序：B→C 起按序号（后发的牌压在上面）；之前主图最高
+  const inC = frame >= T_BC + LAG;
+  const z = (i: number) => (inC ? 10 + i : i === 0 ? 30 : 10);
+
+  return (
+    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', fontFamily: FONT.sans }}>
+      <Stage look={L} keyLight={{ x: 0.28, y: 0.02 }} fill={{ x: 0.9, y: 0.95 }} />
+
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${cam.toFixed(5)})`, transformOrigin: '50% 46%' }}>
+        {/* 页眉：品牌标志 + 小写字标 + 分镜板名（标志按亮底 light 版；字标与分镜名同一基线）。
+            总宽压在 x≈620 以内——C 态首张相纸的左上角在 x≈650，页眉再长会被它盖住 */}
+        <div style={{ position: 'absolute', left: 96, top: 92, height: 72, display: 'flex', alignItems: 'center', gap: 18, color: L.ink }}>
+          <ShotcraftMark size={50} tone="light" />
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 20 }}>
+            <span style={{ fontFamily: BRAND.font, fontSize: 36, fontWeight: 700, letterSpacing: '0.03em', lineHeight: 1 }}>{BRAND.name}</span>
+            <span style={{ ...type(32, 450), color: L.ink2 }}>Storyboard</span>
+          </div>
+        </div>
+        <Segmented frame={frame} />
+
+        {/* C 态大标题（左下留白处） */}
+        <div style={{ position: 'absolute', left: 96, top: 676, color: L.ink }}>
+          <div style={{ ...type(124, 500, { serif: true }), letterSpacing: '-0.035em', lineHeight: 1.0 }}>
+            <TextReveal text="Every shot," start={HEAD} by="word" variant="rise" each={20} gap={5} />
+            <br />
+            <TextReveal text="in sequence." start={HEAD + 6} by="word" variant="rise" each={20} gap={5}
+              unitStyle={() => ({ fontStyle: 'italic', color: L.accent })} />
+          </div>
+          <div style={{
+            ...type(32, 450), color: L.ink2, marginTop: 26,
+            opacity: ramp(frame, HEAD + 14, 16, EASE.out), transform: `translateY(${mix(12, 0, ramp(frame, HEAD + 14, 18, EASE.snappy)).toFixed(2)}px)`,
+          }}>{PITCH.en.taglines[4]}</div>
+        </div>
+
+        {tiles.map(({ i, cx, cy, w, h, rot, lift, pBC }) => {
+          // 开场：沿对角线错峰升起（从左上到右下）
+          const order = (i % 4) + Math.floor(i / 4);
+          const inP = ramp(frame, stagger(order, 6, 14, EASE.out) - 2, 16, EASE.snappy);
+          const pad = 14 * pBC; // 相纸白边
+          const radius = mix(16, 6, pBC);
+          const scale = mix(0.94, 1, inP) * (1 + 0.035 * lift);
+          const elev = 6 + 34 * lift + 8 * pBC;
+          return (
+            <div key={i} style={{
+              position: 'absolute', left: cx - w / 2, top: cy - h / 2 + (1 - inP) * 40, width: w, height: h,
+              transform: `rotate(${rot.toFixed(3)}deg) scale(${scale.toFixed(4)})`,
+              opacity: inP, zIndex: z(i), borderRadius: radius,
+              background: L.surface, boxShadow: softShadow(elev, { color: L.shadow, strength: 0.9 + 0.5 * pBC }),
+            }}>
+              <div style={{ position: 'absolute', inset: pad, borderRadius: Math.max(2, radius - pad * 0.7), overflow: 'hidden' }}>
+                <Photo i={i} />
+                {/* 照片内缘一圈极淡暗边：像冲印的晕影，让亮色照片在米色底上立得住 */}
+                <div style={{ position: 'absolute', inset: 0, boxShadow: 'inset 0 0 0 1px rgba(60,30,10,0.10), inset 0 -60px 80px -40px rgba(40,20,10,0.18)' }} />
+                {i === 0 && (
+                  <div style={{
+                    position: 'absolute', inset: 0,
+                    background: 'linear-gradient(200deg, rgba(30,18,10,0) 40%, rgba(30,18,10,0.6) 100%)',
+                    opacity: ramp(frame, T_AB + LAG + 16, 14, EASE.out) * (1 - capOut),
+                  }} />
+                )}
+              </div>
+              {/* 主图图注：B 态的策展语气 */}
+              {i === 0 && frame >= T_AB + LAG + 20 && capOut < 1 && (
+                <div style={{ position: 'absolute', left: 44, bottom: 36, color: '#fff8ee', opacity: 1 - capOut }}>
+                  <div style={{ ...type(30, 650, { caps: true }), letterSpacing: '0.16em', color: '#ffd9b8', marginBottom: 10 }}>
+                    <TextReveal text="Featured shot" start={T_AB + LAG + 22} by="word" variant="blur" each={14} />
+                  </div>
+                  <div style={{ ...type(84, 500, { serif: true }), letterSpacing: '-0.03em', textShadow: '0 2px 18px rgba(30,15,5,0.35)' }}>
+                    <TextReveal text="Golden Hour" start={T_AB + LAG + 26} by="word" variant="rise" each={18} gap={5} />
+                  </div>
+                  <div style={{ ...type(32, 450), color: 'rgba(255,248,238,0.82)', marginTop: 8, opacity: ramp(frame, T_AB + LAG + 34, 14, EASE.out) }}>
+                    Shot 01 · Crash zoom · 4.5 s
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <Grain opacity={0.05} blend="overlay" />
+    </div>
+  );
+};