dsh-drawai 0.3.4 → 0.4.1

package/lib/motion/shotcraft/upstream/demos/typography/pill-slot-cycle/PillSlotCycle.tsx

@@ -0,0 +1,309 @@
+// pill-slot-cycle —— 句中词槽轮换：固定句干 + 句尾 pill 老虎机式滚一格
+// 源：notion-ai 4.5–8.5s。旧 pill 上飞淡出、新 pill 从下带运动模糊滑入，
+// 连换 6 次后 pill 消失、句子落成 "One skill to do it all." 收束（video-shotcraft 一条龙的六步）。
+//
+// 质感升级：
+// - pill 绕"滚筒"翻入翻出：入场 rotateX -38°→0 + 0.94→1，出场 0→34° + 1→0.94（perspective 1400），
+//   竖向运动模糊按真实速度计算（SVG 只在 y 轴模糊），静止为 0。
+// - pill 材质：白面 + 发丝线 + 顶部内高光 + 随"离槽高度"变化的两层软阴影；图标换同一套线性 SVG，
+//   落在强调色浅底小方块里（替代 Unicode 字符 ▲ ☰ 等字体回退字形）。
+// - 系统字体栈 + 负字距；柔光 Backdrop 替代 #ececea 平铺。
+// - 收束：结论句落位后，整行用 smooth 缓缓居中（句干在列举期间仍纹丝不动），再 hold ≥45f。
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G } from '../../_fixtures/Fixtures';
+import { Backdrop, EASE, FONT as PFONT, mix, ramp, softShadow, innerHighlight } from '../../_fixtures/Polish';
+
+const FONT = PFONT.sans;
+
+// 槽内六个动词短语 = video-shotcraft 一条龙的六步（分镜 → 实拍页面 → 运镜 → 踩点 → 音效 → 渲染）
+type IconKey = 'board' | 'capture' | 'camera' | 'beat' | 'sound' | 'render';
+const PILLS: { label: string; icon: IconKey }[] = [
+  { label: 'Storyboard it', icon: 'board' },
+  { label: 'Capture the page', icon: 'capture' },
+  { label: 'Move the camera', icon: 'camera' },
+  { label: 'Cut on the beat', icon: 'beat' },
+  { label: 'Design the sound', icon: 'sound' },
+  { label: 'Render the film', icon: 'render' },
+];
+const STEM = 'One skill to'; // 句干（结论句 = STEM + "do it all."）
+
+const BEAT = 21; // ~0.7s @30fps
+const INTRO = 12; // 句干入场
+const CYCLES = PILLS.length;
+const SWAP = 8; // 每拍前 8f 完成换位
+const FIN = 14; // 收束句落位
+const CENTER = 26; // 落位后整行缓缓居中
+// 12f 入场 + 6×21f 列举 + 14f 收束 + 48f 完整句 hold
+export const PILL_SLOT_CYCLE_DURATION = INTRO + CYCLES * BEAT + FIN + 48; // 200f ≈ 6.7s
+
+const STEM_LEFT = 300; // 句干左端锚点（列举期间纹丝不动）
+const STEM_GAP = 36;
+const WORD_GAP = 18; // 结论句里 "to" 与 "do" 之间是普通词距，不是槽位间距
+
+// 线性图标（24 视框，stroke 继承 currentColor）
+const Icon: React.FC<{ k: IconKey }> = ({ k }) => {
+  const p = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.9, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
+  return (
+    <svg width={34} height={34} viewBox="0 0 24 24" style={{ display: 'block' }}>
+      {k === 'board' && (
+        <>
+          <rect x="3.5" y="4.5" width="17" height="15" rx="2.5" {...p} />
+          <path d="M12 4.5v15M3.5 12h17" {...p} />
+        </>
+      )}
+      {k === 'capture' && (
+        <>
+          <path d="M4 8.5V5.5A1.5 1.5 0 0 1 5.5 4h3M15.5 4h3A1.5 1.5 0 0 1 20 5.5v3M20 15.5v3a1.5 1.5 0 0 1-1.5 1.5h-3M8.5 20h-3A1.5 1.5 0 0 1 4 18.5v-3" {...p} />
+          <rect x="8" y="9" width="8" height="6" rx="1" {...p} />
+        </>
+      )}
+      {k === 'camera' && (
+        <>
+          <rect x="3" y="7" width="12" height="10" rx="2" {...p} />
+          <path d="M15 10.5l5.5-3v9l-5.5-3z" {...p} />
+        </>
+      )}
+      {k === 'beat' && <path d="M5 10v4M8.5 7v10M12 4v16M15.5 8v8M19 10.5v3" {...p} />}
+      {k === 'sound' && (
+        <>
+          <path d="M4 9.5h3.5L12 6v12l-4.5-3.5H4z" {...p} />
+          <path d="M15.5 9a4 4 0 0 1 0 6M18.5 6.5a7.5 7.5 0 0 1 0 11" {...p} />
+        </>
+      )}
+      {k === 'render' && (
+        <>
+          <rect x="3.5" y="5" width="17" height="14" rx="2.5" {...p} />
+          <path d="M10 9.2v5.6l4.8-2.8z" {...p} />
+        </>
+      )}
+    </svg>
+  );
+};
+
+// pill 本体；lift = 离槽高度（0 落槽 → 1 飞行中），驱动阴影大小与虚实
+const Pill: React.FC<{ label: string; icon: IconKey; lift?: number; style?: React.CSSProperties }> = ({
+  label,
+  icon,
+  lift = 0,
+  style,
+}) => (
+  <div
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 18,
+      padding: '14px 38px 14px 18px',
+      borderRadius: 999,
+      background: 'linear-gradient(180deg, #ffffff 0%, #fafafb 100%)',
+      border: '1px solid rgba(20,22,28,0.10)',
+      boxShadow: `${innerHighlight(0.95)}, ${softShadow(6 + lift * 30)}`,
+      fontFamily: FONT,
+      fontWeight: 700,
+      fontSize: 64,
+      letterSpacing: '-0.025em',
+      color: G.ink1,
+      whiteSpace: 'nowrap',
+      ...style,
+    }}
+  >
+    <span
+      style={{
+        width: 62,
+        height: 62,
+        borderRadius: 18,
+        background: G.accentSoft,
+        boxShadow: 'inset 0 0 0 1px rgba(91,99,211,0.14)',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: G.accent,
+        flexShrink: 0,
+      }}
+    >
+      <Icon k={icon} />
+    </span>
+    {label}
+  </div>
+);
+
+// 竖向运动模糊滤镜（只在 y 轴模糊；std<0.3 时不挂滤镜）
+const VBlur: React.FC<{ id: string; std: number }> = ({ id, std }) => (
+  <svg width={0} height={0} style={{ position: 'absolute' }} aria-hidden>
+    <filter id={id} x="-10%" y="-60%" width="120%" height="220%">
+      <feGaussianBlur stdDeviation={`0 ${std.toFixed(2)}`} />
+    </filter>
+  </svg>
+);
+
+// 入场位移曲线（像素）：从下 +120 强 ease-out 落槽
+const inYAt = (bf: number) => mix(120, 0, ramp(bf, 0, SWAP, EASE.snappy));
+// 出场位移曲线：向上 -130 ease-in 加速飞出
+const outYAt = (bf: number) => mix(0, -130, ramp(bf, 0, SWAP - 1, EASE.exit));
+
+export const PillSlotCycle: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 量最终句宽（STEM + gap + "do it all."），用于收束后居中
+  const finalRef = useRef<HTMLDivElement>(null);
+  const [finalW, setFinalW] = useState(1240);
+  useLayoutEffect(() => {
+    if (finalRef.current) setFinalW(finalRef.current.offsetWidth || 1240);
+  }, []);
+
+  // 句干入场：ease-out 上浮淡入 + 轻虚化收拢
+  const stemT = ramp(frame, 0, INTRO, EASE.out);
+
+  const cycleStart = INTRO;
+  const cycleEnd = cycleStart + CYCLES * BEAT;
+
+  // 当前处于第几个 pill 拍
+  const rel = frame - cycleStart;
+  const idx = Math.max(0, Math.min(Math.floor(rel / BEAT), CYCLES - 1));
+  const beatFrame = rel - idx * BEAT;
+
+  // 收束段：pill 上飞消失，"do it all." 从下滑入落位（全片唯一一次过冲）
+  const isFinale = frame >= cycleEnd;
+  const finT = interpolate(frame, [cycleEnd, cycleEnd + FIN], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.back(1.4)),
+  });
+  // 落位后整行缓缓居中
+  const centerT = ramp(frame, cycleEnd + FIN - 2, CENTER, EASE.smooth);
+  const shiftX = centerT * ((1920 - finalW) / 2 - STEM_LEFT);
+
+  const stemStyle: React.CSSProperties = {
+    fontFamily: FONT,
+    fontWeight: 800,
+    fontSize: 96,
+    color: G.ink1,
+    letterSpacing: '-0.035em',
+    whiteSpace: 'nowrap',
+  };
+
+  // 槽内容渲染
+  let slot: React.ReactNode = null;
+  if (!isFinale && rel >= 0) {
+    const incoming = PILLS[idx];
+    const outgoing = idx > 0 ? PILLS[idx - 1] : null;
+
+    // 新 pill：从下 +120px 绕滚筒翻入，blur 按速度
+    const inT = ramp(beatFrame, 0, SWAP, EASE.snappy);
+    const inY = inYAt(beatFrame);
+    const inV = Math.abs(inYAt(beatFrame + 0.5) - inYAt(beatFrame - 0.5));
+    const inBlur = Math.min(14, inV * 0.55);
+
+    // 旧 pill：向上 -130px 加速翻出淡掉
+    const outT = ramp(beatFrame, 0, SWAP - 1, EASE.exit);
+    const outY = outYAt(beatFrame);
+    const outV = Math.abs(outYAt(beatFrame + 0.5) - outYAt(beatFrame - 0.5));
+    const outBlur = Math.min(12, outV * 0.45);
+
+    slot = (
+      <div style={{ position: 'relative', display: 'inline-block', perspective: 1400 }}>
+        <VBlur id="psc-in" std={inBlur} />
+        <VBlur id="psc-out" std={outBlur} />
+        {/* 撑起槽宽度的隐形占位（当前 pill） */}
+        <Pill label={incoming.label} icon={incoming.icon} style={{ visibility: 'hidden' }} />
+        {outgoing && outT < 1 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              transformOrigin: '50% 100%',
+              transform: `translateY(${outY.toFixed(2)}px) rotateX(${(34 * outT).toFixed(2)}deg) scale(${mix(1, 0.94, outT).toFixed(4)})`,
+              opacity: 1 - outT,
+              filter: outBlur > 0.3 ? 'url(#psc-out)' : undefined,
+            }}
+          >
+            <Pill label={outgoing.label} icon={outgoing.icon} lift={outT} />
+          </div>
+        )}
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            transformOrigin: '50% 0%',
+            transform: `translateY(${inY.toFixed(2)}px) rotateX(${(-38 * (1 - inT)).toFixed(2)}deg) scale(${mix(0.94, 1, inT).toFixed(4)})`,
+            opacity: idx === 0 ? inT : Math.min(1, inT * 1.6),
+            filter: inBlur > 0.3 ? 'url(#psc-in)' : undefined,
+          }}
+        >
+          <Pill label={incoming.label} icon={incoming.icon} lift={1 - inT} />
+        </div>
+      </div>
+    );
+  } else if (isFinale) {
+    // 最后一个 pill 上飞离场（前 7f），然后 "do it all." 落位
+    const lastOutT = ramp(frame, cycleEnd, 7, EASE.exit);
+    const fv = Math.abs(
+      interpolate(frame + 0.5, [cycleEnd, cycleEnd + FIN], [90, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(1.4)) }) -
+        interpolate(frame - 0.5, [cycleEnd, cycleEnd + FIN], [90, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(1.4)) }),
+    );
+    const finBlur = Math.min(10, fv * 0.5);
+    slot = (
+      <div style={{ position: 'relative', display: 'inline-block', perspective: 1400 }}>
+        <VBlur id="psc-fin" std={finBlur} />
+        <VBlur id="psc-last" std={Math.min(12, lastOutT * 12)} />
+        <span
+          style={{
+            ...stemStyle,
+            display: 'inline-block',
+            marginLeft: WORD_GAP - STEM_GAP,
+            opacity: Math.min(1, finT * 1.4),
+            transform: `translateY(${((1 - finT) * 90).toFixed(2)}px)`,
+            filter: finBlur > 0.3 ? 'url(#psc-fin)' : undefined,
+          }}
+        >
+          do it all.
+        </span>
+        {lastOutT < 1 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: -8,
+              transformOrigin: '50% 100%',
+              transform: `translateY(${(-130 * lastOutT).toFixed(2)}px) rotateX(${(34 * lastOutT).toFixed(2)}deg) scale(${mix(1, 0.94, lastOutT).toFixed(4)})`,
+              opacity: 1 - lastOutT,
+              filter: lastOutT > 0.03 ? 'url(#psc-last)' : undefined,
+            }}
+          >
+            <Pill label={PILLS[CYCLES - 1].label} icon={PILLS[CYCLES - 1].icon} lift={lastOutT} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden' }}>
+      <Backdrop tone="light" light={{ x: 0.4, y: 0.3 }} accent="#5b63d3" grain={0.045} vignette={0.14} />
+      {/* 隐藏量宽：完整结论句 */}
+      <div ref={finalRef} style={{ position: 'absolute', visibility: 'hidden', display: 'flex', gap: WORD_GAP }}>
+        <span style={stemStyle}>{STEM}</span>
+        <span style={stemStyle}>do it all.</span>
+      </div>
+      {/* 句干固定不动：整行左端锚死，不随 pill 宽度居中重排（收束落位后才整体居中） */}
+      <div
+        style={{
+          position: 'absolute',
+          left: STEM_LEFT,
+          top: 540,
+          transform: `translate(${shiftX.toFixed(2)}px, calc(-50% + ${((1 - stemT) * 50).toFixed(2)}px))`,
+          display: 'flex',
+          alignItems: 'center',
+          gap: STEM_GAP,
+          opacity: stemT,
+          filter: stemT < 0.98 ? `blur(${((1 - stemT) * 6).toFixed(2)}px)` : undefined,
+        }}
+      >
+        <span style={stemStyle}>{STEM}</span>
+        {slot}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/text-column-converge/TextColumnConverge.tsx

@@ -0,0 +1,191 @@
+// text-column-converge —— raycast-teams（实测素材 28–36s 段）重做版：
+// 原片测量（1280 宽）：NEW 左缘钉死 x=412，特性词右缘钉死 x=867，
+// 两词到左右屏边距相等（412 vs 413），轮换期间间距完全不收缩；
+// 词换到 RAYCAST 后才发生唯一一次合拢——约 1.2s ease-in-out 连续滑动
+// （左缘 412→554 / 右缘 867→725），"NEW RAYCAST" 以屏幕中线居中定格；
+// 定格后约 0.6s，斜体 "COMING 2026" 在下方近乎硬切浮现。
+// （以上为原片测量记录；demo 内容已换成 video-shotcraft：特性词轮换 → 合拢成 "NEW video-shotcraft"，
+//  小字为品牌短句后半 "CRAFT THE SHOT."；合拢终点按字标字符数重算。）
+//
+// 质感升级（节拍/钉死/唯一合拢全部不动）：
+// - 暗场不再是 #050506 死黑：带冷色相的深底 + 中线上方极淡顶光 + 暗角 + soft-light 颗粒。
+// - 词换瞬间 1 帧提亮（原片的打字机换行感，>1f 读作故障所以只给 1f）。
+// - NEW 轮换期是次级灰（像目录页标签），合拢过程中随进度提亮到与特性词同色——两半变成一句话。
+// - 合拢滑动按真实速度给水平方向运动模糊（两词方向相反），静止为 0；落定后背后柔光微微亮起。
+// - 斜体小字降为三级色，层级清楚；补导出时长常量（原工作台按 16f 推断，只剩开头半秒）。
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FONT, Grain, SpeedBlur, Vignette, ramp, EASE } from '../../_fixtures/Polish';
+
+// 词轮换表：停留帧数不均（机器节奏），全程钉在右缘，不做间距收缩
+// 内容换成 video-shotcraft：八个特性词轮换，末词是全小写字标 video-shotcraft（字标规范：不做全大写）
+const BRAND_WORD = 'video-shotcraft';
+const STEPS: { word: string; dur: number }[] = [
+  { word: 'SHOT RECIPE CARDS', dur: 16 },
+  { word: 'PAGE CAPTURES', dur: 12 },
+  { word: '2.5D CAMERA MOVES', dur: 9 },
+  { word: 'BEAT-SYNCED CUTS', dur: 8 },
+  { word: 'FILM-GRADE SFX', dur: 7 },
+  { word: 'MOTION WORKBENCH', dur: 8 },
+  { word: 'REMOTION RENDER', dur: 10 },
+  { word: 'JIANYING EXPORT', dur: 12 },
+  { word: BRAND_WORD, dur: 999 }, // 最后一词：停稳后触发唯一一次合拢
+];
+
+const START = 8; // 开场黑场立静
+
+// 原片 1280 宽 → 1920 宽换算（×1.5）
+const NEW_LEFT_EDGE = 618; // 412×1.5：NEW 左缘（= 左屏边距）
+const WORD_RIGHT_EDGE = 1302; // 868×1.5：特性词右缘（= 右屏边距，1920-1302=618 对称）
+
+const FS = 42; // 原片字高很小（720p 下 cap ~20px → 1080p ~30px → 字号 ~42）
+const LSP = 3; // letterSpacing
+// 合拢终点按本字体实际步进计算（监视器等宽：0.6em + letterSpacing），
+// 保证 "NEW video-shotcraft" 恰好一个空格咬合、整行居中于 960，不会重叠
+const ADV = 0.6 * FS + LSP; // 每字符步进
+const LINE_W = (4 + BRAND_WORD.length) * ADV; // "NEW " + 字标，共 19 字符
+const MERGED_LEFT = 960 - LINE_W / 2; // 合拢后 NEW 左缘
+const MERGED_RIGHT = 960 + LINE_W / 2; // 合拢后字标右缘
+const CONVERGE_DUR = 36; // 合拢时长：原片 ~1.2s ≈ 36 帧
+const CONVERGE_DELAY = 10; // 字标停稳后先静置 10 帧再合拢（原片 32.4→32.7s）
+const SUB_DELAY = 18; // 合拢定格后 ~0.6s 出斜体小字
+
+// 8f 黑场 + 82f 轮换 + 10f 停稳 + 36f 合拢 + 18f 定格 + 4f 小字 + 22f 静置 = 180f（6.0s）
+export const TEXT_COLUMN_CONVERGE_DURATION = 180;
+
+const INK = '#eeeef2';
+const INK_NEW = '#8a8c96'; // 轮换期 NEW 的次级灰
+const INK_SUB = '#a3a5ae';
+
+// 合拢进度（以帧为自变量，供求速度）
+const LAST_START = START + STEPS.slice(0, -1).reduce((a, s) => a + s.dur, 0);
+const cvAt = (frame: number) =>
+  interpolate(frame - LAST_START - CONVERGE_DELAY, [0, CONVERGE_DUR], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.cubic),
+  });
+
+// 简单 hex 混色（NEW 由次级灰提亮到主色）
+const mixHex = (a: string, b: string, t: number) => {
+  const pa = [1, 3, 5].map((i) => parseInt(a.slice(i, i + 2), 16));
+  const pb = [1, 3, 5].map((i) => parseInt(b.slice(i, i + 2), 16));
+  return `rgb(${pa.map((v, k) => Math.round(v + (pb[k] - v) * t)).join(',')})`;
+};
+
+export const TextColumnConverge: React.FC = () => {
+  const f = useCurrentFrame();
+  const t = f - START;
+
+  // 定位当前步
+  let acc = 0;
+  let idx = 0;
+  let stepStart = 0;
+  for (let i = 0; i < STEPS.length; i++) {
+    if (t >= acc) { idx = i; stepStart = acc; }
+    acc += STEPS[i].dur;
+  }
+  const cur = STEPS[idx];
+  const isLast = idx === STEPS.length - 1;
+  const local = t - stepStart;
+
+  // 唯一一次合拢：字标停稳 CONVERGE_DELAY 帧后，ease-in-out 连续滑动
+  const cvT = isLast ? local - CONVERGE_DELAY : -1;
+  const cv = interpolate(cvT, [0, CONVERGE_DUR], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.cubic),
+  });
+
+  // NEW 左缘：618 → 692；特性词右缘：1302 → 1228
+  const newLeft = interpolate(cv, [0, 1], [NEW_LEFT_EDGE, MERGED_LEFT]);
+  const wordRight = interpolate(cv, [0, 1], [WORD_RIGHT_EDGE, MERGED_RIGHT]);
+
+  const converged = cv >= 1;
+
+  // 斜体小字：合拢定格后 SUB_DELAY 帧，近乎硬切（4 帧快速淡入，无位移）
+  const subT = converged ? cvT - CONVERGE_DUR - SUB_DELAY : -1;
+  const subOp = interpolate(subT, [0, 4], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  const visible = t >= 0;
+
+  const font: React.CSSProperties = {
+    fontFamily: FONT.mono,
+    fontWeight: 500,
+    fontSize: FS,
+    letterSpacing: LSP,
+    color: INK,
+    whiteSpace: 'nowrap',
+    lineHeight: 1,
+  };
+
+  // 词换瞬间 1 帧提亮（首词不闪）
+  const flash = local === 0 && idx > 0 ? 1 : 0;
+  const wordColor = flash ? '#ffffff' : INK;
+  const wordGlow = flash ? '0 0 14px rgba(200,210,255,0.35)' : 'none';
+
+  // 合拢速度（px/帧）→ 水平运动模糊；两词相向
+  const span = MERGED_LEFT - NEW_LEFT_EDGE;
+  const v = (cvAt(f + 0.5) - cvAt(f - 0.5)) * span;
+  // 落定后背后柔光
+  const glow = ramp(cvT, CONVERGE_DUR - 6, 24, EASE.out);
+
+  return (
+    <AbsoluteFill style={{ background: '#08090c', overflow: 'hidden' }}>
+      {/* 冷色深底 + 中线上方极淡顶光 */}
+      <AbsoluteFill
+        style={{
+          background:
+            'radial-gradient(ellipse 60% 55% at 50% 40%, rgba(120,130,170,0.10), rgba(120,130,170,0) 70%), ' +
+            'linear-gradient(180deg, #0d0e12 0%, #08090c 60%, #060709 100%)',
+        }}
+      />
+      {/* 合拢落定后背后柔光微亮 */}
+      <div
+        style={{
+          position: 'absolute', left: 960 - 520, top: 540 - 150, width: 1040, height: 300,
+          background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(170,180,230,0.10), rgba(170,180,230,0) 70%)',
+          opacity: glow,
+        }}
+      />
+      {visible && (
+        <div style={{ position: 'absolute', inset: 0 }}>
+          {/* NEW：左缘定位（轮换期间钉死在左屏边距处）；随合拢由次级灰提亮 */}
+          <SpeedBlur vx={v} amount={0.35} max={4}>
+            <div style={{
+              ...font, position: 'absolute',
+              left: newLeft, top: 519,
+              color: mixHex(INK_NEW, INK, ramp(cvT, 0, CONVERGE_DUR * 0.8, EASE.smooth)),
+            }}>
+              NEW
+            </div>
+          </SpeedBlur>
+          {/* 特性词：右缘定位（词换长换短，右缘不动） */}
+          <SpeedBlur vx={-v} amount={0.35} max={4}>
+            <div style={{
+              ...font, position: 'absolute',
+              right: 1920 - wordRight, top: 519,
+              color: wordColor, textShadow: wordGlow,
+            }}>
+              {cur.word}
+            </div>
+          </SpeedBlur>
+
+          {/* 斜体小字：合拢后在整行正下方浮现，与整行同左缘 */}
+          <div style={{
+            ...font,
+            fontStyle: 'italic',
+            color: INK_SUB,
+            position: 'absolute',
+            left: MERGED_LEFT, top: 519 + FS + 14,
+            opacity: subOp,
+          }}>
+            CRAFT THE SHOT.
+          </div>
+        </div>
+      )}
+      <Vignette strength={0.5} inner={0.45} color="#000000" />
+      <Grain opacity={0.07} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};