dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/VersusSlam.tsx

@@ -0,0 +1,217 @@
+// versus-slam 对撞开屏：左右两个半屏（78° 斜切边）从画外加速对冲，沿斜缝砰地撞合；
+// 撞击帧白闪 + 整机震屏指数衰减 + "VS" 圆章盖章压出，切点就是撞击本身，结尾静止 hold。
+//
+// 第二轮重设计（瑞士海报 · 对阵比较 "一支发布片要花多少"）：
+// - look = paper（暖白纸 · 墨 · 朱红），粗黑体海报排版，不用 dashboard。两方 = 两张色块海报：
+//   左「THE OLD WAY」墨黑底 + 纸白 340px「14 days」，右「WITH VIDEO-SHOTCRAFT」朱红底 + 纸白「1 prompt」——
+//   一墨一朱撞在一起，数字本身就是对比结论；说明文字 44px、清单 32px，都按"能读"排。
+// - 建立段（0–18f）不是空屏：纸面上一行「What does a promo take?」（124px，墨线在字带处留空），
+//   斜缝位置一根墨线从中点向两端长出（预示撞线）；两半屏 ease-in(cubic) 10f 对冲，扫过时把设问吞掉。
+// - 撞击三件套同帧起跑（28f）：纸白闪 0.85→0 共 3f、整机震屏 16px·e^(−t/1.7)、VS 圆章弹簧压出
+//   （damping 12，一次可见过冲）；同帧再发一圈墨色冲击环 + 12 根放射速度线（6f 收）。
+//   撞合后斜缝是一道 6px 纸白"切口"，两侧各压窄投影——像两张卡纸被压在一起。
+// - 对冲按速度给横向运动模糊（末速 ~360px/帧，封顶 36px）；撞后两侧数字 1.04→1 回弹落座（晚 2f，跟随）。
+//
+// 时间表（30fps，共 105f）：
+//   0–18    建立：设问逐词升起（1–14），斜缝墨线长出
+//   18–28   对冲 10f（ease-in cubic：越来越快 = 砸）
+//   28      撞击：闪 / 震 / 章 / 冲击环 / 速度线
+//   30–44   数字回弹落座；36–60 两侧说明与清单错峰升起（左先右后，4f 错位）
+//   54–70   底部结论条（镜刻标志 +「Direct the film. Let the agent shoot it.」）从下升起，压在斜缝上
+//   70–105  hold 35f：整机 1 → 1.015 极缓推进
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, Grain, SpeedBlur, mix, ramp, velocity } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, springAt, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const VERSUS_SLAM_DURATION = 105;
+
+const P = LOOKS.paper;
+const INK = P.ink;
+const RED = P.accent;
+const PAPER = '#f8f4ec';
+const PAD = 120;
+const RUSH = 18; // 对冲起
+const IMPACT = 28; // 撞击帧
+
+// 斜缝几何：78° 斜边 → 1080 高度上水平偏移 ≈ 230px，中线 x=960 ±115
+const SEAM_TOP_X = 1075;
+const SEAM_BOT_X = 845;
+const SEAM_DEG = (Math.atan2(SEAM_TOP_X - SEAM_BOT_X, 1080) * 180) / Math.PI; // ≈ +12°
+// 建立段墨线的留空带（线长 1400，从 y=−160 起；字在 y≈380–560 → 线内 39%–52%）
+const SEAM_GAP = 'linear-gradient(180deg, #000 0%, #000 35%, transparent 37.5%, transparent 53%, #000 55.5%, #000 100%)';
+
+// 两半屏对冲：ease-in cubic，10f 从 ±1240px 冲到位
+const leftXAt = (f: number) => -1240 * (1 - Math.pow(ramp(f, RUSH, IMPACT - RUSH, EASE.linear), 3));
+
+// 一侧海报
+const Side: React.FC<{ side: 'L' | 'R'; f: number }> = ({ side, f }) => {
+  const left = side === 'L';
+  const fg = PAPER;
+  const sub = left ? alpha(PAPER, 0.62) : alpha(INK, 0.82);
+  const x0 = left ? PAD : 1190;
+  // 撞后数字回弹落座（晚 2f 跟随）
+  const settle = springAt(f, IMPACT + 2, { damping: 14, stiffness: 220 });
+  const numScale = f < IMPACT ? 1 : mix(1.05, 1, settle);
+  const d = left ? 0 : 4;
+  const cap = ramp(f, IMPACT + 8 + d, 18, EASE.snappy);
+  const list = ramp(f, IMPACT + 14 + d, 18, EASE.snappy);
+  const items = left ? ['Storyboard', 'Keyframe', 'Render', 'Repeat'] : ['Shots picked', 'Beats synced'];
+  return (
+    <>
+      <div style={{ position: 'absolute', left: x0, top: 140, display: 'flex', alignItems: 'center', gap: 16, ...type(30, 800, { caps: true }), letterSpacing: '0.16em', color: left ? alpha(PAPER, 0.7) : INK }}>
+        <span style={{ width: 16, height: 16, background: left ? alpha(PAPER, 0.7) : INK, borderRadius: left ? 0 : 8 }} />
+        {left ? 'The old way' : `With ${BRAND.name}`}
+      </div>
+      <div style={{
+        position: 'absolute', left: x0 - 14, top: 196, display: 'flex', alignItems: 'baseline', gap: 22,
+        transform: `scale(${numScale.toFixed(4)})`, transformOrigin: 'left bottom',
+      }}>
+        <span style={{ fontFamily: FONT.sans, fontSize: 360, fontWeight: 900, letterSpacing: '-0.07em', lineHeight: 0.9, color: fg, fontVariantNumeric: 'tabular-nums' }}>
+          {left ? '14' : '1'}
+        </span>
+        <span style={{ ...type(96, 800), color: fg }}>{left ? 'days' : 'prompt'}</span>
+      </div>
+      <div style={{ position: 'absolute', left: x0, top: 590, width: left ? 640 : 620, ...type(44, 600), lineHeight: 1.18, color: fg, opacity: cap, transform: `translateY(${(1 - cap) * 26}px)` }}>
+        {left ? <>Storyboards, keyframes and three rounds of render notes.</> : <>Your agent shoots, cuts and scores it to the beat.</>}
+      </div>
+      <div style={{ position: 'absolute', left: x0, top: 800, display: 'flex', gap: 30, width: left ? 680 : 620, opacity: list, transform: `translateY(${(1 - list) * 20}px)` }}>
+        {items.map((it, i) => (
+          <span key={it} style={{ display: 'flex', alignItems: 'center', gap: 12, ...type(32, 600), color: sub }}>
+            <span style={{ fontFamily: FONT.mono, fontSize: 26, color: left ? alpha(PAPER, 0.4) : alpha(INK, 0.55) }}>{left ? `0${i + 1}` : '✓'}</span>
+            <span style={{ textDecoration: left ? 'line-through' : undefined, textDecorationThickness: 2 }}>{it}</span>
+          </span>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export const VersusSlam: React.FC = () => {
+  const frame = useCurrentFrame();
+  const leftX = leftXAt(frame);
+  const v = velocity(leftXAt, frame);
+  const impacted = frame >= IMPACT;
+
+  // 撞击帧起：整机震屏指数衰减（~5f 收干）
+  const since = frame - IMPACT;
+  const env = since >= 0 ? 16 * Math.exp(-since / 1.7) : 0;
+  const shakeX = env * Math.sin(since * 3.3);
+  const shakeY = env * 0.55 * Math.sin(since * 4.2 + 0.8);
+  const push = 1 + 0.015 * ramp(frame, IMPACT + 10, 105 - IMPACT - 10, EASE.smooth);
+
+  const flash = impacted ? 0.85 * (1 - ramp(frame, IMPACT, 3, EASE.linear)) : 0;
+  const stamp = springAt(frame, IMPACT, { damping: 12, stiffness: 260 });
+  const wave = ramp(frame, IMPACT, 16, EASE.out);
+  const lines = ramp(frame, IMPACT, 7, EASE.out);
+
+  // 建立段墨线：中点向两端长出，逼近时加粗
+  const preGrow = ramp(frame, 2, 14, EASE.snappy);
+  const preW = mix(2, 6, ramp(frame, RUSH, IMPACT - RUSH, EASE.exit));
+  const verdict = ramp(frame, IMPACT + 26, 18, EASE.snappy);
+
+  const half = (side: 'L' | 'R') => (
+    <SpeedBlur vx={side === 'L' ? v : -v} amount={0.1} max={36}>
+      <div style={{
+        position: 'absolute', inset: 0, transform: `translateX(${(side === 'L' ? leftX : -leftX).toFixed(2)}px)`,
+        clipPath: side === 'L'
+          ? `polygon(0px 0px, ${SEAM_TOP_X}px 0px, ${SEAM_BOT_X}px 1080px, 0px 1080px)`
+          : `polygon(${SEAM_TOP_X}px 0px, 1920px 0px, 1920px 1080px, ${SEAM_BOT_X}px 1080px)`,
+      }}>
+        <div style={{
+          position: 'absolute', inset: 0,
+          background: side === 'L'
+            ? `radial-gradient(ellipse 70% 80% at 18% 10%, #2a231c 0%, ${INK} 60%, #0e0b08 100%)`
+            : `radial-gradient(ellipse 70% 80% at 85% 10%, #f25a3f 0%, ${RED} 55%, #c9341f 100%)`,
+        }} />
+        <Side side={side} f={frame} />
+      </div>
+    </SpeedBlur>
+  );
+
+  return (
+    <AbsoluteFill style={{ background: P.bg[1], overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', inset: 0, transform: `translate(${shakeX.toFixed(2)}px, ${shakeY.toFixed(2)}px) scale(${push.toFixed(5)})` }}>
+        {/* 建立段：纸面 + 设问 + 斜缝墨线 */}
+        {!impacted && (
+          <>
+            <Stage look={P} keyLight={{ x: 0.5, y: 0.2 }} fill={null} vignette={0.14} grain={0} />
+            <div style={{ position: 'absolute', left: 0, right: 0, top: 386, textAlign: 'center' }}>
+              <div style={{ ...type(30, 800, { caps: true }), letterSpacing: '0.2em', color: RED, marginBottom: 30 }}>Product launch film</div>
+              <div style={{ ...type(124, 880), color: INK }}>
+                <TextReveal text="What does a promo take?" by="word" variant="rise" start={1} each={14} gap={3} />
+              </div>
+            </div>
+            <div style={{
+              position: 'absolute', left: 960 - preW / 2, top: 540 - 700, width: preW, height: 1400, background: INK,
+              transform: `rotate(${SEAM_DEG}deg) scaleY(${preGrow.toFixed(4)})`,
+              // 设问那一带留空：墨线只在字的上下长出，不划过字
+              WebkitMaskImage: SEAM_GAP, maskImage: SEAM_GAP,
+            }} />
+          </>
+        )}
+
+        {half('L')}
+        {half('R')}
+
+        {impacted && (
+          <>
+            {/* 撞合切口：纸白 6px + 两侧窄投影 */}
+            <div style={{
+              position: 'absolute', left: 960 - 22, top: 540 - 700, width: 44, height: 1400, transform: `rotate(${SEAM_DEG}deg)`,
+              background: `linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(10,6,4,0.35) 38%, ${PAPER} 43%, ${PAPER} 57%, rgba(10,6,4,0.35) 62%, rgba(0,0,0,0) 100%)`,
+            }} />
+            {/* 冲击环 + 放射速度线（单次） */}
+            {wave < 1 && (
+              <div style={{
+                position: 'absolute', left: 960 - mix(130, 640, wave), top: 540 - mix(130, 640, wave),
+                width: mix(260, 1280, wave), height: mix(260, 1280, wave), borderRadius: '50%',
+                border: `${mix(14, 1, wave).toFixed(2)}px solid ${alpha(PAPER, 0.85 * (1 - wave))}`,
+              }} />
+            )}
+            {lines < 1 && (
+              <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+                {Array.from({ length: 12 }, (_, i) => {
+                  const a = (i / 12) * Math.PI * 2 + 0.26;
+                  const r0 = mix(170, 420, lines);
+                  const r1 = mix(260, 720, lines);
+                  return (
+                    <line key={i} x1={960 + Math.cos(a) * r0} y1={540 + Math.sin(a) * r0} x2={960 + Math.cos(a) * r1} y2={540 + Math.sin(a) * r1}
+                      stroke={PAPER} strokeWidth={mix(8, 2, lines)} strokeLinecap="round" opacity={1 - lines} />
+                  );
+                })}
+              </svg>
+            )}
+            {/* VS 圆章 */}
+            <div style={{
+              position: 'absolute', left: 960 - 130, top: 540 - 130, width: 260, height: 260, borderRadius: '50%',
+              transform: `rotate(${(SEAM_DEG - 8 * (1 - stamp)).toFixed(3)}deg) scale(${mix(1.9, 1, stamp).toFixed(4)})`,
+              opacity: Math.min(1, stamp * 4),
+              background: PAPER, border: `8px solid ${INK}`, boxSizing: 'border-box',
+              boxShadow: `0 4px 0 ${alpha(INK, 0.9)}, 0 30px 60px -12px rgba(10,6,4,0.6)`,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}>
+              <div style={{ position: 'absolute', inset: 10, borderRadius: '50%', border: `2px solid ${alpha(INK, 0.35)}` }} />
+              <span style={{ fontFamily: FONT.sans, fontSize: 124, fontWeight: 900, fontStyle: 'italic', letterSpacing: '-0.06em', color: INK, marginLeft: -10, marginTop: -4 }}>
+                VS
+              </span>
+            </div>
+            {/* 结论条 */}
+            <div style={{
+              position: 'absolute', left: 960, top: 930, transform: `translate(-50%, ${((1 - verdict) * 40).toFixed(2)}px)`, opacity: verdict,
+              height: 84, padding: '0 44px', borderRadius: 42, background: PAPER, display: 'flex', alignItems: 'center', gap: 18, whiteSpace: 'nowrap',
+              boxShadow: '0 20px 44px -14px rgba(10,6,4,0.55)', ...type(38, 800), color: INK,
+            }}>
+              <ShotcraftMark size={44} tone="light" />
+              Direct the film. Let the agent shoot it.
+            </div>
+          </>
+        )}
+      </div>
+      {/* 撞击白闪（不随震屏） */}
+      <AbsoluteFill style={{ background: PAPER, opacity: flash, pointerEvents: 'none' }} />
+      <Grain opacity={0.06} step={2} blend="overlay" />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/transition/transition-travel/LetterformZoom.tsx

@@ -0,0 +1,285 @@
+// letterform-zoom〔转场〕：巨型章节标题的字形是一扇扇"窗"，窗里透出下一页；镜头指数推进钻进
+// 一个笔画，洞撑满全屏的瞬间新页面接管，残余笔画与盖板甩出画外。
+//
+// 第二轮重设计（余烬 · 熔炉之门）：
+// - look = ember。盖板是暖黑章节字卡（顶光 + 字后余烬光），560px Black 字重的「EDITS」挖空成洞；
+//   洞里透出的是一张熔金色的 video-shotcraft 发布页（橙 → 金渐变 + 一枚太阳光斑），所以字形本身就是画面里最亮的东西，
+//   "洞里有东西"第一帧就读得出。hold 期页面的文字/卡片层完全隐去，洞里只有暖色渐变与柔光形（读作图像，
+//   不和「EDITS」两层字互相抢）；主推中段 64–90f 内容由 18px 失焦淡入合焦，接管时已清晰。
+//   字缘一圈熔光外溢到盖板上（模糊描边、只画在盖板区域内）——光从洞里漏出来。
+// - 空间：盖板在前、页面在后。推进时盖板 ×30 而页面只 ×1.08，两层视差读作真实纵深；
+//   快速段给盖板叠两层更小倍率的半透明残影（径向"变焦拖影"），代替整屏实时模糊。
+// - 锚点 = 「I」竖笔中心（洞），竖笔 ≈106px 宽 ×30 ≈ 3200px > 画宽，推到底真正是洞撑满全屏。
+// - 着陆后的余波：页面上的渲染卡 0→12 镜头计数、四条镜头时长条错峰填满（先密后疏），
+//   "DONE"标签弹出——穿越之后新页面立刻是活的，不是一张死图。
+//
+// 时间表（30fps，共 150f）：
+//   0–26    建立：字卡在场（第 0 帧即有画面），眉题/副标升起，盖板极缓前推 1→1.03（蓄势）
+//   26–34   预备：后吸 2%（anticip）
+//   34–86   主推：scale = 30^u，u 走 bezier(0.6,0,0.85,0.5) 慢起陡收（52f）；u>0.35 起残影 + 模糊
+//   64–90   页面内容失焦淡入 → 合焦（18px→0，EASE.out）
+//   76–86   接管：scale 14→26 盖板淡出；页面曝光 +12% 一闪回落
+//   86–116  落定：页面继续前推到 1.08，速度与主推末端连续（quint-out）
+//   96–132  余波：计数 0→12、时长条错峰填满、DONE 标签弹出
+//   132–150 hold：海报定格
+import React, { useId } from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, Grain, bezier, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, alpha, springAt, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const LETTERFORM_ZOOM_DURATION = 150;
+
+const L = LOOKS.ember;
+const WORD = 'EDITS';
+const FS = 560; // 标题字号
+const BASELINE = 712;
+// 推进锚点 = 「I」竖笔中心（字形笔画 = 洞），按渲染帧实测（scale 1，「EDITS」）：竖笔 x 920–1026、y 316–712。
+// 换字体 / 换词 / 换字号后必须重新实测（锚在盖板上推到底撑满画面的是盖板，读不出"穿洞"）。
+const ORIGIN = { x: 973, y: 515 };
+const ZOOM_MAX = 30;
+const PUSH0 = 34;
+const PUSH1 = 86;
+const PAGE_ZOOM = 0.08; // 页面（后景）总推进量
+
+const GHOSTS = [
+  { lag: 3.2, a: 0.12 },
+  { lag: 2.4, a: 0.16 },
+  { lag: 1.6, a: 0.22 },
+  { lag: 0.8, a: 0.3 },
+];
+
+const pushCurve = bezier(0.6, 0, 0.85, 0.5); // 慢起陡收：前段让观众看清洞里的页面
+
+// 盖板 scale（帧的纯函数，残影要在不同帧上取样）
+const plateScale = (f: number) => {
+  const creep = 1 + 0.03 * ramp(f, 0, 26, EASE.smooth);
+  const inhale = 1 - 0.02 * ramp(f, 26, 8, EASE.smooth) * (1 - ramp(f, PUSH0, 8, EASE.out));
+  const u = ramp(f, PUSH0, PUSH1 - PUSH0, pushCurve);
+  return creep * inhale * Math.pow(ZOOM_MAX, u);
+};
+
+// 页面 scale：主推期按 0.7·u 跟进，接管后 quint-out 补完剩下 30%（交接处速度连续）
+const pageScale = (f: number) => {
+  const u = ramp(f, PUSH0, PUSH1 - PUSH0, pushCurve);
+  const P = f <= PUSH1 ? 0.7 * u : 0.7 + 0.3 * ramp(f, PUSH1, 30, EASE.out);
+  return 1 + PAGE_ZOOM * P;
+};
+
+const titleFont: React.CSSProperties = { fontFamily: FONT.sans, fontWeight: 900, fontSize: FS, letterSpacing: '-0.02em' };
+
+// ───────────── 后景：熔金发布页（video-shotcraft · 渲染完成） ─────────────
+// 四个镜头 = 本仓库四张转场 demo 的真实帧数；条长 = 帧数 / 160
+const SHOTS = [
+  { code: 'sh01', name: 'Invisible cut', f: 110 },
+  { code: 'sh02', name: 'Letterform zoom', f: 150 },
+  { code: 'sh03', name: 'Light leak burn', f: 130 },
+  { code: 'sh04', name: 'Versus slam', f: 105 },
+];
+const INK = '#1c0a02'; // 熔金底上的墨色（带暖色相的近黑）
+
+// 页面内容"失焦 → 合焦"：字卡 hold 期内容层完全隐去，字洞里只透出暖色渐变与光斑（读作图像/质感，
+// 不与「EDITS」抢字）；主推中段 64–90f 内容由 18px 失焦淡入并合焦，接管时已清晰可读。
+const REVEAL0 = 64;
+const REVEAL_DUR = 26;
+
+const NextPage: React.FC<{ frame: number }> = ({ frame }) => {
+  const reveal = ramp(frame, REVEAL0, REVEAL_DUR, EASE.out);
+  const defocus = 18 * (1 - reveal);
+  const count = Math.round(12 * ramp(frame, 96, 30, EASE.snappy));
+  const live = springAt(frame, 124, { damping: 15, stiffness: 240 });
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden' }}>
+      {/* 熔金渐变：左上金 → 中橙 → 右下深赤，右侧一枚太阳光斑垫在部署卡背后 */}
+      <AbsoluteFill style={{ background: 'linear-gradient(128deg, #ffcf5a 0%, #ff9a3c 34%, #ff6b2c 62%, #c2370e 100%)' }} />
+      <AbsoluteFill style={{ background: 'radial-gradient(circle 520px at 1450px 540px, rgba(255,236,170,0.75) 0%, rgba(255,200,110,0.25) 45%, rgba(255,160,80,0) 72%)' }} />
+      <AbsoluteFill style={{ background: 'radial-gradient(ellipse 70% 60% at 20% 100%, rgba(120,20,0,0.35) 0%, rgba(120,20,0,0) 70%)' }} />
+      {/* 失焦期的光形：部署卡位置一团奶白柔光、标题区一抹暗赤——字洞里只看得到"有光有形"，看不到字 */}
+      <AbsoluteFill style={{
+        opacity: 1 - reveal,
+        background: 'radial-gradient(ellipse 380px 340px at 1390px 580px, rgba(255,246,228,0.55) 0%, rgba(255,240,220,0) 100%), ' +
+          'radial-gradient(ellipse 520px 260px at 560px 500px, rgba(110,25,0,0.22) 0%, rgba(110,25,0,0) 100%)',
+      }} />
+
+      {/* 内容层：hold 期隐去，主推中段失焦淡入 → 合焦 */}
+      {reveal > 0 && (
+      <AbsoluteFill style={{ opacity: reveal, filter: defocus > 0.05 ? `blur(${defocus.toFixed(2)}px)` : undefined }}>
+      {/* 导航 */}
+      <div style={{ position: 'absolute', left: 200, right: 230, top: 122, display: 'flex', alignItems: 'center', color: INK }}>
+        {/* App 图标：墨色圆角底 + 反白镜刻标志 */}
+        <div style={{ width: 46, height: 46, borderRadius: 13, background: INK, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <ShotcraftMark size={34} tone="dark" />
+        </div>
+        <div style={{ fontFamily: BRAND.font, fontSize: 34, fontWeight: 700, letterSpacing: '0.03em', marginLeft: 16 }}>{BRAND.name}</div>
+        <div style={{ flex: 1 }} />
+        {['Shots', 'Workbench', 'Gallery'].map((s) => (
+          <div key={s} style={{ ...type(28, 550), marginLeft: 48, opacity: 0.72 }}>{s}</div>
+        ))}
+        <div style={{ ...type(28, 650), marginLeft: 48, padding: '14px 28px', borderRadius: 999, background: INK, color: '#ffe7c4' }}>Render</div>
+      </div>
+
+      {/* 主标题区 */}
+      <div style={{ position: 'absolute', left: 200, top: 312, width: 860, color: INK }}>
+        <div style={{ ...type(26, 750, { caps: true }), letterSpacing: '0.2em', opacity: 0.62 }}>Launch film · Final cut</div>
+        <div style={{ ...type(140, 820), letterSpacing: '-0.05em', lineHeight: 0.92, marginTop: 30 }}>
+          Every shot.<br />One prompt.
+        </div>
+        <div style={{ ...type(40, 480), lineHeight: 1.3, marginTop: 40, opacity: 0.78, width: 720 }}>
+          Storyboard, animate, sound-design and deliver — cut to the beat.
+        </div>
+      </div>
+
+      {/* 渲染卡：奶白磨砂玻璃（亮面，透过字洞时整张卡也是亮的）+ 顶部内高光 + 两层暖影 */}
+      <div style={{
+        position: 'absolute', left: 1070, top: 282, width: 640, height: 600, borderRadius: 32,
+        background: 'linear-gradient(180deg, rgba(255,250,242,0.94) 0%, rgba(255,240,224,0.88) 100%)',
+        border: `1px solid ${alpha('#ffffff', 0.7)}`,
+        boxShadow: `inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 14px rgba(110,30,0,0.18), 0 50px 100px -24px rgba(120,30,0,0.45)`,
+        padding: '40px 48px', boxSizing: 'border-box', color: INK,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div style={{ ...type(26, 500, { mono: true }), color: alpha(INK, 0.55) }}>launch-film.mp4</div>
+          <div style={{ flex: 1 }} />
+          <div style={{
+            ...type(22, 750, { caps: true }), letterSpacing: '0.16em', padding: '8px 16px', borderRadius: 999,
+            background: INK, color: '#ffd46a', display: 'flex', alignItems: 'center', gap: 10,
+            transform: `scale(${mix(0.6, 1, live).toFixed(4)})`, opacity: Math.min(1, live * 1.5),
+          }}>
+            <div style={{ width: 10, height: 10, borderRadius: 5, background: '#ffb02e', boxShadow: '0 0 10px #ffb02e' }} />
+            Done
+          </div>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'baseline', marginTop: 34 }}>
+          <div style={{ ...type(132, 820), letterSpacing: '-0.05em', width: 168, textAlign: 'right' }}>{count}</div>
+          <div style={{ ...type(60, 650), color: alpha(INK, 0.32), marginLeft: 14 }}>/12</div>
+          <div style={{ ...type(32, 520), color: alpha(INK, 0.6), marginLeft: 22 }}>shots rendered</div>
+        </div>
+        <div style={{ marginTop: 34 }}>
+          {SHOTS.map((r, i) => {
+            const fill = ramp(frame, 100 + [0, 4, 10, 18][i], 22, EASE.snappy);
+            const on = fill > 0.02;
+            return (
+              <div key={r.code} style={{ marginTop: i ? 22 : 0 }}>
+                <div style={{ display: 'flex', alignItems: 'baseline' }}>
+                  <div style={{ ...type(30, 650) }}>{r.name}</div>
+                  <div style={{ ...type(22, 500, { mono: true }), color: alpha(INK, 0.4), marginLeft: 14 }}>{r.code}</div>
+                  <div style={{ flex: 1 }} />
+                  <div style={{ ...type(30, 600, { mono: true }), color: alpha(INK, on ? 0.9 : 0.3) }}>{on ? `${r.f}f` : '—'}</div>
+                </div>
+                <div style={{ marginTop: 10, height: 6, borderRadius: 3, background: alpha(INK, 0.08), overflow: 'hidden' }}>
+                  <div style={{ width: `${(fill * (r.f / 1.6)).toFixed(2)}%`, height: '100%', borderRadius: 3, background: `linear-gradient(90deg, ${L.accent}, #ffb02e)` }} />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      </AbsoluteFill>
+      )}
+      <Grain opacity={0.05} />
+    </AbsoluteFill>
+  );
+};
+
+// ───────────── 前景：挖了字形洞的暖黑盖板 ─────────────
+const Plate: React.FC<{ scale: number; id: string; ghost?: boolean; blur?: number; intro?: number }> = ({ scale, id, ghost, blur = 0, intro = 1 }) => {
+  const k = 1 / scale; // 线宽 / 模糊半径按 scale 补偿，推进中视觉恒定
+  return (
+    <div style={{
+      position: 'absolute', inset: 0, transform: `scale(${scale.toFixed(5)})`, transformOrigin: `${ORIGIN.x}px ${ORIGIN.y}px`,
+      filter: blur > 0.05 ? `blur(${(blur * k).toFixed(3)}px)` : undefined,
+    }}>
+      <svg width={1920} height={1080} viewBox="0 0 1920 1080" style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
+        <defs>
+          <radialGradient id={`${id}g`} cx="50%" cy="30%" r="80%">
+            <stop offset="0%" stopColor="#2a1810" />
+            <stop offset="45%" stopColor="#150b07" />
+            <stop offset="100%" stopColor="#080403" />
+          </radialGradient>
+          <mask id={`${id}m`} maskUnits="userSpaceOnUse" x={-200} y={-200} width={2320} height={1480}>
+            <rect x={-200} y={-200} width={2320} height={1480} fill="#fff" />
+            <text x={960} y={BASELINE} textAnchor="middle" fill="#000" style={titleFont}>{WORD}</text>
+          </mask>
+          {!ghost && (
+            <filter id={`${id}f`} x="-20%" y="-50%" width="140%" height="200%">
+              <feGaussianBlur stdDeviation={(16 * k).toFixed(3)} />
+            </filter>
+          )}
+        </defs>
+        <g mask={`url(#${id}m)`}>
+          <rect x={-200} y={-200} width={2320} height={1480} fill={`url(#${id}g)`} />
+          {!ghost && (
+            <>
+              {/* 熔光外溢：模糊的橙色描边只画在盖板上——光从字洞里漏到盖板边缘 */}
+              <text x={960} y={BASELINE} textAnchor="middle" fill="none" stroke={L.accent} strokeWidth={22 * k}
+                opacity={0.55} filter={`url(#${id}f)`} style={titleFont}>{WORD}</text>
+              {/* 切口受光边：1.5px 暖白，读作盖板有厚度 */}
+              <text x={960} y={BASELINE} textAnchor="middle" fill="none" stroke="#ffd9b0" strokeWidth={3 * k}
+                opacity={0.5} style={titleFont}>{WORD}</text>
+            </>
+          )}
+        </g>
+      </svg>
+      {!ghost && (
+        <>
+          <div style={{
+            position: 'absolute', left: 0, right: 0, top: 196, textAlign: 'center', color: L.accent,
+            ...type(30, 750, { caps: true }), letterSpacing: `${mix(0.8, 0.42, intro).toFixed(3)}em`, opacity: intro,
+          }}>Chapter 02</div>
+          <div style={{
+            position: 'absolute', left: 0, right: 0, top: 790, textAlign: 'center', color: L.ink2, ...type(44, 480),
+            opacity: intro, transform: `translateY(${((1 - intro) * 24).toFixed(2)}px)`,
+          }}>
+            Your product, in motion.
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export const LetterformZoom: React.FC = () => {
+  const frame = useCurrentFrame();
+  const id = `lfz${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+
+  const s = plateScale(frame);
+  const u = ramp(frame, PUSH0, PUSH1 - PUSH0, pushCurve);
+  const plateOpacity = 1 - ramp(s, 14, 12, EASE.linear);
+  const blur = 20 * ramp(u, 0.35, 0.65, EASE.swift); // 期望视觉模糊（px），组件内按 scale 补偿
+  const ghostK = ramp(u, 0.5, 0.2, EASE.out) * plateOpacity;
+
+  // 眉题字距收拢 / 副标升起（第 0 帧字卡已在，文字 2–18f 入场）
+  const intro = ramp(frame, 2, 16, EASE.snappy);
+  // 接管瞬间页面曝光一闪：+12% 后回落
+  const expo = 1 + 0.12 * ramp(frame, 76, 8, EASE.out) * (1 - ramp(frame, 86, 14, EASE.smooth));
+  const ps = pageScale(frame);
+  // 后景视差横移：页面比盖板慢半拍地向左漂 28px，洞里的内容在"动"，读作纵深而不是贴图
+  const drift = 28 * (1 - ramp(frame, 0, 100, EASE.smooth));
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[2], overflow: 'hidden' }}>
+      <div style={{
+        position: 'absolute', inset: 0, transform: `translateX(${drift.toFixed(2)}px) scale(${ps.toFixed(5)})`, transformOrigin: `${ORIGIN.x}px ${ORIGIN.y}px`,
+        filter: expo > 1.002 ? `brightness(${expo.toFixed(3)})` : undefined,
+      }}>
+        <NextPage frame={frame} />
+      </div>
+
+      {plateOpacity > 0 && (
+        <div style={{ position: 'absolute', inset: 0, opacity: plateOpacity }}>
+          {/* 变焦拖影：四层更早 0.8–3.2 帧的盖板（更小倍率），透明度递减叠成径向拖尾 */}
+          {ghostK > 0.01 && GHOSTS.map((g, i) => (
+            <div key={i} style={{ position: 'absolute', inset: 0, opacity: g.a * ghostK }}>
+              <Plate scale={plateScale(frame - g.lag)} id={`${id}g${i}`} ghost blur={blur} />
+            </div>
+          ))}
+          <div style={{ position: 'absolute', inset: 0 }}>
+            <Plate scale={s} id={id} blur={blur} intro={intro} />
+          </div>
+        </div>
+      )}
+      {/* 字卡阶段的舞台颗粒（页面接管后由页面自带颗粒） */}
+      {plateOpacity > 0 && <Grain opacity={0.08 * plateOpacity} blend="soft-light" />}
+    </AbsoluteFill>
+  );
+};