dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/typography/type-assembly-moves/TextOnPath.tsx

@@ -0,0 +1,255 @@
+// 文字沿曲线流入（text-on-path）——字符沿一条上升曲线（图表增长线）鱼贯流入，行进中按切线角旋转；
+// 到达后逐字从"贴线姿态"抬升摆正成水平标题。曲线随车头字符同步 evolve。
+//
+// 第二轮重设计（midnight · 暗场数据发布会）：
+// - look = midnight（深蓝夜 · 电光蓝 · 青色点缀）。主角是一条占满画面的营收增长线：电光蓝 5px 圆头描边 +
+//   线下纵向渐变面积 + 外发光，车头是一颗青色光点；背景是 4 条发丝网格线 + mono 刻度（纹理级）。
+// - 文案「UP AND TO THE RIGHT」92px / 800 字重全大写——字面意思就是这条线，字沿线走 = 字与数据同框叙事。
+//   整串按真实步进沿弧长刚性推进（末字领跑、切线角旋转，行进中可读），按速度加横向拖影。
+// - 摆正不再是原地 lerp：每个字沿一条"先抬起、后横移"的弧线飞到左上标题位（y 用 snappy、x 用 swift，
+//   两条曲线错开 → 轨迹是弧），从左到右 1.1f 错峰，落位带 ≤一次的轻微过冲。
+// - 余波：车头光点落在线顶 → 一枚数值牌「$48.6M ARR」+「▲ 312%」弹出（弹簧），眉题与副句逐词升起；
+//   hold 段整画面 1.5% 极缓推近。
+//
+// 时间表（30fps，共 160f）：
+//   0–16    网格线自左擦入、刻度淡入；舞台光（第 1 帧即有网格起始态）
+//   4–64    整串沿线推进 60f（缓起、长 ease-out），曲线与车头同步生长
+//   64–72   停 8f：整句挂在线上可读
+//   72–110  逐字抬升摆正（18f/字，1.1f 错峰），曲线补完、面积淡满
+//   92–110  副句 / 眉题升起；98 数值牌弹出（弹簧）；100 起季度标记逐个点亮
+//   108–160 hold（极缓推近 1.5%）
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, bezier, mix, ramp, velocity } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, glow, springAt, type } from '../../_fixtures/Look';
+
+export const TEXT_ON_PATH_DURATION = 160;
+
+const L = LOOKS.midnight;
+
+// 增长曲线：左下 → 右上（先缓后陡，但拐弯半径够大，92px 字不互相啃角）
+const P0 = { x: 150, y: 930 };
+const P1 = { x: 860, y: 920 };
+const P2 = { x: 1300, y: 780 };
+const P3 = { x: 1700, y: 400 };
+
+const bez = (t: number) => {
+  const u = 1 - t;
+  return {
+    x: u * u * u * P0.x + 3 * u * u * t * P1.x + 3 * u * t * t * P2.x + t * t * t * P3.x,
+    y: u * u * u * P0.y + 3 * u * u * t * P1.y + 3 * u * t * t * P2.y + t * t * t * P3.y,
+  };
+};
+const tangent = (t: number) => {
+  const u = 1 - t;
+  const dx = 3 * u * u * (P1.x - P0.x) + 6 * u * t * (P2.x - P1.x) + 3 * t * t * (P3.x - P2.x);
+  const dy = 3 * u * u * (P1.y - P0.y) + 6 * u * t * (P2.y - P1.y) + 3 * t * t * (P3.y - P2.y);
+  return (Math.atan2(dy, dx) * 180) / Math.PI;
+};
+
+// 弧长表：s(t) 采样 + 反查 t(s)
+const SAMPLES = 300;
+const ARC: number[] = (() => {
+  const a = [0];
+  let prev = bez(0);
+  for (let k = 1; k <= SAMPLES; k++) {
+    const p = bez(k / SAMPLES);
+    a.push(a[k - 1] + Math.hypot(p.x - prev.x, p.y - prev.y));
+    prev = p;
+  }
+  return a;
+})();
+const LEN = ARC[SAMPLES];
+const tAtS = (s: number) => {
+  const v = Math.max(0, Math.min(LEN, s));
+  let lo = 0;
+  let hi = SAMPLES;
+  while (hi - lo > 1) {
+    const mid = (lo + hi) >> 1;
+    if (ARC[mid] < v) lo = mid;
+    else hi = mid;
+  }
+  const seg = ARC[hi] - ARC[lo] || 1;
+  return (lo + (v - ARC[lo]) / seg) / SAMPLES;
+};
+
+const TEXT = 'UP AND TO THE RIGHT';
+const N = TEXT.length;
+const FS = 92;
+const TRACK = '-0.01em';
+const CHAR_W = 60; // 实测前的兜底字宽
+const FINAL = { x: 150, y: 250 }; // 标题落位：左缘 x、字心 y
+const T0 = 4; // 起跑
+const TRAVEL = 60; // 沿线推进
+const HOLD = 8; // 挂线停顿
+const SETTLE = 18; // 每字摆正
+const SETTLE_STAG = 1.1;
+const END_S = LEN * 0.94; // 车头字心最终停在弧长 94% 处
+const TRAVEL_EASE = bezier(0.42, 0, 0.12, 1); // 缓起、长 ease-out
+const LIFT_EASE = bezier(0.3, 1.22, 0.6, 1); // 抬升：快到、过冲 ~4% 回落（抬升行程大，8% 会顶进眉题）
+
+// 网格（y）与刻度
+const GRID = [400, 577, 753, 930];
+const TICKS = ['$60M', '$40M', '$20M', '$0'];
+const QUARTERS: [number, string][] = [[0.42, 'Q2 · $11M'], [0.66, 'Q3 · $24M'], [0.85, 'Q4 · $37M']];
+const MONTHS = ['JAN', 'MAR', 'MAY', 'JUL', 'SEP', 'NOV'];
+
+export const TextOnPath: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 实测每个字符的字心（相对整串左缘）
+  const measRef = useRef<HTMLDivElement>(null);
+  const [centers, setCenters] = useState<number[]>(() => TEXT.split('').map((_, i) => i * CHAR_W + CHAR_W / 2));
+  useLayoutEffect(() => {
+    const el = measRef.current;
+    if (!el) return;
+    const kids = Array.from(el.children) as HTMLElement[];
+    const c = kids.map((k) => k.offsetLeft + k.offsetWidth / 2);
+    if (el.offsetWidth > 0) setCenters(c);
+  }, []);
+  const lastC = centers[N - 1];
+
+  // 车头沿弧长推进
+  const headAt = (f: number) => -24 + (END_S + 24) * ramp(f, T0, TRAVEL, TRAVEL_EASE);
+  const headS = headAt(frame);
+  const headV = Math.abs(velocity(headAt, frame)); // px/帧
+  // 曲线 evolve：与车头同步（略领先），到达后补完余下的线
+  const tail = ramp(frame, T0 + TRAVEL - 4, 30, EASE.out);
+  const evolveS = Math.min(LEN, Math.max(headS + FS * 0.45, 0) * (1 - tail) + LEN * tail);
+  const tip = bez(tAtS(evolveS));
+  const evolveFrac = evolveS / LEN;
+
+  const pathD = `M ${P0.x} ${P0.y} C ${P1.x} ${P1.y}, ${P2.x} ${P2.y}, ${P3.x} ${P3.y}`;
+  const areaD = `${pathD} L ${P3.x} ${GRID[3]} L ${P0.x} ${GRID[3]} Z`;
+  const areaFull = ramp(frame, 70, 34, EASE.out);
+
+  // hold 段极缓推近（以曲线顶点附近为目标）
+  const push = 1 + 0.015 * ramp(frame, 100, 60, EASE.swift);
+  // 数值牌
+  const badge = springAt(frame, 98, { damping: 15, stiffness: 190 });
+  const badgeIn = ramp(frame, 98, 8, EASE.out);
+  const pulse = ramp(frame, T0 + TRAVEL + 2, 24, EASE.out); // 光点到顶的一圈脉冲
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.78, y: 0.28 }} fill={{ x: 0.12, y: 0.95 }} breathe={0.6} />
+      {/* 隐藏量宽行（与终态同字体字距） */}
+      <div ref={measRef} style={{ position: 'absolute', visibility: 'hidden', whiteSpace: 'pre', display: 'flex', ...type(FS, 800, { caps: true }), letterSpacing: TRACK }}>
+        {TEXT.split('').map((ch, i) => <span key={i}>{ch === ' ' ? ' ' : ch}</span>)}
+      </div>
+
+      <AbsoluteFill style={{ transform: `scale(${push.toFixed(5)})`, transformOrigin: '70% 40%' }}>
+        <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+          <defs>
+            <linearGradient id="top-area" x1="0" y1={400} x2="0" y2={930} gradientUnits="userSpaceOnUse">
+              <stop offset="0" stopColor={L.accent} stopOpacity={0.34} />
+              <stop offset="0.6" stopColor={L.accent} stopOpacity={0.08} />
+              <stop offset="1" stopColor={L.accent} stopOpacity={0} />
+            </linearGradient>
+            <linearGradient id="top-line" x1={P0.x} y1="0" x2={P3.x} y2="0" gradientUnits="userSpaceOnUse">
+              <stop offset="0" stopColor={alpha(L.accent, 0.35)} />
+              <stop offset="0.55" stopColor={L.accent} />
+              <stop offset="1" stopColor="#9fc0ff" />
+            </linearGradient>
+            <clipPath id="top-reveal"><rect x={0} y={0} width={tip.x} height={1080} /></clipPath>
+            <filter id="top-glow" x="-10%" y="-30%" width="120%" height="160%"><feGaussianBlur stdDeviation="10" /></filter>
+          </defs>
+          {/* 发丝网格 + 刻度（纹理级） */}
+          {GRID.map((y, k) => {
+            const g = ramp(frame, k * 3, 18, EASE.out);
+            return (
+              <g key={y} opacity={0.4 + 0.6 * g}>
+                <line x1={150} x2={150 + 1560 * g} y1={y} y2={y} stroke={k === 3 ? alpha(L.ink, 0.22) : L.line} strokeWidth={1.5} strokeDasharray={k === 3 ? undefined : '2 10'} />
+                <text x={1740} y={y + 8} fontFamily={FONT.mono} fontSize={22} fill={L.ink3} opacity={g}>{TICKS[k]}</text>
+              </g>
+            );
+          })}
+          {MONTHS.map((m, k) => (
+            <text key={m} x={150 + k * 300} y={980} fontFamily={FONT.mono} fontSize={22} letterSpacing="0.12em" fill={L.ink3} opacity={ramp(frame, 6 + k * 2, 16, EASE.out)}>{m}</text>
+          ))}
+          {/* 线下面积：随曲线生长揭开，到顶后加满 */}
+          <path d={areaD} fill="url(#top-area)" clipPath="url(#top-reveal)" opacity={0.55 + 0.45 * areaFull} />
+          {/* 外发光 + 主线 */}
+          <path d={pathD} fill="none" stroke={L.accent} strokeWidth={14} strokeLinecap="round" opacity={0.55} filter="url(#top-glow)"
+            pathLength={1} strokeDasharray={1} strokeDashoffset={1 - evolveFrac} />
+          <path d={pathD} fill="none" stroke="url(#top-line)" strokeWidth={5} strokeLinecap="round"
+            pathLength={1} strokeDasharray={1} strokeDashoffset={1 - evolveFrac} />
+          {/* 季度标记：曲线画过之后逐个点亮（纹理级标签） */}
+          {QUARTERS.map(([tq, lab], k) => {
+            const q = bez(tq);
+            const on = ramp(frame, 100 + k * 4, 12, EASE.overshoot);
+            if (evolveFrac < tq || on <= 0) return null;
+            return (
+              <g key={lab} opacity={Math.min(1, on)}>
+                <line x1={q.x} x2={q.x} y1={q.y + 14} y2={GRID[3]} stroke={alpha(L.accent, 0.25)} strokeWidth={1.5} strokeDasharray="2 6" />
+                <circle cx={q.x} cy={q.y} r={7 * on} fill={L.bg[1]} stroke={L.accent} strokeWidth={3} />
+                <text x={q.x + 16} y={q.y + 34} fontFamily={FONT.mono} fontSize={22} fill={L.ink2}>{lab}</text>
+              </g>
+            );
+          })}
+          {/* 车头光点 + 到顶脉冲 */}
+          {evolveFrac > 0.002 && (
+            <g>
+              {pulse > 0 && pulse < 1 && <circle cx={tip.x} cy={tip.y} r={12 + 60 * pulse} fill="none" stroke={L.accent2} strokeWidth={2} opacity={1 - pulse} />}
+              <circle cx={tip.x} cy={tip.y} r={22} fill={L.accent2} opacity={0.18} />
+              <circle cx={tip.x} cy={tip.y} r={9} fill={L.ink} stroke={L.accent2} strokeWidth={4} />
+            </g>
+          )}
+        </svg>
+
+        {/* 数值牌：钉在线顶左下方 */}
+        <div style={{
+          position: 'absolute', left: P3.x - 56, top: P3.y - 168, transform: `translateX(-100%) translateY(${((1 - badge) * 30).toFixed(2)}px) scale(${(0.9 + 0.1 * badge).toFixed(4)})`,
+          transformOrigin: '100% 100%', opacity: badgeIn, textAlign: 'right',
+        }}>
+          <div style={{ ...type(84, 760), color: L.ink, textShadow: glow(L.accent, 0.35) }}>$48.6M</div>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 18, marginTop: 10, alignItems: 'baseline' }}>
+            <span style={{ ...type(32, 500), color: L.ink2 }}>ARR</span>
+            <span style={{ ...type(32, 700), color: L.accent2 }}>▲ 312%</span>
+          </div>
+        </div>
+
+        {/* 眉题 + 副句 */}
+        <div style={{ position: 'absolute', left: FINAL.x + 4, top: FINAL.y - 112, ...type(26, 700, { caps: true, mono: true }), letterSpacing: '0.18em', color: L.accent }}>
+          <TextReveal text="FY2026 · Annual report" start={96} by="word" variant="rise" each={14} gap={3} />
+        </div>
+        <div style={{ position: 'absolute', left: FINAL.x + 4, top: FINAL.y + 70, ...type(40, 450), color: L.ink2 }}>
+          <TextReveal text="Every quarter beat the last one." start={92} by="word" variant="blur" each={16} gap={2.5} />
+        </div>
+
+        {/* 字符：沿线推进 → 抬升摆正 */}
+        {TEXT.split('').map((ch, i) => {
+          if (ch === ' ') return null;
+          const s = headS - (lastC - centers[i]);
+          const onPath = bez(tAtS(s));
+          const pre = Math.min(0, s); // 还没上线的字沿起点切线退在线外
+          const ang0 = tangent(0) * (Math.PI / 180);
+          const px = onPath.x + Math.cos(ang0) * pre;
+          const py = onPath.y + Math.sin(ang0) * pre;
+          const angOnCurve = tangent(tAtS(s));
+          const st = T0 + TRAVEL + HOLD + i * SETTLE_STAG;
+          const sx = ramp(frame, st, SETTLE, EASE.swift); // 横移（in-out）
+          const sy = ramp(frame, st, SETTLE, LIFT_EASE); // 抬升先到（带 ~4% 轻微过冲）
+          const sr = ramp(frame, st + 2, SETTLE, EASE.out); // 旋转晚 2f 收敛
+          const x = mix(px, FINAL.x + centers[i], sx);
+          const y = mix(py, FINAL.y, sy);
+          const ang = angOnCurve * (1 - sr);
+          const lift = -0.4 * FS * (1 - Math.min(1, sy)); // 字底贴线 → 字心
+          const op = ramp(s, -FS * 0.9, FS * 0.9, EASE.linear);
+          // 行进中按速度横向拖影（文字自身的 blur 只在快速段）
+          const moving = frame < st ? Math.min(6, headV * 0.12) : 0;
+          return (
+            <div key={i} style={{
+              position: 'absolute', left: x, top: y, opacity: op,
+              transform: `translate(-50%, -50%) rotate(${ang.toFixed(3)}deg) translateY(${lift.toFixed(2)}px)`,
+              ...type(FS, 800, { caps: true }), letterSpacing: TRACK, lineHeight: 1, color: L.ink, whiteSpace: 'pre',
+              textShadow: `${(-moving * 1.4).toFixed(1)}px 0 ${(moving * 2).toFixed(1)}px ${alpha(L.accent, 0.5)}, 0 0 24px ${alpha(L.accent, 0.25)}`,
+            }}>
+              {ch}
+            </div>
+          );
+        })}
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/type-entrance-moves/LetterDropPhysics.tsx

@@ -0,0 +1,173 @@
+// 字符坠落堆积（letter-drop-physics）——FallingLetterAnimation。
+// 品牌名 "Shotcraft"（BRAND.short）9 字符按字体自然字宽排成一行（flex 布局只管槽位，所有运动走 transform 不改排版），
+// 第 i 字符从帧 4+36·(1−(1−i/8)^1.5) 起下落（间隔 6.5→1.6f 越来越密，R2 硬加速）：
+// ① 重力加速 y = D*(t/24)^2 掉 720px 到地面，下落中按速度纵向拉伸 + 竖向运动模糊；
+// ② 落地后 2 次衰减弹跳（高度 30% / 9%，抛物线 4u(1-u) 拼段），每次触地挤压（squash）
+//    并阻尼回弹；落地瞬间 rotate 到 seed hash ±6° 小歪角并保持（歪歪扭扭站定）；
+//    每个字符脚下一枚接触影：离地越高越大越虚越淡，落地收成小而实的一抹；
+// ③ 帧 110 一拍：先 2f 吸气撑到 1.06，再 6f ease-out 全体齐整回正（rotate→0、错位→0、
+//    scale 1.06→1），副标题「Every shot lands on the beat.」随后浮出；帧 116–150 真静止（≥34f）收尾。
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { G } from '../../_fixtures/Fixtures';
+import { Backdrop, EASE, FONT, Grain, SpeedBlur, mix, ramp, tracking } from '../../_fixtures/Polish';
+import { BRAND } from '../../_fixtures/Brand';
+
+export const LETTER_DROP_PHYSICS_DURATION = 150;
+
+// 确定性伪随机
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+const WORD = BRAND.short; // 'Shotcraft'（无下行字母，全员基线贴地）
+const SIZE = 176; // 字号
+const FLOOR_Y = 600; // 地面线（字符基线）
+const BASE = Math.round(SIZE * 0.886); // 字行盒顶到基线（SF Pro，lineHeight 1 实测）
+const ROW_TOP = FLOOR_Y - BASE; // 字行盒顶：基线正好压在地面线上
+
+const PAD = 200; // 运动模糊层外扩
+const DROP = 720; // 下落距离
+const T_FALL = 24; // 落到地面用时
+const T_B1 = 16; // 第一次弹跳时长（高 30%）
+const T_B2 = 8; // 第二次弹跳时长（高 9%）
+const SNAP = 110; // 齐整回正的一拍
+const SNAP_DUR = 6;
+
+const clamp01 = (x: number) => Math.min(1, Math.max(0, x));
+
+// 起跳帧：非等差错峰，越来越密
+const startOf = (i: number) => 4 + 36 * (1 - Math.pow(1 - i / (WORD.length - 1), 1.5));
+
+// 单字符纵向位移（相对地面，负 = 在上方）
+const dropY = (t: number): number => {
+  if (t <= 0) return -DROP;
+  if (t < T_FALL) return -DROP + DROP * (t / T_FALL) ** 2; // 重力加速
+  if (t < T_FALL + T_B1) {
+    const u = (t - T_FALL) / T_B1;
+    return -DROP * 0.3 * 4 * u * (1 - u); // 弹跳 1：30%
+  }
+  if (t < T_FALL + T_B1 + T_B2) {
+    const u = (t - T_FALL - T_B1) / T_B2;
+    return -DROP * 0.09 * 4 * u * (1 - u); // 弹跳 2：9%
+  }
+  return 0;
+};
+
+// 触地挤压量：三次触地（落地 / 一跳落 / 二跳落）各给一次阻尼振荡，强度 1 / 0.45 / 0.18
+const IMPACTS: [number, number][] = [
+  [T_FALL, 1],
+  [T_FALL + T_B1, 0.45],
+  [T_FALL + T_B1 + T_B2, 0.18],
+];
+const squashAt = (t: number) => {
+  let s = 0;
+  for (const [t0, k] of IMPACTS) {
+    const d = t - t0;
+    if (d < 0 || d > 16) continue;
+    s += k * Math.exp(-d / 2.6) * Math.cos(d * 0.85);
+  }
+  return s;
+};
+
+export const LetterDropPhysics: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 帧 110 回正：108–110 吸气撑起，110–116 ease-out 回落
+  const inhale = ramp(frame, SNAP - 2, 2, EASE.out);
+  const snap = ramp(frame, SNAP, SNAP_DUR, EASE.snappy);
+  const snapRot = ramp(frame, SNAP, SNAP_DUR + 2, EASE.overshoot); // 歪角回正带一点过冲
+  const pulse = 0.06 * inhale * (1 - snap);
+  // 副标题：回正后浮出
+  const sub = ramp(frame, SNAP + 4, 18, EASE.out);
+
+  return (
+    <div style={{ width: 1920, height: 1080, overflow: 'hidden', position: 'relative', fontFamily: FONT.sans }}>
+      <Backdrop tone="light" light={{ x: 0.5, y: 0.16 }} grain={0} vignette={0.16} />
+
+      {/* 地面：地平线以下一块向下渐深的台面 + 两端淡出的发丝地平线 */}
+      <div style={{
+        position: 'absolute', left: 0, right: 0, top: FLOOR_Y, bottom: 0,
+        background: 'linear-gradient(180deg, rgba(40,42,52,0.035) 0%, rgba(40,42,52,0.012) 30%, rgba(40,42,52,0) 64%)',
+      }} />
+      <div style={{
+        position: 'absolute', left: 160, right: 160, top: FLOOR_Y, height: 1,
+        background: 'linear-gradient(90deg, rgba(20,22,28,0) 0%, rgba(20,22,28,0.16) 22%, rgba(20,22,28,0.16) 78%, rgba(20,22,28,0) 100%)',
+      }} />
+      <div style={{
+        position: 'absolute', left: 160, right: 160, top: FLOOR_Y + 1, height: 1,
+        background: 'linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.7) 70%, rgba(255,255,255,0) 100%)',
+      }} />
+
+      {/* 字行：flex 按自然字宽排槽位，每个槽内字符只做 transform */}
+      <div style={{
+        position: 'absolute', left: 0, right: 0, top: ROW_TOP, height: SIZE,
+        display: 'flex', justifyContent: 'center',
+        fontSize: SIZE, fontWeight: 800, lineHeight: 1, letterSpacing: tracking(SIZE, true), color: G.ink1,
+      }}>
+        {WORD.split('').map((ch, i) => {
+          const t = frame - startOf(i);
+          const y = dropY(t);
+          const vy = dropY(t + 0.5) - dropY(t - 0.5);
+          const air = -y; // 离地高度
+          // 落地瞬间歪到 seed 小角度（±6°），落地前为 0；snap 一拍齐整归零
+          const tiltTarget = (h(i + 1) - 0.5) * 12;
+          const landP = EASE.out(clamp01((t - T_FALL) / 6));
+          const rot = tiltTarget * landP * (1 - snapRot);
+          // 歪着站 = 一个底角着地：按歪角把字抬起 sin|θ|·半字宽，底角始终贴地不穿地面
+          const jitter = -Math.sin((Math.abs(rot) * Math.PI) / 180) * 48;
+          // 拉伸（下落速度）+ 挤压（触地），保体积：scaleX ≈ 1/scaleY
+          const stretch = Math.min(1, Math.abs(vy) / 60) * 0.1 * (t < T_FALL ? 1 : 0.6);
+          const sq = squashAt(t);
+          const sy = (1 + stretch) * (1 - 0.2 * sq) + pulse;
+          const sx = (1 - stretch * 0.55) * (1 + 0.15 * sq) + pulse;
+          // 接触影：贴地小而实，离地大而虚而淡；未入画时几乎不可见
+          const lift = clamp01(air / 420);
+          const shOp = (t < 0 ? 0 : 0.2) * (1 - lift * 0.85) * clamp01((t + 2) / 8);
+          const shW = mix(0.74, 1.3, lift) * (1 + 0.12 * Math.max(0, sq));
+          const shBlur = mix(7, 28, lift);
+          return (
+            <span key={i} style={{ position: 'relative', display: 'inline-block' }}>
+              {/* 占位字：撑出自然字宽，不可见 */}
+              <span style={{ visibility: 'hidden' }}>{ch}</span>
+              {/* 接触影 */}
+              <div style={{
+                position: 'absolute', left: '50%', top: BASE - 7, width: '84%', height: 14,
+                transform: `translateX(-50%) scaleX(${shW.toFixed(3)})`,
+                borderRadius: '50%', background: 'rgba(22,24,34,1)',
+                opacity: shOp, filter: `blur(${shBlur.toFixed(1)}px)`,
+              }} />
+              {/* 运动层：位移在外，模糊随之移动（下落段全量、弹跳段减半，防触地时糊成一团）；挤压 / 歪角绕触地点 */}
+              {/* 模糊层四周外扩 PAD：SVG 滤镜区域按元素盒计算，盒子太紧会把拖影裁成硬边 */}
+              <div style={{
+                position: 'absolute', left: -PAD, right: -PAD, top: -PAD, bottom: -PAD,
+                transform: `translateY(${(y + jitter).toFixed(2)}px)`,
+              }}>
+                <SpeedBlur vx={0} vy={vy} amount={t < T_FALL ? 0.26 : 0.12} max={16}>
+                  <div style={{
+                    position: 'absolute', left: PAD, right: PAD, top: PAD, bottom: PAD, textAlign: 'center',
+                    transform: `rotate(${rot.toFixed(3)}deg) scale(${sx.toFixed(4)}, ${sy.toFixed(4)})`,
+                    transformOrigin: '50% 86%',
+                  }}>
+                    {ch}
+                  </div>
+                </SpeedBlur>
+              </div>
+            </span>
+          );
+        })}
+      </div>
+
+      {/* 副标题：回正一拍后的句号 */}
+      <div style={{
+        position: 'absolute', left: 0, right: 0, top: FLOOR_Y + 70, textAlign: 'center',
+        fontSize: 36, fontWeight: 500, letterSpacing: tracking(36), color: G.ink2,
+        opacity: sub, transform: `translateY(${((1 - sub) * 10).toFixed(2)}px)`,
+      }}>
+        Every shot lands on the beat.
+      </div>
+
+      <Grain opacity={0.05} />
+    </div>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/type-rhythm-sync/FontWeightPump.tsx

@@ -0,0 +1,225 @@
+// 字重脉冲（font-weight-pump）——标题笔画随节拍变粗又弹回，像文字跟着低音鼓蹦迪。
+//
+// 第二轮重设计（夜店海报 · 回声字栈）：
+// - look = aurora（深紫夜 · 紫粉霓虹）。主角是 250px 的「LOUDER」：静止时是 250 字重的细体、字与字之间空着
+//   （每个字钉在按 900 字重排好的槽位里），鼓点一到笔画瞬间撑满槽位变成实心黑体，再幂衰减弹回细体——
+//   "缝隙一拍一合"本身就是节拍。字不位移、不重排，只有属性在动。
+// - 节奏递进（128 BPM，14f 一拍，两小节 + 一记 drop）：
+//   第 1 小节只有主字脉冲；第 2 小节上下各长出一行描边回声字，比主字晚 2f 跟着脉冲、并被冲击推开（跟随）；
+//   第 9 拍 drop：主字冲到 900 后不再回细，而是落定在 780 字重、填上紫→粉渐变，回声推开后归位，
+//   一道横向光带扫过（Q4：只给主角一次）——结尾帧是一张完整的海报。
+// - 回弹按"中间先收、两边后收"错开（衰减窗 9f → 13f），读作冲击从中间向两侧散开；
+//   每小节第 1 拍是重音：额外 scaleX +6%，染粉色。底部 8+1 格步进音序器作静音参照（亮哪格 = 第几拍）。
+// - 不做整画面逐拍泵 / 抖动（节拍性抖动判例）：只有字、字后柔光和音序器格子随拍动。
+//
+// 时间表（30fps，共 165f）：
+//   0–15    预备：细体 LOUDER、音序器空格、眉题（video-shotcraft 标志 + 字标）就位，字后光极缓呼吸
+//   16–58   第 1 小节 4 拍（16/30/44/58），每拍 9–13f 衰减窗，拍距 14f > 衰减窗
+//   64–72   回声行淡入、上下拉开
+//   72–114  第 2 小节 4 拍，回声晚 2f 跟拍、被推开 26px
+//   128     drop：900 字重 + 渐变 + 光带，~12f 内回落到 780 定格；副标题（video-shotcraft 卖点）逐词升起
+//   140–165 hold
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const FONT_WEIGHT_PUMP_DURATION = 165;
+
+const L = LOOKS.aurora;
+
+const BEATS = [16, 30, 44, 58, 72, 86, 100, 114];
+const DROP = 128;
+const DOWN = new Set([0, 4]); // 每小节第 1 拍重音
+const TEXT = 'LOUDER';
+const SIZE = 240;
+const CY = 505; // 主字行中心（略高于画面中心，给下方副标题与音序器让位）
+const W_REST = 250; // 静止字重（细）
+const W_PEAK = 900;
+const W_FINAL = 780; // drop 后定格字重
+const DECAY = 9; // 中心字衰减窗
+const SPREAD = 1.6; // 每离中心一字，衰减窗多 1.6f
+const ECHO_IN = 64;
+const ECHO_DY = 0.85 * SIZE; // 回声行距
+const LAG = 2; // 回声比主字晚 2f
+
+const clamp01 = (x: number) => Math.min(1, Math.max(0, x));
+const hex = (c: string) => [1, 3, 5].map((k) => parseInt(c.slice(k, k + 2), 16));
+const mixRgb = (a: string, b: string, k: number) => {
+  const A = hex(a), B = hex(b);
+  return `rgb(${A.map((v, i) => Math.round(v + (B[i] - v) * k)).join(',')})`;
+};
+
+// 命中后幂衰减包络：t=0 → 1，t>=decay → 精确 0
+const envAt = (frame: number, beat: number, decay: number) => {
+  const t = frame - beat;
+  if (t < 0 || t >= decay) return 0;
+  return Math.pow(1 - t / decay, 0.8);
+};
+// 某帧最大包络 + 拍序号（拍距 14f > 最长衰减窗 13f，同一时刻只有一个活跃拍）
+const pulse = (frame: number, decay: number) => {
+  let env = 0;
+  let beat = -1;
+  BEATS.forEach((b, i) => {
+    const e = envAt(frame, b, decay);
+    if (e > env) { env = e; beat = i; }
+  });
+  return { env, beat };
+};
+// drop：冲到 1 再回落到定格值（0→1 的 0.75 ≈ 780 字重）
+const dropEnv = (frame: number, decay: number) => {
+  const t = frame - DROP;
+  if (t < 0) return 0;
+  const fin = (W_FINAL - W_REST) / (W_PEAK - W_REST);
+  return fin + (1 - fin) * Math.pow(1 - clamp01(t / (decay + 4)), 1.4);
+};
+
+const CHARS = TEXT.split('');
+const CENTER = (CHARS.length - 1) / 2;
+const GRAD = (i: number) => mixRgb(L.accent, L.accent2, i / (CHARS.length - 1)); // drop 后的紫→粉渐变（逐字取色）
+
+// 一行字：每个字钉在 900 字重槽位里原位变粗
+const Row: React.FC<{ frame: number; lag?: number; outline?: boolean; opacity?: number }> = ({ frame, lag = 0, outline = false, opacity = 1 }) => {
+  const f = frame - lag;
+  const drop = clamp01(f - DROP + 1) > 0;
+  return (
+    <div style={{ display: 'flex', whiteSpace: 'pre', ...type(SIZE, W_REST), letterSpacing: '-0.01em', lineHeight: 1, opacity }}>
+      {CHARS.map((ch, i) => {
+        const decay = DECAY + Math.max(0, Math.abs(i - CENTER) - 0.5) * SPREAD;
+        const { env: e0, beat } = pulse(f, decay);
+        const de = dropEnv(f, decay);
+        const e = Math.max(e0, de);
+        const weight = Math.round(W_REST + (W_PEAK - W_REST) * e);
+        const down = beat >= 0 && DOWN.has(beat);
+        const hitCol = down ? L.accent2 : L.accent;
+        const tint = drop ? 1 : Math.min(1, e0 * 1.25);
+        const col = drop ? GRAD(i) : mixRgb(L.ink, hitCol === L.accent2 ? L.accent2 : '#c9b8ff', tint);
+        const shine = drop ? 0.35 + 0.65 * Math.pow(1 - clamp01((f - DROP) / 24), 2) : e0;
+        return (
+          <span key={i} style={{ position: 'relative', display: 'inline-block' }}>
+            <span style={{ visibility: 'hidden', fontWeight: W_PEAK }}>{ch}</span>
+            <span style={{
+              position: 'absolute', left: '50%', top: 0, transform: 'translateX(-50%)', fontWeight: weight,
+              color: outline ? 'transparent' : col,
+              WebkitTextStroke: outline ? `2px ${alpha(drop ? L.accent : L.ink, 0.55)}` : undefined,
+              textShadow: !outline && shine > 0.05
+                ? `0 0 ${(18 * shine).toFixed(1)}px ${alpha(drop ? GRAD(i) : hitCol, 0.5 * shine)}, 0 0 ${(70 * shine).toFixed(1)}px ${alpha(drop ? GRAD(i) : hitCol, 0.35 * shine)}`
+                : 'none',
+            }}>
+              {ch}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+export const FontWeightPump: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { env, beat } = pulse(frame, DECAY);
+  const dEnv = frame >= DROP ? Math.pow(1 - clamp01((frame - DROP) / 16), 1.2) : 0;
+  const down = beat >= 0 && DOWN.has(beat);
+  const scaleX = 1 + 0.06 * (down ? env : 0) + 0.08 * dEnv; // 重音拍 / drop 横向撑开（transform 不改排版）
+  const intro = ramp(frame, 0, 12, EASE.out);
+  // 回声：64f 起淡入并拉开；每拍晚 2f 被推开 26px；drop 推开 60px 后归位
+  const echoIn = ramp(frame, ECHO_IN, 10, EASE.snappy);
+  const { env: eEnv } = pulse(frame - LAG, DECAY + 2);
+  const eDrop = frame >= DROP + LAG ? Math.pow(1 - clamp01((frame - DROP - LAG) / 18), 1.6) : 0;
+  const echoPush = mix(-40, 0, echoIn) + 26 * eEnv * echoIn + 60 * eDrop;
+  const breathe = 0.5 + 0.5 * Math.sin(frame / 9);
+  const glowA = 0.1 + 0.05 * breathe * (1 - clamp01(frame / 16)) + 0.3 * env * (down ? 1.3 : 1) + 0.4 * dEnv + (frame >= DROP ? 0.12 : 0);
+  // 横向光带：drop 时从左扫到右一次
+  const streak = ramp(frame, DROP, 16, EASE.out);
+  const bar = frame >= BEATS[4] ? 2 : 1;
+
+  const label: React.CSSProperties = { ...type(30, 600, { caps: true }), letterSpacing: '0.16em' };
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.5 }} fill={{ x: 0.85, y: 0.15 }} intensity={0.7} />
+
+      {/* 字后柔光：随拍明暗，只在标题身后 */}
+      <div style={{
+        position: 'absolute', left: 260, right: 260, top: CY - 240, height: 480, borderRadius: '50%',
+        background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(down || frame >= DROP ? L.accent2 : L.accent, Math.min(0.6, glowA))} 0%, ${alpha(L.accent, 0)} 100%)`,
+        mixBlendMode: 'screen',
+      }} />
+
+      {/* 眉题 */}
+      <div style={{ position: 'absolute', left: 120, top: 92, display: 'flex', alignItems: 'center', gap: 14, opacity: intro }}>
+        <ShotcraftMark size={46} tone="dark" />
+        {/* 字标全小写，不走眉题的 caps 样式 */}
+        <span style={{ ...type(30, 700), fontFamily: BRAND.font, letterSpacing: '0.03em', color: L.ink }}>{BRAND.name}</span>
+      </div>
+      <div style={{ position: 'absolute', right: 120, top: 96, ...label, color: L.ink2, opacity: intro, fontVariantNumeric: 'tabular-nums' }}>
+        128 BPM <span style={{ color: L.ink3, marginLeft: 18 }}>{`BAR ${bar} / 2`}</span>
+      </div>
+
+      {/* 回声行（描边）：上下各一行 */}
+      {[-1, 1].map((s) => (
+        <div key={s} style={{
+          position: 'absolute', left: 0, right: 0, top: CY - SIZE / 2 + s * (ECHO_DY + echoPush), display: 'flex', justifyContent: 'center',
+          opacity: echoIn, transform: `scaleX(${(1 + (scaleX - 1) * 0.5).toFixed(4)})`,
+        }}>
+          <Row frame={frame} lag={LAG} outline opacity={0.75} />
+        </div>
+      ))}
+
+      {/* 主字 */}
+      <div style={{
+        position: 'absolute', left: 0, right: 0, top: CY - SIZE / 2, display: 'flex', justifyContent: 'center',
+        transform: `scaleX(${scaleX.toFixed(4)})`,
+      }}>
+        <Row frame={frame} />
+      </div>
+
+      {/* drop 光带：一次，横穿主字 */}
+      {streak > 0 && streak < 1 && (
+        <div style={{
+          position: 'absolute', left: mix(-600, 1920, streak), top: CY - 4, width: 600, height: 6, borderRadius: 3,
+          background: `linear-gradient(90deg, ${alpha('#ffffff', 0)} 0%, ${alpha('#ffffff', 0.9)} 70%, ${alpha('#ffffff', 0)} 100%)`,
+          boxShadow: `0 0 30px ${alpha(L.accent2, 0.8)}`, opacity: 1 - streak * 0.6, mixBlendMode: 'screen',
+        }} />
+      )}
+
+      {/* 副标题：drop 后逐词升起 */}
+      <div style={{ position: 'absolute', left: 0, right: 0, top: 850, textAlign: 'center', ...type(40, 500), color: L.ink2 }}>
+        <TextReveal text="Beat-synced cuts, right on the drop." by="word" variant="rise" start={DROP + 8} each={14} gap={2.5} />
+      </div>
+
+      {/* 步进音序器：8 拍 + drop */}
+      <div style={{ position: 'absolute', left: 0, right: 0, top: 944, display: 'flex', justifyContent: 'center', gap: 16, opacity: intro }}>
+        {[...BEATS, DROP].map((b, i) => {
+          const isDrop = i === BEATS.length;
+          const e = isDrop ? dEnv : envAt(frame, b, DECAY);
+          const passed = frame >= b;
+          const dn = DOWN.has(i) || isDrop;
+          const col = dn ? L.accent2 : L.accent;
+          return (
+            <div key={i} style={{
+              width: isDrop ? 132 : 54, height: 54, borderRadius: 12, position: 'relative', marginLeft: i === 4 || isDrop ? 22 : 0,
+              background: alpha(L.ink, 0.05), boxShadow: `inset 0 0 0 1.5px ${alpha(dn ? L.accent2 : L.ink, dn ? 0.35 : 0.14)}`,
+              transform: `scale(${(1 + 0.12 * e).toFixed(3)})`,
+            }}>
+              <div style={{
+                position: 'absolute', inset: 0, borderRadius: 12, background: col,
+                opacity: e > 0.02 ? Math.max(isDrop ? 0.9 : 0, 0.35 + 0.65 * e) : passed ? (isDrop ? 0.9 : 0.28) : 0,
+                boxShadow: e > 0.02 ? `0 0 ${(30 * e).toFixed(1)}px ${alpha(col, 0.8)}` : 'none',
+              }} />
+              {isDrop && (
+                <span style={{
+                  position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  ...type(22, 800, { caps: true }), letterSpacing: '0.2em', color: passed ? L.onAccent : L.ink3,
+                }}>
+                  Drop
+                </span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};