dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/typography/gradient-word-sweep/GradientWordSweep.tsx

@@ -0,0 +1,312 @@
+// gradient-word-sweep v3 —— 批次 12 按用户意见微调（v2 结构保留）：
+// 1) 闪电偏紫红色 + 线宽调细（约减半）；
+// 2) 整体泛光强度略降（各辉光层 opacity 下调）；
+// 3) 波前尾迹梯度：刚被点亮的字符辉光最强，随扫过距离衰减到稳态
+//    （trailing-window 增亮层，填充结束后淡出到稳态呼吸）。
+// 质感层（改版 v4）：
+// a) 修"方框光"：辉光层的 mask/clip 原先裁在文字盒上，模糊溢出盒外被一刀切成矩形——
+//    改为所有带模糊的层都放进四周外扩 PAD 的 Halo 盒里，mask 色标用 calc 换算回文字坐标；
+// b) 闪电从 36 次随机事件收成 7 次排期（间隔 ≥9f、同屏 ≤1 道），末次 ~92f 熄灭，尾段留呼吸；
+// c) 入场改两行错峰 blur-slide；整段极缓推近 1→1.025；黑底换带色相的近黑 + 暗角 + 颗粒。
+// 文案：充能词 Supercharged 保留（闪电与辉光按它的字宽排布），标语改成 video-shotcraft 的宣传句。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { EASE, Grain, Vignette, ramp } from '../../_fixtures/Polish';
+import { BRAND } from '../../_fixtures/Brand';
+
+const mulberry32 = (a: number) => () => {
+  let t = (a += 0x6d2b79f5);
+  t = Math.imul(t ^ (t >>> 15), t | 1);
+  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
+const FONT = '"Avenir Next", Futura, "Helvetica Neue", sans-serif';
+// 截图 5：S 偏蓝青 → 中段紫 → 粉 → 尾部琥珀
+const GRAD = 'linear-gradient(92deg, #59c2ff 0%, #9d6bff 32%, #ff6ed4 62%, #ffc46b 100%)';
+
+export const GRADIENT_WORD_SWEEP_DURATION = 105;
+
+const FILL_START = 12;
+const FILL_END = 30; // 18 帧 ≈ 0.6s，快扫
+const LIGHT_START = FILL_END + 3;
+
+// ---------- 种子化噪声与闪电 ----------
+const rand = mulberry32(20260718);
+const FLICKER: number[] = Array.from({ length: 160 }, () => rand());
+
+type Bolt = { d: string; long: boolean };
+const makeLongBolt = (r: () => number): Bolt => {
+  // 词上方勾连长弧：横跨若干字符，锯齿折线
+  const x0 = 30 + r() * 220;
+  const x1 = x0 + 160 + r() * 320;
+  const yBase = 38 + r() * 42;
+  const n = 7 + Math.floor(r() * 4);
+  let d = `M ${x0.toFixed(1)} ${(yBase + 26 + r() * 20).toFixed(1)}`;
+  for (let i = 1; i <= n; i++) {
+    const x = x0 + ((x1 - x0) * i) / n + (r() - 0.5) * 22;
+    const arch = Math.sin((i / n) * Math.PI) * -22; // 中段拱起
+    const y = yBase + arch + (r() - 0.5) * 30 + (i === n ? 30 + r() * 18 : 0);
+    d += ` L ${x.toFixed(1)} ${y.toFixed(1)}`;
+  }
+  return { d, long: true };
+};
+const makeShortBolt = (r: () => number): Bolt => {
+  // 字符之间的短勾连：竖向小锯齿
+  const x = 60 + r() * 540;
+  const y0 = 72 + r() * 24;
+  const y1 = y0 + 55 + r() * 45;
+  const n = 4 + Math.floor(r() * 3);
+  let d = `M ${x.toFixed(1)} ${y0.toFixed(1)}`;
+  for (let i = 1; i <= n; i++) {
+    const y = y0 + ((y1 - y0) * i) / n;
+    const xx = x + (r() - 0.5) * 30;
+    d += ` L ${xx.toFixed(1)} ${y.toFixed(1)}`;
+  }
+  return { d, long: false };
+};
+
+const BOLTS: Bolt[] = Array.from({ length: 16 }, (_, i) =>
+  i % 3 === 0 ? makeShortBolt(rand) : makeLongBolt(rand),
+);
+// 闪烁事件：排期而非随机——稀疏零星（同屏 ≤1 道、间隔 ≥9f），末次约 92f 熄灭，留出落定呼吸
+type Flash = { at: number; life: number; bolt: number };
+const FLASH_AT = [2, 12, 22, 33, 43, 52, 56];
+const FLASHES: Flash[] = FLASH_AT.map((d, k) => ({
+  at: LIGHT_START + d,
+  life: k === FLASH_AT.length - 1 ? 3 : 3 + Math.floor(rand() * 2),
+  bolt: (k * 5 + 1) % BOLTS.length,
+}));
+
+// 外扩盒：带模糊的辉光层放进四周外扩 PAD 的盒子，mask 不再把溢出的光切成矩形
+const PAD = 90;
+// 文字坐标里的百分比 x → 外扩盒里的 mask 色标
+const at = (x: number) => `calc(${PAD}px + (100% - ${PAD * 2}px) * ${(Math.max(-20, Math.min(120, x)) / 100).toFixed(4)})`;
+const Halo: React.FC<{ mask?: string; style?: React.CSSProperties; children: React.ReactNode }> = ({ mask, style, children }) => (
+  <span
+    aria-hidden
+    style={{
+      position: 'absolute',
+      left: -PAD,
+      top: -PAD,
+      right: -PAD,
+      bottom: -PAD,
+      padding: PAD,
+      ...(mask ? { WebkitMaskImage: mask, maskImage: mask } : {}),
+      ...style,
+    }}
+  >
+    <span style={{ position: 'relative', display: 'block', width: '100%', height: '100%' }}>{children}</span>
+  </span>
+);
+
+export const GradientWordSweep: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 入场：两行错峰 blur-slide（第二行晚 4f），同一条 snappy 进度驱动 y/blur/opacity
+  const enter1 = ramp(frame, 0, 14, EASE.snappy);
+  const enter2 = ramp(frame, 4, 14, EASE.snappy);
+  const lineIn = (e: number): React.CSSProperties => ({
+    opacity: e,
+    transform: `translateY(${(1 - e) * 36}px)`,
+    filter: e < 0.999 ? `blur(${((1 - e) * 10).toFixed(2)}px)` : undefined,
+  });
+  // 整段极缓推近（smooth，起止速度为 0）
+  const push = 1 + 0.025 * ramp(frame, 0, 104, EASE.smooth);
+
+  // 快速填充进度
+  const p = interpolate(frame, [FILL_START, FILL_END], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+  const pPct = p * 100;
+  const filling = frame >= FILL_START && frame <= FILL_END + 4;
+  const headFade = interpolate(frame, [FILL_END, FILL_END + 6], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 波前尾迹：刚点亮字符最亮，向后衰减；填充结束后整体淡出到稳态
+  const trailFade = interpolate(frame, [FILL_END, FILL_END + 10], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const TRAIL = 34; // 尾迹长度（% 宽度）
+  const trailMask =
+    `linear-gradient(90deg, transparent 0%, transparent ${at(pPct - TRAIL)}, ` +
+    `rgba(0,0,0,0.9) ${at(pPct - 3)}, rgba(0,0,0,0.9) ${at(pPct + 1)}, ` +
+    `transparent ${at(pPct + 6)})`;
+  // 填充头亮核：只露波前 ~10% 词宽，两侧软边（原 clipPath 硬裁 → 方框）
+  const headMask =
+    `linear-gradient(90deg, transparent 0%, transparent ${at(pPct - 12)}, #000 ${at(pPct - 6)}, ` +
+    `#000 ${at(pPct - 1)}, transparent ${at(pPct + 2)})`;
+
+  const noise = FLICKER[Math.min(frame, FLICKER.length - 1)];
+  // 当前帧活跃闪电
+  const active = FLASHES.filter((f) => frame >= f.at && frame < f.at + f.life);
+  const boltBoost = active.length > 0 ? 0.35 : 0;
+  // 辉光呼吸：填满后带噪声微闪 + 闪电时增亮
+  const glowLvl =
+    interpolate(frame, [FILL_START, FILL_END], [0, 1], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+    }) *
+    (0.82 + 0.18 * noise) +
+    boltBoost;
+
+  // 软边遮罩：辉光层的填充边缘不生硬
+  const softMask = (soft: number): string | undefined =>
+    p >= 1
+      ? undefined
+      : `linear-gradient(90deg, #000 0%, #000 ${at(pPct - soft)}, transparent ${at(pPct + soft * 0.6)})`;
+
+  const lineStyle: React.CSSProperties = {
+    fontFamily: FONT,
+    fontWeight: 700,
+    fontStyle: 'italic',
+    fontSize: 92,
+    letterSpacing: -1,
+    lineHeight: 1.28,
+    color: '#ffffff',
+    whiteSpace: 'nowrap',
+  };
+
+  const gradText: React.CSSProperties = {
+    position: 'absolute',
+    inset: 0,
+    backgroundImage: GRAD,
+    WebkitBackgroundClip: 'text',
+    backgroundClip: 'text',
+    color: 'transparent',
+  };
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: 'radial-gradient(ellipse 70% 70% at 50% 48%, #0d0b14 0%, #07060a 60%, #040405 100%)',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${push})` }}>
+        {/* 词后方环境泛光（大半径，随充能增强） */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 500,
+            top: 340,
+            width: 820,
+            height: 320,
+            borderRadius: '50%',
+            background:
+              'radial-gradient(closest-side, rgba(180,110,255,0.6), rgba(255,110,212,0.25) 55%, transparent 78%)',
+            filter: 'blur(38px)',
+            opacity: 0.55 * glowLvl,
+          }}
+        />
+      </div>
+      <div style={{ textAlign: 'center', transform: `scale(${push})` }}>
+        <div style={{ ...lineStyle, ...lineIn(enter1) }}>
+          <span style={{ position: 'relative', display: 'inline-block' }}>
+            <span>Supercharged</span>
+            {/* AE 式辉光：大半径柔光层（最糊） */}
+            <Halo mask={softMask(14)} style={{ opacity: 0.55 * glowLvl }}>
+              <span style={{ ...gradText, filter: 'blur(46px) saturate(1.6)', transform: 'scale(1.05)' }}>Supercharged</span>
+            </Halo>
+            {/* 中晕层 */}
+            <Halo mask={softMask(10)} style={{ opacity: 0.62 * glowLvl }}>
+              <span style={{ ...gradText, filter: 'blur(18px) saturate(1.4) brightness(1.15)' }}>Supercharged</span>
+            </Halo>
+            {/* 近核柔光 */}
+            <Halo mask={softMask(7)} style={{ opacity: 0.72 * Math.min(1, glowLvl + 0.1) }}>
+              <span style={{ ...gradText, filter: 'blur(6px) brightness(1.25)' }}>Supercharged</span>
+            </Halo>
+            {/* 清晰渐变本体（无模糊，clipPath 硬裁即渐变前沿） */}
+            <span
+              aria-hidden
+              style={{
+                ...gradText,
+                clipPath: `inset(-25% ${100 - pPct}% -25% 0)`,
+              }}
+            >
+              Supercharged
+            </span>
+            {/* 波前尾迹增亮：刚点亮字符辉光最强，向后衰减到稳态 */}
+            {trailFade > 0.01 && (
+              <Halo mask={trailMask} style={{ opacity: 0.95 * trailFade }}>
+                <span style={{ ...gradText, filter: 'blur(9px) saturate(1.7) brightness(1.7)' }}>Supercharged</span>
+              </Halo>
+            )}
+            {/* 填充头字符过曝亮核（字符形状，非独立光点；仅填充期间；软边 mask 不再出方框） */}
+            {filling && p < 1 && (
+              <Halo mask={headMask} style={{ opacity: 0.9 * headFade }}>
+                <span
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    color: '#fff',
+                    filter: 'blur(3px)',
+                    textShadow: '0 0 22px rgba(255,255,255,0.9), 0 0 55px rgba(216,150,255,0.8)',
+                  }}
+                >
+                  Supercharged
+                </span>
+              </Halo>
+            )}
+            {/* 勾连闪电：填充完成后，按排期在字符之间/词上方闪现 */}
+            <svg
+              aria-hidden
+              viewBox="0 0 700 240"
+              style={{
+                position: 'absolute',
+                left: -25,
+                top: -62,
+                width: 700,
+                height: 240,
+                overflow: 'visible',
+                pointerEvents: 'none',
+              }}
+            >
+              {active.map((f, i) => {
+                const b = BOLTS[f.bolt];
+                const decay = 1 - (frame - f.at) / f.life;
+                return (
+                  <g key={`${f.at}-${i}`} opacity={Math.min(1, 1.1 * decay)}>
+                    <path
+                      d={b.d}
+                      fill="none"
+                      stroke="rgba(216,60,190,0.65)"
+                      strokeWidth={b.long ? 6 : 4.5}
+                      strokeLinejoin="miter"
+                      style={{ filter: 'blur(6px)' }}
+                    />
+                    <path
+                      d={b.d}
+                      fill="none"
+                      stroke="rgba(235,110,215,0.9)"
+                      strokeWidth={b.long ? 2.4 : 1.9}
+                      strokeLinejoin="miter"
+                      style={{ filter: 'blur(1.5px)' }}
+                    />
+                    <path
+                      d={b.d}
+                      fill="none"
+                      stroke="#ffd8f2"
+                      strokeWidth={b.long ? 1.4 : 1.1}
+                      strokeLinejoin="miter"
+                    />
+                  </g>
+                );
+              })}
+            </svg>
+          </span>{' '}
+          <span>product films</span>
+        </div>
+        <div style={{ ...lineStyle, ...lineIn(enter2) }}>made with {BRAND.name}</div>
+      </div>
+      <Vignette strength={0.5} inner={0.45} color="#000000" />
+      <Grain opacity={0.07} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/lead-word-zoom-assemble/LeadWordZoomAssemble.tsx

@@ -0,0 +1,261 @@
+// lead-word-zoom-assemble — 首词推近落位组句
+// 首词以 2.3 倍字号占据画面中央，hold 期间继续向观众推近 6%，随后一条曲线同时
+// 完成「缩回终字号」与「整行左滑到最终排布」，后续词从右侧各自槽位外 0.5em 推入；
+// 整行上移的同一时窗里副行浮出，停一拍后整幕 crash-zoom 推近失焦交棒下一镜。
+//
+// 手感命门是支点：transform-origin 横向钉在**首词中心**、纵向钉在**基线**——
+// 这两点是全程唯一不该移动的锚，挂载时实测一次（基线用零尺寸 inline-block 的
+// offsetTop 读出），否则缩放过程中字会逐帧抖基线。
+// 参数以 1920×1080 标定。
+// 质感层（改版）：四色 mesh 收成"靛蓝主光 + 一抹暖色余光"的低对比底 + 颗粒 + 暗角；
+// 首词入场带 8px→0 失焦（与淡入同 6f）；缩回段按 scale 速度给瞬时失焦（≤3.5px，停稳归零），
+// 大幅缩放不再"硬缩"；整行上移提前到 f32–46，品牌行静止 26f 再 crash；强调色统一为批次靛蓝。
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+import { Grain, Vignette } from '../../_fixtures/Polish';
+import {
+  AbsoluteFill,
+  continueRender,
+  delayRender,
+  Easing,
+  getRemotionEnvironment,
+  interpolate,
+  useCurrentFrame,
+  useVideoConfig,
+} from 'remotion';
+
+export const LEAD_WORD_ZOOM_ASSEMBLE_DURATION = 84; // 2.8s @30fps
+
+// ---- 编舞常量 ----
+const TEXT = 'Introducing video-shotcraft';
+const HIGHLIGHT_WORD = 'video-shotcraft'; // 精确匹配的词换强调色：品牌词落位那一下自带高亮
+const FONT_SIZE = 96;
+const INITIAL_SCALE = 2.3; // 首词起手放大倍数
+const INTRO_DURATION = 6; // f：首词淡入
+const HOLD_DURATION = 12; // f：首词在峰值停留（推近发生在这一段）
+const PUSH_SCALE = 1.06; // hold 期间继续推近的倍数
+const RECEDE_DURATION = 12; // f：缩回终字号
+const ASSEMBLE_DURATION = 24; // f：整行左滑到位
+const WORD_DELAY = 6; // f：缩回起点后第二个词开始推入
+const WORD_STAGGER = 4; // f：后续词之间的错峰
+const WORD_DURATION = 12; // f：单词推入行程
+const WORD_PUSH = 0.5; // em：后续词起始位置在自己槽位右侧多远
+const WORD_FADE = 2; // f：后续词淡入（刻意极短——是被推进来的，不是淡进来的）
+const LETTER_SPACING = '-0.03em';
+
+// ---- 场景层 ----
+const LIFT: [number, number] = [32, 46]; // f：整行上移 + 副行同帧出现（与左滑尾巴重叠 4f，读作一口气）
+const LIFT_DISTANCE = -56; // px
+const SUBLINE = 'One shot card, one motion recipe — copy, paste, render.';
+const CRASH_FRAMES = 12; // f：段尾 crash-zoom 占用的收尾帧数
+const CRASH_SCALE = 0.2;
+const CRASH_BLUR = 9;
+
+const INK = '#1d1d1f';
+const INK_DIM = '#6e6f76';
+const ACCENT = '#5b63d3';
+// 系统 Display 字栈在前（-apple-system 在无头 Chrome 里常解析不到，会落到 PingFang），中文回退 PingFang
+const SANS = '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", Inter, Arial, sans-serif';
+const MESH_BG =
+  'radial-gradient(56% 50% at 26% 24%, rgba(91,99,211,0.16) 0%, rgba(91,99,211,0) 72%),' +
+  'radial-gradient(50% 46% at 80% 82%, rgba(255,180,120,0.10) 0%, rgba(255,180,120,0) 72%),' +
+  'radial-gradient(70% 60% at 50% 46%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 70%),' +
+  'linear-gradient(180deg, #f6f6f8 0%, #efeff2 100%)';
+
+/** 首词向观众漂移：先快后停，峰值处挂住 */
+const PUSH_EASE = Easing.bezier(0.25, 1, 0.5, 1);
+/** 缩回与左滑共用同一条曲线——两个动作必须读作一次运动，不能各走各的 */
+const ZOOM_EASE = Easing.bezier(0.5, 0, 0.05, 1);
+/** 后续词推入槽位：起步快，落地长而软 */
+const WORD_EASE = Easing.bezier(0.22, 0.8, 0.36, 1);
+
+// 整行 scale：hold 推近 + 缩回两段相加（两段之间没有速度断点）
+const lineScale = (f: number) =>
+  interpolate(f, [0, HOLD_DURATION], [INITIAL_SCALE, INITIAL_SCALE * PUSH_SCALE], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: PUSH_EASE,
+  }) +
+  interpolate(f, [HOLD_DURATION, HOLD_DURATION + RECEDE_DURATION], [0, 1 - INITIAL_SCALE * PUSH_SCALE], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: ZOOM_EASE,
+  });
+
+const TextReveal: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { width } = useVideoConfig();
+
+  // 整行宽度、首词中心占比、基线位置：只在挂载时量一次，量到之前挂起渲染
+  const lineRef = useRef<HTMLSpanElement>(null);
+  const leadRef = useRef<HTMLSpanElement>(null);
+  const baselineRef = useRef<HTMLSpanElement>(null);
+  const [handle] = useState(() => delayRender('lead-word-zoom-assemble: measure line'));
+  const [metrics, setMetrics] = useState<{
+    lineWidth: number;
+    leadRatio: number;
+    baseline: number;
+  } | null>(null);
+
+  useEffect(() => {
+    const line = lineRef.current;
+    const lead = leadRef.current;
+    if (!line || !lead) {
+      continueRender(handle);
+      return;
+    }
+    setMetrics({
+      lineWidth: line.offsetWidth,
+      leadRatio: (lead.offsetLeft + lead.offsetWidth / 2) / line.offsetWidth,
+      baseline: baselineRef.current?.offsetTop ?? line.offsetHeight * 0.8,
+    });
+  }, [handle]);
+
+  useEffect(() => {
+    if (metrics) continueRender(handle);
+  }, [metrics, handle]);
+
+  const words = TEXT.split(' ').filter(Boolean);
+  const ready = metrics !== null;
+  const leadRatio = metrics?.leadRatio ?? 0.14;
+  const lineWidth = metrics?.lineWidth ?? width * 0.5;
+  const baseline = metrics?.baseline ?? FONT_SIZE * 0.88;
+
+  const zoomStart = HOLD_DURATION;
+  // 首词从"画面正中"走到"行内自己的位置"，位移就是这段偏心距
+  const slideDistance = lineWidth * (0.5 - leadRatio);
+  // 首词入场失焦：与 6f 淡入同步 8px→0（scale 前单位，随 2.3× 放大）
+  const introBlur = interpolate(frame, [0, INTRO_DURATION], [8 / INITIAL_SCALE, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+
+  return (
+    <AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center' }}>
+      <span
+        ref={lineRef}
+        style={{
+          position: 'relative',
+          display: 'inline-block',
+          fontSize: FONT_SIZE,
+          fontWeight: 600,
+          color: INK,
+          letterSpacing: LETTER_SPACING,
+          lineHeight: 1.1,
+          whiteSpace: 'nowrap',
+          fontFamily: SANS,
+          transformOrigin: `${leadRatio * 100}% ${baseline}px`,
+          scale: lineScale(frame),
+          // 缩回段的瞬时失焦：按 scale 速度给（峰值约 0.3/帧 → ≈3px），停稳为 0
+          filter: (() => {
+            const v = Math.abs(lineScale(frame + 0.5) - lineScale(frame - 0.5));
+            const b = Math.min(3.5, v * 10) + introBlur;
+            return b > 0.05 ? `blur(${b.toFixed(2)}px)` : undefined;
+          })(),
+          translate: `${interpolate(
+            frame,
+            [zoomStart, zoomStart + ASSEMBLE_DURATION],
+            [slideDistance, 0],
+            { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: ZOOM_EASE },
+          )}px`,
+          opacity: ready ? 1 : 0,
+          textRendering: 'geometricPrecision',
+          ...(getRemotionEnvironment().isRendering ? null : { willChange: 'transform' as const }),
+        }}
+      >
+        {words.map((word, i) => {
+          const isLead = i === 0;
+          const pushStart = zoomStart + WORD_DELAY + (i - 1) * WORD_STAGGER;
+          const opacity = isLead
+            ? interpolate(frame, [0, INTRO_DURATION], [0, 1], {
+                extrapolateLeft: 'clamp',
+                extrapolateRight: 'clamp',
+              })
+            : interpolate(frame, [pushStart, pushStart + WORD_FADE], [0, 1], {
+                extrapolateLeft: 'clamp',
+                extrapolateRight: 'clamp',
+              });
+          return (
+            <Fragment key={i}>
+              <span
+                ref={isLead ? leadRef : undefined}
+                style={{
+                  display: 'inline-block',
+                  opacity,
+                  color: word === HIGHLIGHT_WORD ? ACCENT : undefined,
+                  translate: isLead
+                    ? undefined
+                    : `${interpolate(
+                        frame,
+                        [pushStart, pushStart + WORD_DURATION],
+                        [WORD_PUSH * FONT_SIZE, 0],
+                        { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: WORD_EASE },
+                      )}px`,
+                }}
+              >
+                {word}
+              </span>
+              {/* 词间空格必须放在 inline-block 之外——跟在词里会被行盒裁掉，词会黏在一起 */}
+              {i < words.length - 1 ? ' ' : null}
+            </Fragment>
+          );
+        })}
+        {/* 基线尺：零尺寸 inline-block，它的 offsetTop 就是基线 */}
+        <span ref={baselineRef} style={{ display: 'inline-block', width: 0, height: 0 }} />
+      </span>
+    </AbsoluteFill>
+  );
+};
+
+export const LeadWordZoomAssemble: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+
+  const lift = interpolate(frame, LIFT, [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const crash = interpolate(
+    frame,
+    [durationInFrames - CRASH_FRAMES, durationInFrames - 1],
+    [0, 1],
+    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.quad) },
+  );
+
+  return (
+    <AbsoluteFill style={{ background: MESH_BG, fontFamily: SANS }}>
+      <AbsoluteFill
+        style={{
+          transform: `scale(${1 + crash * CRASH_SCALE})`,
+          filter: crash > 0.01 ? `blur(${crash * CRASH_BLUR}px)` : undefined,
+          opacity: 1 - crash * 0.55,
+        }}
+      >
+        <AbsoluteFill style={{ transform: `translateY(${lift * LIFT_DISTANCE}px)` }}>
+          <TextReveal />
+        </AbsoluteFill>
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: '50%',
+            marginTop: 62,
+            textAlign: 'center',
+            fontSize: 34,
+            fontWeight: 400,
+            letterSpacing: '-0.005em',
+            color: INK_DIM,
+            opacity: lift,
+            transform: `translateY(${(1 - lift) * 16}px)`,
+          }}
+        >
+          {SUBLINE}
+        </div>
+      </AbsoluteFill>
+      <Vignette strength={0.12} inner={0.5} color="#2a2c36" />
+      <Grain opacity={0.05} />
+    </AbsoluteFill>
+  );
+};