hyper-animator-codex 0.7.0 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/type-assembly-moves/TextOnPath.tsx

@@ -0,0 +1,92 @@
+// 文字沿曲线流入（text-on-path）——字符沿一条上升贝塞尔曲线（像图表增长线）
+// 鱼贯滑入，行进中按切线角旋转；到达各自终点后再从"贴线姿态"lerp 到水平基线位
+// 拼成正常标题。曲线本身随字符前进同步 evolve（dashoffset 生长）。
+// 关键帧：字符 i 于 i*2 起跑、45f 沿线到达 t_i（out cubic）→ 到达后停 8f →
+// 12f 摆正到水平基线（y 拉平、rotate→0）→ 全部落定约 f103 → 103–150 真静止。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+// 上升贝塞尔：左下 → 右上，先缓后陡（增长线形状）
+const P0 = { x: 200, y: 820 };
+const P1 = { x: 760, y: 810 };
+const P2 = { x: 1240, y: 660 };
+const P3 = { x: 1500, y: 320 };
+
+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;
+};
+
+const TEXT = 'GROWTH ALL THE WAY';
+const N = TEXT.length;
+const CHAR_W = 46; // 64px fontWeight 800 的近似字宽
+const FINAL_Y = 300; // 水平基线（标题最终落位）
+const FINAL_X0 = 960 - (N * CHAR_W) / 2;
+
+export const TextOnPath: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 曲线 evolve：随最前字符推进同步生长
+  const evolve = interpolate(frame, [0, 82], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', left: 120, top: 96 }}>
+        <TitleBlock text="TEXT ON PATH" size={54} />
+      </div>
+      <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+        <path
+          d={`M ${P0.x} ${P0.y} C ${P1.x} ${P1.y}, ${P2.x} ${P2.y}, ${P3.x} ${P3.y}`}
+          fill="none" stroke={G.bar} strokeWidth={3}
+          pathLength={1} strokeDasharray={1} strokeDashoffset={1 - evolve}
+        />
+      </svg>
+      {TEXT.split('').map((ch, i) => {
+        if (ch === ' ') return null;
+        const tEnd = 0.12 + 0.82 * (i / (N - 1)); // 各字符沿线终点
+        const start = i * 2;
+        // 沿线推进：start 起 45f 到达 tEnd
+        const t = interpolate(frame, [start, start + 45], [0, tEnd], {
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+          easing: Easing.out(Easing.cubic),
+        });
+        const pOnCurve = bez(t);
+        const angOnCurve = tangent(t);
+        // 到达后停 8f，再 12f 摆正到水平基线
+        const settle = interpolate(frame, [start + 53, start + 65], [0, 1], {
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+          easing: Easing.inOut(Easing.cubic),
+        });
+        const x = pOnCurve.x + (FINAL_X0 + i * CHAR_W - pOnCurve.x) * settle;
+        const y = pOnCurve.y + (FINAL_Y - pOnCurve.y) * settle;
+        const ang = angOnCurve * (1 - settle);
+        const op = interpolate(frame, [start, start + 8], [0, 1], {
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+        });
+        return (
+          <div key={i} style={{
+            position: 'absolute', left: x, top: y, opacity: op,
+            transform: `translate(-50%, -50%) rotate(${ang}deg)`,
+            fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800,
+            fontSize: 64, color: G.ink,
+          }}>
+            {ch}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/type-assembly-moves/TrackingExpandReveal.tsx

@@ -0,0 +1,109 @@
+// 字距呼吸展开（tracking-expand-reveal）——电影片头字幕惯用的 letter-spacing 入场。
+// 标题 "BREATHE"（150px）出场时字符几乎叠压（相当于 letter-spacing -0.42em），
+// 50 帧内展开到 0.14em，同步 blur 10px→0、opacity 0.6→1、scaleX 0.92→1。
+// 不动 letter-spacing 本身（逐帧重排会抖）：容器常量 letterSpacing 0.14em 定终位，
+// 逐字符 span 用 translateX 手动插值——第 i 字起始位移 = (i - 中心) × 每缝差值 84px，
+// 全部挤向词心，位移只与字缝有关、与字宽无关，天然对中。
+// 关键帧：0–50 展开（Easing.out(poly(5)))＋去糊提亮 → 35–58 副标题淡入（≈主词展开 70% 时点）
+// → 58–130 全静止（≥72f，滤镜彻底摘除）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const WORD = 'BREATHE';
+const FS = 150; // 主词字号
+// 每个字缝的起始-终点差：(-0.42em) - (0.14em) = -0.56em = -84px @150px
+const GAP_DELTA = -0.56 * FS;
+
+export const TrackingExpandReveal: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 展开进度 0→1（0–50f，out poly(5)）
+  const p = interpolate(frame, [0, 50], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.poly(5)),
+  });
+  const blur = 10 * (1 - p);
+  const op = interpolate(p, [0, 1], [0.6, 1]);
+  const sx = interpolate(p, [0, 1], [0.92, 1]);
+  // 副标题：主词时间轴走到 70%（帧 35）起淡入
+  const subOp = interpolate(frame, [35, 58], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+
+  const N = WORD.length;
+  const center = (N - 1) / 2;
+  const settled = frame >= 50; // 展开完成后摘掉一切滤镜/变换，保证逐帧完全相同
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', left: 120, top: 96 }}>
+        <TitleBlock text="TRACKING EXPAND REVEAL" size={54} />
+      </div>
+
+      {/* 主词：容器 letterSpacing 恒为 0.14em（终态），字符仅做 translateX */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 430,
+          left: 0,
+          width: 1920,
+          display: 'flex',
+          justifyContent: 'center',
+          transform: settled ? undefined : `scaleX(${sx})`,
+          filter: settled ? undefined : `blur(${blur}px)`,
+          opacity: settled ? 1 : op,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: 'Helvetica, Arial, sans-serif',
+            fontWeight: 800,
+            fontSize: FS,
+            color: G.ink,
+            letterSpacing: '0.14em',
+            whiteSpace: 'pre',
+            // letter-spacing 只加在字后，整体左移半个缝宽找回视觉对中
+            marginLeft: 0.14 * FS * 0.5,
+          }}
+        >
+          {WORD.split('').map((ch, i) => {
+            const tx = (1 - p) * (i - center) * GAP_DELTA;
+            return (
+              <span
+                key={i}
+                style={{
+                  display: 'inline-block',
+                  transform: settled ? undefined : `translateX(${tx}px)`,
+                }}
+              >
+                {ch}
+              </span>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 副标题：主词展开 70% 时点淡入 */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 630,
+          left: 0,
+          width: 1920,
+          textAlign: 'center',
+          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontWeight: 500,
+          fontSize: 34,
+          color: G.mid,
+          letterSpacing: '0.32em',
+          opacity: frame >= 58 ? 1 : subOp,
+        }}
+      >
+        A CINEMATIC TITLE ENTRANCE
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/type-entrance-moves/LetterDropPhysics.tsx

@@ -0,0 +1,100 @@
+// 字符坠落堆积（letter-drop-physics）——FallingLetterAnimation。
+// "GRAVITY" 7 字符各自绝对定位，第 i 字符从帧 10+i*5 起下落：
+// ① 重力加速 y = D*(t/24)^2 掉 720px 到基线（地板线可见）；
+// ② 落地后 2 次衰减弹跳（高度 30% / 9%，抛物线 4u(1-u) 拼段），
+//    落地瞬间 rotate 到 seed hash ±6° 小歪角并保持；
+// ③ 帧 110 一拍：6f ease-out 全体齐整回正（rotate→0、偏移→0、scale 1.06→1），
+//    帧 116–150 真静止（≥25f）收尾。
+import React from 'react';
+import { useCurrentFrame, Easing } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+// 确定性伪随机
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+const WORD = 'GRAVITY';
+const SLOT_W = 150; // 每字符槽宽
+const FONT = 140;
+const WORD_W = WORD.length * SLOT_W; // 1050
+const LEFT = (1920 - WORD_W) / 2; // 435
+const REST_TOP = 452; // 字符落定后的 top
+const FLOOR_Y = REST_TOP + 152; // 地板线（视觉基线）
+
+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 easeOutCubic = Easing.out(Easing.cubic);
+const clamp01 = (x: number) => Math.min(1, Math.max(0, x));
+
+// 单字符纵向位移（相对基线，负 = 在上方）
+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;
+};
+
+export const LetterDropPhysics: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 帧 110 起的齐整回正进度
+  const snap = easeOutCubic(clamp01((frame - SNAP) / SNAP_DUR));
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, overflow: 'hidden', position: 'relative' }}>
+      {/* 地板线：字符落点的视觉基线 */}
+      <div style={{ position: 'absolute', left: LEFT - 60, top: FLOOR_Y, width: WORD_W + 120, height: 6, background: G.bar, borderRadius: 3 }} />
+
+      {WORD.split('').map((ch, i) => {
+        const start = 10 + i * 5;
+        const t = frame - start;
+        const y = dropY(t);
+        // 落地瞬间歪到 seed 小角度（±6°），落地前为 0
+        const tiltTarget = (h(i + 1) - 0.5) * 12;
+        const landP = clamp01((t - T_FALL) / 6);
+        const restJitter = (h(i + 11) - 0.5) * 10; // 落定后的 ±5px 竖向错位
+        // snap 一拍：歪角与错位齐整归零，scale 1.06→1 脉冲
+        const rot = tiltTarget * landP * (1 - snap);
+        const jitter = restJitter * landP * (1 - snap);
+        const scale = frame < SNAP ? 1 : 1 + 0.06 * (1 - snap);
+        return (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: LEFT + i * SLOT_W,
+              top: REST_TOP,
+              width: SLOT_W,
+              height: FONT,
+              display: 'flex',
+              alignItems: 'flex-end',
+              justifyContent: 'center',
+              transform: `translateY(${y + jitter}px) rotate(${rot}deg) scale(${scale})`,
+              transformOrigin: '50% 100%',
+              fontFamily: 'Helvetica, Arial, sans-serif',
+              fontWeight: 800,
+              fontSize: FONT,
+              lineHeight: 1,
+              color: G.ink,
+            }}
+          >
+            {ch}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/type-entrance-moves/ScrambleDecode.tsx

@@ -0,0 +1,90 @@
+// 乱码解码字（scramble-decode）——终端黑客感文字入场。
+// 标题 "DECODE SPEED" 每字符先高速跳随机字母/数字（每 2f 换一个，seed hash 取字符），
+// 从左到右逐个锁定：第 i 个字符在帧 20+i*6 锁定为真字符，锁定瞬间该字符反色闪
+// （G.ink 色块白字 2f）随即恢复。跳动期字符 G.mid，锁定后 G.ink。
+// 关键帧：0–20f 全员乱跳 → 20–86f 从左到右逐个锁定 → 87–130f 完全静止收尾。
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const TEXT = 'DECODE SPEED';
+const CHARSET = 'ABCDEF0123456789#$%&';
+const LOCK_START = 20; // 第 0 个字符锁定帧
+const LOCK_STEP = 6; // 相邻字符锁定间隔
+const FLASH_LEN = 2; // 锁定反色闪持续帧数
+
+// 帧确定伪随机
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+export const ScrambleDecode: React.FC = () => {
+  const frame = useCurrentFrame();
+  const chars = TEXT.split('');
+  const lockedCount = chars.filter((c, i) => c === ' ' || frame >= LOCK_START + i * LOCK_STEP).length;
+  const allLocked = lockedCount === chars.length;
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 48,
+      }}
+    >
+      <div
+        style={{
+          fontFamily: 'ui-monospace, Menlo, Monaco, monospace',
+          fontWeight: 800,
+          fontSize: 120,
+          letterSpacing: 2,
+          display: 'flex',
+        }}
+      >
+        {chars.map((ch, i) => {
+          if (ch === ' ') {
+            return <span key={i} style={{ display: 'inline-block', width: '0.7em' }} />;
+          }
+          const lockFrame = LOCK_START + i * LOCK_STEP;
+          const locked = frame >= lockFrame;
+          const flashing = locked && frame < lockFrame + FLASH_LEN;
+          // 跳动期：每 2 帧换一个伪随机字符
+          const tick = Math.floor(frame / 2);
+          const scrambleChar = CHARSET[Math.floor(h(i * 101 + tick * 7 + 13) * CHARSET.length)];
+          const shown = locked ? ch : scrambleChar;
+          return (
+            <span
+              key={i}
+              style={{
+                display: 'inline-block',
+                width: '1ch',
+                textAlign: 'center',
+                color: flashing ? G.card : locked ? G.ink : G.mid,
+                background: flashing ? G.ink : 'transparent',
+              }}
+            >
+              {shown}
+            </span>
+          );
+        })}
+      </div>
+      {/* 底部进度提示条：已锁定字符数比例，帮助读出"从左到右扫过"的推进感 */}
+      <div style={{ width: 900, height: 10, background: G.line, borderRadius: 5, overflow: 'hidden' }}>
+        <div
+          style={{
+            width: `${(lockedCount / chars.length) * 100}%`,
+            height: '100%',
+            background: allLocked ? G.ink : G.mid,
+            borderRadius: 5,
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/type-rhythm-sync/FontWeightPump.tsx

@@ -0,0 +1,124 @@
+// 字重脉冲（font-weight-pump）——标题笔画随节拍变粗又弹回，像文字跟着低音鼓蹦迪。
+// 节拍每 20f 一拍：帧 30/50/70/90/110 命中。命中瞬间 -webkit-text-stroke 0→10px
+// 跳满，随后 10f 幂衰减 (1-t/10)^0.8 弹回 0；fontWeight 在命中窗口 400→900 离散跳变
+// （env>0.15），配合 stroke 连续衰减读作"连续变粗"。第 3、5 拍（帧 70/110）为重音，
+// 额外 scaleX 1→1.08 同衰减（transform 缩放不改排版）。底部 5 个节拍点作节拍参照。
+// 结构：0–29f 静止 hold；30–119f 五拍脉冲；120–139f 真静止收尾（20f，110+10=120 无残留）。
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const BEATS = [30, 50, 70, 90, 110];
+const ACCENTS = new Set([2, 4]); // 第 3、5 拍重音
+const DECAY = 10; // 衰减帧数
+
+// 命中后 10f 幂衰减包络：t=0 → 1，t>=10 → 精确 0（保证结尾真静止）
+const envAt = (frame: number, beat: number) => {
+  const t = frame - beat;
+  if (t < 0 || t >= DECAY) return 0;
+  return Math.pow(1 - t / DECAY, 0.8);
+};
+
+export const FontWeightPump: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 只可能有一个活跃拍（拍距 20f > 衰减 10f），取最大包络及其拍序号
+  let env = 0;
+  let activeBeat = -1;
+  BEATS.forEach((b, i) => {
+    const e = envAt(frame, b);
+    if (e > env) {
+      env = e;
+      activeBeat = i;
+    }
+  });
+
+  const strokeW = 10 * env; // 笔画粗细连续衰减
+  const weight = env > 0.15 ? 900 : 400; // 命中窗口离散跳字重
+  const accent = activeBeat >= 0 && ACCENTS.has(activeBeat);
+  const scaleX = accent ? 1 + 0.08 * env : 1; // 重音拍变宽一挡
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        position: 'relative',
+        overflow: 'hidden',
+        fontFamily: 'Helvetica, Arial, sans-serif',
+      }}
+    >
+      {/* 定宽居中容器，transform 缩放不改排版 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          width: 1920,
+          height: 1080,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            fontSize: 150,
+            fontWeight: weight,
+            color: G.ink,
+            letterSpacing: 6,
+            whiteSpace: 'nowrap',
+            WebkitTextStroke: `${strokeW}px ${G.ink}`,
+            transform: `scaleX(${scaleX})`,
+            transformOrigin: 'center center',
+          }}
+        >
+          PUMP IT UP
+        </div>
+      </div>
+
+      {/* 底部节拍点：5 个，命中哪拍哪个点闪 ink 并放大 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          bottom: 130,
+          width: 1920,
+          display: 'flex',
+          justifyContent: 'center',
+          gap: 56,
+        }}
+      >
+        {BEATS.map((b, i) => {
+          const e = envAt(frame, b);
+          const dotOpacity = e > 0.02 ? Math.min(1, 0.3 + e * 1.2) : 0;
+          const dotScale = 1 + 0.8 * e;
+          return (
+            <div
+              key={i}
+              style={{
+                width: 26,
+                height: 26,
+                borderRadius: 13,
+                background: G.line,
+                position: 'relative',
+                transform: `scale(${dotScale})`,
+              }}
+            >
+              <div
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  borderRadius: 13,
+                  background: G.ink,
+                  opacity: dotOpacity,
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/type-rhythm-sync/KaraokeFillSync.tsx

@@ -0,0 +1,93 @@
+// 卡拉OK填色随读（karaoke-fill-sync）——旁白读到哪个词，哪个词就被深色从左到右
+// 点亮。两行标语 "SHIP FASTER / BREAK NOTHING"，每个词双层同文本叠放：底层 G.line
+// 浅灰字，上层 G.ink 深字用 clip-path: inset(0 X% 0 0) 按词内进度线性填充（逐词独立
+// 叠层，clip 百分比即词内进度，无需量测词在整行的像素占比）。词级时间表模拟语速：
+// SHIP 20–38、FASTER 42–75（长词慢读）、BREAK 85–103、NOTHING 107–130，词间停顿。
+// 正在填的词底下有 8px 深色下划线跟随填充右缘作读指。0–19f hold；130–149f 真静止。
+import React from 'react';
+import { useCurrentFrame, interpolate } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+type Word = { text: string; start: number; end: number };
+
+const LINES: Word[][] = [
+  [
+    { text: 'SHIP', start: 20, end: 38 },
+    { text: 'FASTER', start: 42, end: 75 },
+  ],
+  [
+    { text: 'BREAK', start: 85, end: 103 },
+    { text: 'NOTHING', start: 107, end: 130 },
+  ],
+];
+
+const KaraokeWord: React.FC<{ word: Word; frame: number }> = ({ word, frame }) => {
+  // 词内 linear 填充进度，clamp 保证读完保持
+  const p = interpolate(frame, [word.start, word.end], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const active = frame >= word.start && frame < word.end; // 正在读这个词
+  return (
+    <span style={{ position: 'relative', display: 'inline-block' }}>
+      {/* 底层：浅灰未读字 */}
+      <span style={{ color: G.line }}>{word.text}</span>
+      {/* 上层：深字按进度从左到右揭开 */}
+      <span
+        style={{
+          position: 'absolute',
+          inset: 0,
+          color: G.ink,
+          clipPath: `inset(0 ${(1 - p) * 100}% 0 0)`,
+        }}
+      >
+        {word.text}
+      </span>
+      {/* 读指下划线：只在正在填的词下出现，右缘跟随填充进度 */}
+      {active && (
+        <span
+          style={{
+            position: 'absolute',
+            left: 0,
+            bottom: -14,
+            width: `${p * 100}%`,
+            height: 8,
+            background: G.ink,
+          }}
+        />
+      )}
+    </span>
+  );
+};
+
+export const KaraokeFillSync: React.FC = () => {
+  const frame = useCurrentFrame();
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        paddingLeft: 240,
+        boxSizing: 'border-box',
+        fontFamily: 'Helvetica, Arial, sans-serif',
+        fontSize: 130,
+        fontWeight: 800,
+        letterSpacing: 2,
+        lineHeight: 1.45,
+      }}
+    >
+      {LINES.map((words, li) => (
+        <div key={li} style={{ display: 'flex', gap: 48 }}>
+          {words.map((w) => (
+            <KaraokeWord key={w.text} word={w} frame={frame} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};