dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/data/timeline-travel/TimelineTravel.tsx

@@ -0,0 +1,290 @@
+// timeline-travel —— 时间轴横移（《反恐王国》式）
+// 镜头沿水平刻度轴加速横移，v1.0/v2.0/v3.0/Today 四个刻度依次掠过，
+// 每过刻度对应卡片从刻度线 spring 过冲弹立 + 短停，镜头不停；
+// 末刻度 4f 急停 + 推近 1.28×。世界层只动 translateX/scale。
+// f0–12 初始静置；f114 起真静止 46f（160f 总长）。
+//
+// 质感升级：补导出时长（工作台原推断 104f，正好截在急停帧，Today 卡与推近从未出镜）；去掉调试标题，
+// 换成固定页眉；灰骨架 Card 换成出版级里程碑卡（版本 chip / 年份 / 标题 / 说明 / 指标，Today 卡强调色）；
+// 6px 墨色竖杠刻度换成带光晕的节点 + 版本/年份两级标签，卡片与节点间一根发丝连杆；冲刺段按相机速度给
+// 横向 SpeedBlur（静止/慢段为 0）；背景层大号年份以 0.35× 速度视差平移、随距离交叉淡入淡出，给"旅行"一个远景参照；柔光亮场 + 颗粒。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing, spring } from 'remotion';
+import { G } from '../../_fixtures/Fixtures';
+import { Backdrop, FONT, Grain, SpeedBlur, innerHighlight, softShadow, tracking } from '../../_fixtures/Polish';
+import { ShotcraftMark } from '../../_fixtures/Brand';
+
+export const TIMELINE_TRAVEL_DURATION = 160;
+
+const W = 1920;
+const AXIS_Y = 700;
+const TICK_GAP = 1400; // 刻度间距（世界坐标）
+const TICKS = [
+  // video-shotcraft 的版本史（2026 年 7 月起，按月一个大版本）；year = 卡片/刻度上的日期，far = 背景视差大字（月份）
+  { label: 'v1.0', year: 'Jul 2026', far: 'Jul', x: 960, title: 'Public launch', desc: 'Shot recipe cards, a template and a gallery.', metric: 'Remotion render' },
+  { label: 'v2.0', year: 'Aug 2026', far: 'Aug', x: 960 + TICK_GAP, title: 'Camera & sound', desc: '2.5D camera moves with beat-synced SFX.', metric: 'Beat-synced cuts' },
+  { label: 'v3.0', year: 'Sep 2026', far: 'Sep', x: 960 + TICK_GAP * 2, title: 'Motion workbench', desc: 'Every shot, tuned in one place.', metric: 'Live preview' },
+  { label: 'Today', year: 'Oct 2026', far: 'Oct', x: 960 + TICK_GAP * 3, title: 'One-prompt promos', desc: 'Direct the film. Let the agent shoot it.', metric: 'Claude Code & Codex' },
+];
+const WORLD_W = 960 + TICK_GAP * 3 + 960;
+
+const TRAVEL_START = 12;
+const TRAVEL_END = 104; // 急停帧
+const ZOOM_END = 114;
+
+// 相机 X：in-out 但前段慢后段快（poly(3) in 为主，末端 out 急收）
+// 用两段拼：0–0.82 加速段（Easing.in(poly(2.2))），0.82–1 急刹段
+const camXAt = (f: number): number => {
+  const total = TICKS[3].x - 960; // 需要位移的世界距离
+  const t = interpolate(f, [TRAVEL_START, TRAVEL_END], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  // 加速→巡航→急刹：分段缓动，前 15% 缓起，中段近匀加速冲刺，末 12% 急收
+  const eased = interpolate(t, [0, 0.15, 0.88, 1], [0, 0.055, 0.9, 1], {
+    easing: Easing.inOut(Easing.quad),
+  });
+  return eased * total;
+};
+
+// 每张卡的弹立帧：相机中心扫过该刻度的时刻（数值上预先求好，避免逐帧求逆）
+// 通过 camXAt 反查：找到 camX == tick.x - 960 的帧
+const popFrameOf = (tickX: number): number => {
+  for (let f = TRAVEL_START; f <= TRAVEL_END; f++) {
+    if (camXAt(f) >= tickX - 960) return f;
+  }
+  return TRAVEL_END;
+};
+
+const CARD_W = 360;
+const CARD_H = 240;
+const STEM = 36; // 卡底到轴的连杆长度
+
+const MilestoneCard: React.FC<{ i: number }> = ({ i }) => {
+  const t = TICKS[i];
+  const hero = i === TICKS.length - 1;
+  return (
+    <div
+      style={{
+        width: CARD_W,
+        height: CARD_H,
+        boxSizing: 'border-box',
+        borderRadius: 18,
+        padding: '24px 26px',
+        background: hero ? 'linear-gradient(180deg, #ffffff 0%, #f7f7ff 100%)' : '#ffffff',
+        border: hero ? '1px solid rgba(91,99,211,0.35)' : `1px solid ${G.hairline}`,
+        boxShadow: `${innerHighlight(0.9)}, ${softShadow(hero ? 18 : 8, { strength: hero ? 1.3 : 1 })}`,
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: FONT.sans,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <div
+          style={{
+            height: 30,
+            padding: '0 12px',
+            borderRadius: 8,
+            background: hero ? G.accent : G.fill,
+            color: hero ? '#fff' : G.ink2,
+            fontFamily: FONT.mono,
+            fontSize: 18,
+            fontWeight: 650,
+            lineHeight: '30px',
+          }}
+        >
+          {hero ? 'v4.0' : t.label}
+        </div>
+        <div style={{ marginLeft: 'auto', fontSize: 20, color: G.ink3, fontVariantNumeric: 'tabular-nums' }}>{t.year}</div>
+      </div>
+      <div style={{ marginTop: 18, fontSize: 32, fontWeight: 700, letterSpacing: tracking(32), color: G.ink1 }}>{t.title}</div>
+      <div style={{ marginTop: 8, fontSize: 23, lineHeight: 1.3, color: G.ink2 }}>{t.desc}</div>
+      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 8, fontSize: 20, fontWeight: 600, color: hero ? G.accent : G.ink3 }}>
+        <div style={{ width: 8, height: 8, borderRadius: 4, background: hero ? G.accent : '#c4c6cc' }} />
+        {t.metric}
+      </div>
+    </div>
+  );
+};
+
+const TickStop: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const tick = TICKS[i];
+  const hero = i === TICKS.length - 1;
+  const pop = popFrameOf(tick.x) - 6; // 提前 6f 起弹，掠过时正好立起
+  const s = spring({
+    frame: frame - pop,
+    fps: 30,
+    config: { damping: 11, stiffness: 160, mass: 0.9 }, // 明显过冲
+    durationInFrames: 26,
+  });
+  const appeared = frame >= pop;
+  // 节点被"点亮"：卡片起弹同拍从空心灰变实心
+  const lit = interpolate(frame, [pop, pop + 6], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+
+  return (
+    <div style={{ position: 'absolute', left: tick.x, top: 0 }}>
+      {/* 刻度节点：外圈光晕 + 实心芯 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: -16,
+          top: AXIS_Y - 16,
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          background: hero ? 'rgba(91,99,211,0.16)' : 'rgba(20,22,28,0.06)',
+          transform: `scale(${(0.6 + 0.4 * lit).toFixed(3)})`,
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          left: -8,
+          top: AXIS_Y - 8,
+          width: 16,
+          height: 16,
+          borderRadius: 8,
+          boxSizing: 'border-box',
+          border: `3px solid ${hero ? G.accent : G.ink1}`,
+          background: lit > 0.5 ? (hero ? G.accent : G.ink1) : '#f4f4f2',
+        }}
+      />
+      {/* 刻度标签：版本 + 年份 */}
+      <div style={{ position: 'absolute', left: -110, top: AXIS_Y + 34, width: 220, textAlign: 'center', fontFamily: FONT.sans }}>
+        <div style={{ fontWeight: 720, fontSize: 40, letterSpacing: tracking(40), color: hero ? G.accent : G.ink1 }}>{tick.label}</div>
+        <div style={{ marginTop: 2, fontSize: 28, fontWeight: 500, color: G.ink3, fontVariantNumeric: 'tabular-nums' }}>{tick.year}</div>
+      </div>
+      {/* 卡片从刻度线弹立：以底边为轴 scaleY 0→1（带过冲），伴随轻微横向收拢 */}
+      {appeared && (
+        <>
+          <div
+            style={{
+              position: 'absolute',
+              left: -0.5,
+              top: AXIS_Y - 8 - STEM * Math.min(1, s),
+              width: 1,
+              height: STEM * Math.min(1, s),
+              background: hero ? 'rgba(91,99,211,0.5)' : 'rgba(20,22,28,0.22)',
+            }}
+          />
+          <div
+            style={{
+              position: 'absolute',
+              left: -CARD_W / 2,
+              top: AXIS_Y - 8 - STEM - CARD_H,
+              transform: `scaleY(${s}) scaleX(${0.85 + 0.15 * s})`,
+              transformOrigin: '50% 100%',
+              opacity: Math.min(1, s * 2),
+            }}
+          >
+            <MilestoneCard i={i} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export const TimelineTravel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const camX = camXAt(frame);
+  const vx = -(camXAt(frame + 0.5) - camXAt(frame - 0.5)); // 世界层屏幕速度（px/f，向左为负）
+
+  // 急停后推近末刻度：scale 1 → 1.28，中心对准 Today 刻度
+  const zoom = interpolate(frame, [TRAVEL_END, ZOOM_END], [1, 1.28], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const headIn = interpolate(frame, [0, 14], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic) });
+
+  return (
+    <div style={{ width: W, height: 1080, overflow: 'hidden', position: 'relative', fontFamily: FONT.sans }}>
+      <Backdrop tone="light" light={{ x: 0.5, y: 0.22 }} accent={G.accent} vignette={0.16} grain={0} />
+      {/* 远景视差：大号年份以 0.35× 速度平移、只推近 0.35 倍幅度（远景在推近层之外）；
+          按与镜头中心的距离淡入淡出，同一时刻只读到当前年份 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `scale(${(1 + (zoom - 1) * 0.35).toFixed(4)})`,
+          transformOrigin: '50% 62%',
+        }}
+      >
+        {TICKS.map((t, i) => {
+          const d = Math.abs(camX - i * TICK_GAP) / TICK_GAP; // 0 = 该年份刻度正对镜头
+          const op = Math.max(0, 1 - d / 0.62);
+          if (op <= 0) return null;
+          return (
+            <div
+              key={i}
+              style={{
+                position: 'absolute',
+                left: 960 + i * TICK_GAP * 0.35 - camX * 0.35 - 500,
+                width: 1000,
+                top: 210,
+                textAlign: 'center',
+                fontSize: 280,
+                lineHeight: 1,
+                fontWeight: 800,
+                letterSpacing: '-0.05em',
+                color: `rgba(20,22,28,${(0.04 * op).toFixed(4)})`,
+                fontVariantNumeric: 'tabular-nums',
+              }}
+            >
+              {t.far}
+            </div>
+          );
+        })}
+      </div>
+      {/* 推近层：以画面中央偏下（末刻度落点）为原点放大 */}
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${zoom})`, transformOrigin: '50% 62%' }}>
+        {/* 世界层：唯一横移的容器；冲刺段横向运动模糊 */}
+        <SpeedBlur vx={vx} amount={0.16} max={9}>
+          <div style={{ position: 'absolute', left: 0, top: 0, width: WORLD_W, height: 1080, transform: `translateX(${(-camX).toFixed(2)}px)` }}>
+            {/* 主轴线 */}
+            <div
+              style={{
+                position: 'absolute',
+                left: 200,
+                top: AXIS_Y - 1,
+                width: WORLD_W - 400,
+                height: 2,
+                background: 'linear-gradient(90deg, rgba(20,22,28,0) 0%, rgba(20,22,28,0.22) 4%, rgba(20,22,28,0.22) 96%, rgba(20,22,28,0) 100%)',
+              }}
+            />
+            {/* 次刻度（细短杠，速度参照物） */}
+            {Array.from({ length: 22 }).map((_, i) =>
+              i % 5 === 0 ? null : (
+                <div
+                  key={i}
+                  style={{
+                    position: 'absolute',
+                    left: 960 + i * (TICK_GAP / 5) - 1,
+                    top: AXIS_Y - 9,
+                    width: 2,
+                    height: 18,
+                    background: 'rgba(20,22,28,0.2)',
+                    borderRadius: 1,
+                  }}
+                />
+              ),
+            )}
+            {TICKS.map((_, i) => (
+              <TickStop key={i} i={i} frame={frame} />
+            ))}
+          </div>
+        </SpeedBlur>
+      </div>
+      {/* 固定页眉 */}
+      <div style={{ position: 'absolute', left: 120, top: 96, opacity: headIn, transform: `translateY(${((1 - headIn) * 8).toFixed(2)}px)` }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 30, fontWeight: 650, letterSpacing: tracking(30, true), textTransform: 'uppercase', color: G.accent }}>
+          <ShotcraftMark size={36} tone="light" />
+          Release history
+        </div>
+        <div style={{ marginTop: 6, fontSize: 56, fontWeight: 720, letterSpacing: tracking(56), color: G.ink1 }}>Shipping every month</div>
+      </div>
+      <Grain opacity={0.05} />
+    </div>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/effects/assemble-then-type-flyin/AssembleThenTypeFlyin.tsx

@@ -0,0 +1,273 @@
+// assemble-then-type-flyin — 先骨架后文字：页面"自己长出来"
+//
+// 第二轮重设计（石墨暗场 · 胶片金 · 发布页）：
+// - look = graphite（近单色暗场，accent2 胶片金作唯一强调色）。成形后的画面是 video-shotcraft 的
+//   发布页：玻璃导航条（镜刻标志 + video-shotcraft 字标）、112px 衬线大标题「Frame motion. / Craft the shot.」
+//   （shot. 为金色斜体）、说明句、金色 CTA + 描边次按钮、三枚指标块；右侧是一张 640×760 的「调色台」卡
+//   （上半是一帧胶片画面，下半是 LIFT / GAMMA / GAIN 三只色轮）。
+// - 两段式手法不变、维度分开：
+//   ① 骨架段 6–50f：10 个无字骨架件（框、色块、分隔线、色轮圈）从画外 120–420px 平面飞入，
+//      overshoot 过冲贴合 + ±7° 旋转回正，按真实速度给方向性运动模糊；开场画面里先有 12 栏版式参考线。
+//   ② 文字段 58–128f：每个字符带确定性种子的 dx ±260 / dy ±200 / dz −200→−760 / rotateX/Y/Z ±120–190°，
+//      perspective(900px) 下翻滚着落位，远处虚近处实；先大标题、后导航与说明、最后 mono 小标注。
+//      块内字间隔按字数自适应，保证全部在 128f 前落定。
+// - 收尾一笔（落定后的"定稿"信号）：CTA 由描边通电成金色实底；胶片画面从扁平的 log 灰片被一道竖向
+//   擦除线"调色"成暖金成片 —— 呼应标题。
+//
+// 时间表（30fps，共 168f）：
+//   0–8     版式参考线就位（第 1 帧即有画面）
+//   6–50    骨架飞入（10 件，起飞间隔先密后疏）
+//   50–58   停半拍：骨架齐了、参考线退淡（两段之间的语义断点）
+//   58–128  文字 3D 逐字落位（大字 58/66 → 导航/说明 76–92 → 指标 96–102 → 小标注 104–114）
+//   118–146 CTA 通电、胶片画面调色擦除（124–146），色轮控制点同步从中性推到偏色位
+//   128–168 hold（40f）：整页 1.5% 极缓推近
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { EASE, FONT, SpeedBlur, ramp } from '../../_fixtures/Polish';
+import { LOOKS, SERIF, Stage, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const ASSEMBLE_THEN_TYPE_FLYIN_DURATION = 168;
+
+const L = LOOKS.graphite;
+const GOLD = L.accent2;
+
+const rand = (seed: number) => {
+  const x = Math.sin(seed * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+// ───────────── 骨架件（无字）：from = 飞入起点位移，rot = 起始旋转，at = 起飞帧 ─────────────
+type Shell = { from: [number, number]; rot: number; at: number };
+const SHELL_DUR = 16;
+const SH: Record<string, Shell> = {
+  nav: { from: [0, -180], rot: 0, at: 6 },
+  card: { from: [420, 40], rot: 6, at: 10 },
+  logo: { from: [-220, -80], rot: -7, at: 15 },
+  wheels: { from: [260, 220], rot: 5, at: 19 },
+  divider: { from: [-320, 0], rot: 0, at: 23 },
+  cta: { from: [-160, 200], rot: -5, at: 27 },
+  ghost: { from: [120, 220], rot: 4, at: 31 },
+  stat1: { from: [-240, 260], rot: -6, at: 35 },
+  stat2: { from: [0, 300], rot: 3, at: 39 },
+  stat3: { from: [220, 280], rot: 6, at: 44 },
+};
+
+// ───────────── 文字块：逐字 3D 落位 ─────────────
+type Seg = { s: string; color?: string; italic?: boolean };
+type Block = { x: number; y: number; start: number; style: React.CSSProperties; segs: Seg[]; w?: number; align?: 'center' | 'right' };
+const MONO = FONT.mono;
+const BLOCKS: Block[] = [
+  { x: 120, y: 298, start: 58, style: { fontFamily: SERIF, fontSize: 112, fontWeight: 400, letterSpacing: '-0.025em', color: L.ink, lineHeight: 1 }, segs: [{ s: 'Frame motion.' }] },
+  { x: 120, y: 424, start: 66, style: { fontFamily: SERIF, fontSize: 112, fontWeight: 400, letterSpacing: '-0.025em', color: L.ink, lineHeight: 1, fontStyle: 'italic' }, segs: [{ s: 'Craft the ' }, { s: 'shot.', color: GOLD }] },
+  { x: 196, y: 82, start: 76, style: { ...type(34, 700), fontFamily: BRAND.font, letterSpacing: '0.03em', color: L.ink }, segs: [{ s: BRAND.name }] },
+  { x: 1104, y: 86, start: 79, style: { ...type(28, 500), color: L.ink2 }, segs: [{ s: 'Shots' }] },
+  { x: 1224, y: 86, start: 80, style: { ...type(28, 500), color: L.ink2 }, segs: [{ s: 'Workbench' }] },
+  { x: 1414, y: 86, start: 81, style: { ...type(28, 500), color: L.ink2 }, segs: [{ s: 'Gallery' }] },
+  { x: 1574, y: 86, w: 202, align: 'center', start: 84, style: { ...type(28, 650), color: L.ink }, segs: [{ s: 'Install' }] },
+  { x: 120, y: 246, start: 86, style: { fontFamily: MONO, fontSize: 24, fontWeight: 600, letterSpacing: '0.12em', color: GOLD }, segs: [{ s: 'AGENT SKILL · BUILT ON REMOTION' }] },
+  { x: 120, y: 604, start: 88, style: { ...type(36, 400), color: L.ink2 }, segs: [{ s: 'Cinematic product videos, crafted by your agent.' }] },
+  { x: 120, y: 719, w: 320, align: 'center', start: 92, style: { ...type(32, 650), color: '#16120a' }, segs: [{ s: 'Make a promo' }] },
+  { x: 466, y: 719, w: 320, align: 'center', start: 95, style: { ...type(32, 550), color: L.ink }, segs: [{ s: 'Watch the reel' }] },
+  { x: 150, y: 862, start: 96, style: { ...type(56, 750), color: L.ink }, segs: [{ s: '1 prompt' }] },
+  { x: 488, y: 862, start: 99, style: { ...type(56, 750), color: L.ink }, segs: [{ s: '2.5D' }] },
+  { x: 826, y: 862, start: 102, style: { ...type(56, 750), color: L.ink }, segs: [{ s: '30 fps' }] },
+  { x: 150, y: 934, start: 104, style: { fontFamily: MONO, fontSize: 22, letterSpacing: '0.12em', color: L.ink3 }, segs: [{ s: 'TO A FULL PROMO' }] },
+  { x: 488, y: 934, start: 106, style: { fontFamily: MONO, fontSize: 22, letterSpacing: '0.12em', color: L.ink3 }, segs: [{ s: 'CAMERA MOVES' }] },
+  { x: 826, y: 934, start: 108, style: { fontFamily: MONO, fontSize: 22, letterSpacing: '0.12em', color: L.ink3 }, segs: [{ s: 'BEAT-SYNCED CUTS' }] },
+  { x: 1196, y: 252, start: 110, style: { fontFamily: MONO, fontSize: 22, letterSpacing: '0.1em', color: alpha('#ffffff', 0.85) }, segs: [{ s: 'SHOT 04 · DOLLY IN' }] },
+  { x: 1160, y: 908, w: 213, align: 'center', start: 112, style: { fontFamily: MONO, fontSize: 22, letterSpacing: '0.14em', color: L.ink2 }, segs: [{ s: 'LIFT' }] },
+  { x: 1373, y: 908, w: 214, align: 'center', start: 113, style: { fontFamily: MONO, fontSize: 22, letterSpacing: '0.14em', color: L.ink2 }, segs: [{ s: 'GAMMA' }] },
+  { x: 1587, y: 908, w: 213, align: 'center', start: 114, style: { fontFamily: MONO, fontSize: 22, letterSpacing: '0.14em', color: L.ink2 }, segs: [{ s: 'GAIN' }] },
+];
+const TEXT_END = 128; // 每块最后一字落定上限
+const CHAR_DUR = 16;
+
+type CharP = { dx: number; dy: number; dz: number; rx: number; ry: number; rz: number };
+let seedK = 0;
+const CHAR_PARAMS: CharP[][][] = BLOCKS.map((b) =>
+  b.segs.map((sg) =>
+    Array.from(sg.s, () => {
+      const k = seedK++;
+      return {
+        dx: (rand(k) - 0.5) * 520, dy: (rand(k + 50) - 0.5) * 400, dz: -200 - rand(k + 99) * 560,
+        rx: (rand(k + 7) - 0.5) * 340, ry: (rand(k + 13) - 0.5) * 380, rz: (rand(k + 23) - 0.5) * 240,
+      };
+    }),
+  ),
+);
+
+const FlyBlock: React.FC<{ b: Block; bi: number; frame: number }> = ({ b, bi, frame }) => {
+  const n = CHAR_PARAMS[bi].reduce((a, s) => a + s.length, 0);
+  const step = Math.min(1.6, Math.max(0.35, (TEXT_END - b.start - CHAR_DUR) / n));
+  let ci = 0;
+  return (
+    <div style={{
+      position: 'absolute', left: b.x, top: b.y, width: b.w, textAlign: b.align, whiteSpace: 'nowrap', ...b.style,
+    }}>
+      {b.segs.map((sg, si) => (
+        <span key={si} style={{ color: sg.color, fontStyle: sg.italic ? 'italic' : undefined }}>
+          {Array.from(sg.s, (ch, k) => {
+            const c = CHAR_PARAMS[bi][si][k];
+            const ft = b.start + ci++ * step;
+            const a = ramp(frame, ft, CHAR_DUR, EASE.snappy);
+            const far = (1 - a) * (1 - a);
+            const blur = far * (1 + (-c.dz / 760) * 7);
+            const glyph = ch === ' ' ? '\u00a0' : ch; // 空格塞成不换行空格，否则 inline-block 空 span 宽度归零
+            return (
+              <span key={k} style={{
+                display: 'inline-block', opacity: a > 0 ? Math.min(1, a * 1.8) : 0,
+                filter: a > 0 && a < 1 && blur > 0.1 ? `blur(${blur.toFixed(2)}px)` : undefined,
+                transform: a >= 1 ? 'none' :
+                  `perspective(900px) translate3d(${((1 - a) * c.dx).toFixed(1)}px,${((1 - a) * c.dy).toFixed(1)}px,${((1 - a) * c.dz).toFixed(1)}px) ` +
+                  `rotateX(${((1 - a) * c.rx).toFixed(1)}deg) rotateY(${((1 - a) * c.ry).toFixed(1)}deg) rotateZ(${((1 - a) * c.rz).toFixed(1)}deg)`,
+              }}>
+                {glyph}
+              </span>
+            );
+          })}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+// 面板材质：带色相的深色 + 低透明度白描边 + 顶部内高光 + 两层软阴影
+const PANEL: React.CSSProperties = {
+  background: 'linear-gradient(180deg, #1d1e22 0%, #16171a 100%)',
+  border: '1px solid rgba(255,255,255,0.09)',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 4px rgba(0,0,0,0.5), 0 30px 60px -24px rgba(0,0,0,0.85)',
+};
+
+// 胶片画面：暮色天空 + 低悬的太阳 + 三层山影 + 水面反光（纯渐变 / SVG，graded 控制 log 灰片 ↔ 成片）
+const FilmStill: React.FC<{ graded: boolean }> = ({ graded }) => (
+  <div style={{
+    position: 'absolute', inset: 0,
+    filter: graded ? 'saturate(1.15) contrast(1.08)' : 'saturate(0.12) contrast(0.62) brightness(1.18)',
+    background: 'linear-gradient(180deg, #1c2a3a 0%, #6b5a5a 38%, #e09a52 60%, #f2c27a 66%, #3a2a22 67%, #1a1410 100%)',
+  }}>
+    <div style={{ position: 'absolute', left: 300, top: 196, width: 120, height: 120, borderRadius: 60, background: 'radial-gradient(circle, #fff1cf 0%, #ffd58a 45%, rgba(255,190,110,0) 72%)' }} />
+    <svg width={640} height={500} viewBox="0 0 640 500" style={{ position: 'absolute', left: 0, top: 0 }}>
+      <path d="M0 300 L80 262 L150 284 L240 236 L330 276 L420 244 L520 280 L640 250 L640 340 L0 340 Z" fill="#7a5040" opacity={0.7} />
+      <path d="M0 322 L110 292 L210 314 L300 286 L400 318 L500 296 L640 318 L640 340 L0 340 Z" fill="#4a3028" />
+      <rect x={0} y={334} width={640} height={166} fill={`url(#water${graded ? 'g' : 'l'})`} />
+      <defs>
+        <linearGradient id={`water${graded ? 'g' : 'l'}`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#c47a3c" />
+          <stop offset="0.25" stopColor="#4a3226" />
+          <stop offset="1" stopColor="#120d0a" />
+        </linearGradient>
+      </defs>
+      {Array.from({ length: 7 }, (_, i) => (
+        <rect key={i} x={338 - i * 6} y={346 + i * 18} width={44 + i * 12} height={3} rx={1.5} fill="#ffd9a0" opacity={0.55 - i * 0.07} />
+      ))}
+    </svg>
+  </div>
+);
+
+const Wheel: React.FC<{ cx: number; hue: string; dot: [number, number]; k: number }> = ({ cx, hue, dot, k }) => (
+  <div style={{ position: 'absolute', left: cx - 74, top: 0, width: 148, height: 148 }}>
+    <div style={{
+      position: 'absolute', inset: 0, borderRadius: '50%',
+      background: `conic-gradient(from 90deg, #c95a5a, #c9b25a, #5ac97a, #5ab2c9, #6a5ac9, #c95ab2, #c95a5a)`, opacity: 0.55,
+      WebkitMaskImage: 'radial-gradient(circle, transparent 54%, #000 56%, #000 70%, transparent 71%)',
+      maskImage: 'radial-gradient(circle, transparent 54%, #000 56%, #000 70%, transparent 71%)',
+    }} />
+    <div style={{ position: 'absolute', inset: 26, borderRadius: '50%', background: 'radial-gradient(circle, #2a2b30 0%, #1a1b1f 100%)', border: '1px solid rgba(255,255,255,0.08)' }} />
+    <div style={{ position: 'absolute', left: 74 + dot[0] * k - 9, top: 74 + dot[1] * k - 9, width: 18, height: 18, borderRadius: 9, background: hue, boxShadow: `0 0 0 3px rgba(0,0,0,0.5), 0 0 12px ${hue}` }} />
+  </div>
+);
+
+export const AssembleThenTypeFlyin: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const shellAt = (s: Shell, f: number) => {
+    const a = ramp(f, s.at, SHELL_DUR, EASE.overshoot);
+    return { x: (1 - a) * s.from[0], y: (1 - a) * s.from[1], r: (1 - ramp(f, s.at, SHELL_DUR + 4, EASE.snappy)) * s.rot };
+  };
+  const shelled = (s: Shell, style: React.CSSProperties, children?: React.ReactNode) => {
+    if (frame < s.at) return null;
+    const p = shellAt(s, frame);
+    const p0 = shellAt(s, frame - 0.5);
+    const p1 = shellAt(s, frame + 0.5);
+    const op = Math.min(1, ramp(frame, s.at, 6, EASE.out) * 1.2);
+    return (
+      <SpeedBlur vx={p1.x - p0.x} vy={p1.y - p0.y} amount={0.32} max={18}>
+        <div style={{ position: 'absolute', opacity: op, transform: `translate(${p.x.toFixed(2)}px,${p.y.toFixed(2)}px) rotate(${p.r.toFixed(2)}deg)`, ...style }}>
+          {children}
+        </div>
+      </SpeedBlur>
+    );
+  };
+
+  const guides = 1 - 0.75 * ramp(frame, 48, 14, EASE.out);
+  const ctaOn = ramp(frame, 118, 14, EASE.out);
+  const wipe = ramp(frame, 124, 22, EASE.swift); // 胶片调色擦除 0→1（左→右）
+  const push = 1 + 0.015 * ramp(frame, 120, 48, EASE.smooth);
+
+  return (
+    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden', fontFamily: FONT.sans, background: L.bg[2] }}>
+      <Stage look={L} keyLight={{ x: 0.3, y: 0.05 }} fill={{ x: 0.85, y: 0.55 }} intensity={0.75} breathe={0.3}>
+        {/* 12 栏版式参考线：第 1 帧就在，骨架齐后退淡 */}
+        <div style={{ position: 'absolute', inset: 0, opacity: guides }}>
+          {Array.from({ length: 13 }, (_, i) => (
+            <div key={i} style={{ position: 'absolute', left: 120 + i * 140, top: 0, width: 1, height: 1080, background: 'rgba(255,255,255,0.045)' }} />
+          ))}
+          {[64, 220, 600, 840, 990].map((y) => (
+            <div key={y} style={{ position: 'absolute', left: 0, top: y, width: 1920, height: 1, background: 'rgba(255,255,255,0.04)' }} />
+          ))}
+        </div>
+      </Stage>
+
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${push.toFixed(5)})`, transformOrigin: '50% 50%' }}>
+        {/* ── 骨架段 ── */}
+        {shelled(SH.nav, { ...PANEL, left: 120, top: 64, width: 1680, height: 80, borderRadius: 24, background: 'linear-gradient(180deg, rgba(40,41,46,0.75), rgba(26,27,30,0.75))' },
+          <div style={{
+            position: 'absolute', right: 12, top: 12, width: 202, height: 56, borderRadius: 16, boxSizing: 'border-box',
+            border: '1px solid rgba(255,255,255,0.14)', background: 'rgba(255,255,255,0.05)',
+          }} />,
+        )}
+        {shelled(SH.logo, { left: 140, top: 84, width: 40, height: 40 },
+          // 品牌标志（镜刻）：作为一件无字骨架件飞入，暗底反白版
+          <ShotcraftMark size={40} tone="dark" />,
+        )}
+        {shelled(SH.card, { ...PANEL, left: 1160, top: 220, width: 640, height: 760, borderRadius: 30, overflow: 'hidden' }, <>
+          <div style={{ position: 'absolute', left: 0, top: 0, width: 640, height: 500, overflow: 'hidden' }}>
+            <FilmStill graded={false} />
+            <div style={{ position: 'absolute', inset: 0, clipPath: `inset(0 ${((1 - wipe) * 100).toFixed(2)}% 0 0)` }}>
+              <FilmStill graded />
+            </div>
+            {wipe > 0 && wipe < 1 && (
+              <div style={{ position: 'absolute', top: 0, bottom: 0, left: wipe * 640 - 1, width: 2, background: GOLD, boxShadow: `0 0 18px ${alpha(GOLD, 0.9)}` }} />
+            )}
+            <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 120, background: 'linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0))' }} />
+          </div>
+          <div style={{ position: 'absolute', left: 0, top: 500, width: 640, height: 1, background: 'rgba(255,255,255,0.08)' }} />
+        </>)}
+        {shelled(SH.wheels, { left: 1160, top: 744, width: 640, height: 150 }, <>
+          {/* 色轮控制点：log 灰片时居中（中性），调色擦除时同步推到各自的偏色位置 */}
+          <Wheel cx={106} hue="#7fb2ff" dot={[-16, 22]} k={wipe} />
+          <Wheel cx={320} hue="#f2d9a8" dot={[12, -10]} k={wipe} />
+          <Wheel cx={534} hue={GOLD} dot={[24, -20]} k={wipe} />
+        </>)}
+        {shelled(SH.divider, { left: 120, top: 572, width: 980, height: 1, background: `linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0))` })}
+        {shelled(SH.cta, {
+          left: 120, top: 700, width: 320, height: 80, borderRadius: 40, boxSizing: 'border-box',
+          border: `1.5px solid ${alpha(GOLD, 0.5 + 0.5 * ctaOn)}`,
+          background: `linear-gradient(180deg, ${alpha('#f0d6a2', 0.06 + 0.94 * ctaOn)}, ${alpha(GOLD, 0.04 + 0.96 * ctaOn)})`,
+          boxShadow: `inset 0 1px 0 rgba(255,255,255,${(0.1 + 0.35 * ctaOn).toFixed(2)}), 0 16px 40px -14px ${alpha(GOLD, 0.55 * ctaOn)}`,
+        })}
+        {shelled(SH.ghost, { left: 466, top: 700, width: 320, height: 80, borderRadius: 40, boxSizing: 'border-box', border: '1.5px solid rgba(255,255,255,0.18)', background: 'rgba(255,255,255,0.03)' })}
+        {(['stat1', 'stat2', 'stat3'] as const).map((k, i) =>
+          <React.Fragment key={k}>{shelled(SH[k], { ...PANEL, left: 120 + i * 338, top: 836, width: 314, height: 144, borderRadius: 22 })}</React.Fragment>,
+        )}
+
+        {/* ── 文字段：逐字 3D 翻滚落位 ── */}
+        {BLOCKS.map((b, bi) => {
+          const text = bi === 9 ? { ...b, style: { ...b.style, color: ctaOn > 0.5 ? '#16120a' : '#f0d6a2' } } : b; // CTA 字随通电由金转深
+          return <FlyBlock key={bi} b={text} bi={bi} frame={frame} />;
+        })}
+      </div>
+    </div>
+  );
+};