dsh-drawai 0.4.2 → 0.4.4

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

@@ -1,141 +1,141 @@
-// 卡拉OK填色随读（karaoke-fill-sync）——旁白读到哪个词，哪个词就从左到右被填亮。
-// 两行居中标语 "FRAME MOTION / CRAFT SHOTS"（video-shotcraft 短句 Frame motion. Craft the shot. 的四词版），
-// 每个词双层同文本叠放：底层低透明墨色未读字，
-// 上层用 mask 按词内进度线性揭开（逐词独立叠层，揭开百分比即词内进度，无需量测词宽；
-// 揭开前沿是 ±4% 的柔边而不是硬切口）。正在读的词填强调色，读完 10f 内退成主墨色——
-// 强调色只属于"此刻"。词级时间表模拟语速：FRAME 20–38、MOTION 42–75（长词慢读）、
-// CRAFT 85–103、SHOTS 107–130，词间停顿（换气）。
-// 读指：正在填的词底下 8px 强调色圆角下划线，右缘跟随填充前沿；读完从左往右收掉（6f），不留线。
-// 底部一条旁白波形作静音预览的参照：词内起伏、换气处回落，已播部分着色。
-// 0–19f hold；130–149f 真静止（最后的退色 / 收线在 f140 前完成）。
-import React from 'react';
-import { useCurrentFrame, interpolate } from 'remotion';
-import { G } from '../../_fixtures/Fixtures';
-import { Backdrop, EASE, FONT, ramp, tracking } from '../../_fixtures/Polish';
-
-export const KARAOKE_FILL_SYNC_DURATION = 150;
-
-type Word = { text: string; start: number; end: number };
-
-const LINES: Word[][] = [
-  [
-    { text: 'FRAME', start: 20, end: 38 },
-    { text: 'MOTION', start: 42, end: 75 },
-  ],
-  [
-    { text: 'CRAFT', start: 85, end: 103 },
-    { text: 'SHOTS', start: 107, end: 130 },
-  ],
-];
-const ALL = LINES.flat();
-const SIZE = 150;
-const FEATHER = 4; // 揭开前沿柔边（%）
-const ACC = [91, 99, 211]; // G.accent
-const INK = [23, 24, 28]; // G.ink1
-
-const rgbMix = (a: number[], b: number[], k: number) =>
-  `rgb(${a.map((v, i) => Math.round(v + (b[i] - v) * k)).join(',')})`;
-
-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 edge = p * (100 + FEATHER * 2) - FEATHER; // 柔边中心（%），p=0/1 时完全藏 / 完全露
-  const mask = `linear-gradient(90deg, #000 ${(edge - FEATHER).toFixed(2)}%, transparent ${(edge + FEATHER).toFixed(2)}%)`;
-  const settle = ramp(frame, word.end, 10, EASE.out); // 读完退成主墨色
-  const fillColor = rgbMix(ACC, INK, settle);
-  // 读指：读中跟随前沿，读完 6f 从左往右收掉
-  const retract = ramp(frame, word.end, 6, EASE.swift);
-  const showLine = frame >= word.start && retract < 1;
-  return (
-    <span style={{ position: 'relative', display: 'inline-block' }}>
-      {/* 底层：低透明墨色未读字 */}
-      <span style={{ color: 'rgba(23,24,28,0.13)' }}>{word.text}</span>
-      {/* 上层：按进度从左到右柔边揭开 */}
-      {p > 0 && (
-        <span style={{
-          position: 'absolute', inset: 0, color: fillColor,
-          WebkitMaskImage: mask, maskImage: mask,
-        }}>
-          {word.text}
-        </span>
-      )}
-      {/* 读指下划线：右缘跟随填充前沿，读完从左收 */}
-      {showLine && (
-        <span style={{
-          position: 'absolute', bottom: -6, height: 8, borderRadius: 4,
-          left: `${(retract * p * 100).toFixed(2)}%`,
-          width: `${(Math.max(0, p - retract * p) * 100).toFixed(2)}%`,
-          background: G.accent, boxShadow: '0 2px 10px rgba(91,99,211,0.35)',
-        }} />
-      )}
-    </span>
-  );
-};
-
-// 旁白波形：48 根竖条，按"此刻是否在读词"给包络，确定性哈希给起伏
-const BARS = 48;
-const WAVE_W = 560;
-const WAVE_T0 = 14;
-const WAVE_T1 = 136;
-const h = (n: number) => {
-  const s = Math.sin(n * 91.7 + 13.1) * 43758.5453;
-  return s - Math.floor(s);
-};
-const speechAt = (f: number) => {
-  let e = 0.06;
-  for (const w of ALL) {
-    const fadeIn = ramp(f, w.start - 2, 3, EASE.out);
-    const fadeOut = 1 - ramp(f, w.end - 2, 4, EASE.out);
-    e = Math.max(e, fadeIn * fadeOut);
-  }
-  return e;
-};
-
-export const KaraokeFillSync: React.FC = () => {
-  const frame = useCurrentFrame();
-  const playhead = (frame - WAVE_T0) / (WAVE_T1 - WAVE_T0);
-  return (
-    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden', fontFamily: FONT.sans }}>
-      <Backdrop tone="light" light={{ x: 0.5, y: 0.22 }} accent="#5b63d3" />
-
-      {/* 标语：两行居中 */}
-      <div style={{
-        position: 'absolute', left: 0, right: 0, top: 0, bottom: 60,
-        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-        fontSize: SIZE, fontWeight: 800, letterSpacing: tracking(SIZE, true), lineHeight: 1.18,
-      }}>
-        {LINES.map((words, li) => (
-          <div key={li} style={{ display: 'flex', gap: 56 }}>
-            {words.map((w) => (
-              <KaraokeWord key={w.text} word={w} frame={frame} />
-            ))}
-          </div>
-        ))}
-      </div>
-
-      {/* 旁白波形：已播部分强调色，未播部分淡墨 */}
-      <div style={{
-        position: 'absolute', left: 960 - WAVE_W / 2, top: 860, width: WAVE_W, height: 56,
-        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-      }}>
-        {Array.from({ length: BARS }, (_, i) => {
-          const u = i / (BARS - 1);
-          const at = WAVE_T0 + u * (WAVE_T1 - WAVE_T0); // 这根条对应的旁白时刻
-          const env = speechAt(at);
-          const amp = 0.12 + env * (0.35 + 0.65 * h(i * 3 + 1));
-          const played = u <= playhead;
-          return (
-            <div key={i} style={{
-              width: 4, height: `${(amp * 100).toFixed(1)}%`, borderRadius: 2,
-              background: played ? G.accent : 'rgba(23,24,28,0.16)',
-              opacity: played ? 0.9 : 1,
-            }} />
-          );
-        })}
-      </div>
-    </div>
-  );
-};
+// 卡拉OK填色随读（karaoke-fill-sync）——旁白读到哪个词，哪个词就从左到右被填亮。
+// 两行居中标语 "FRAME MOTION / CRAFT SHOTS"（video-shotcraft 短句 Frame motion. Craft the shot. 的四词版），
+// 每个词双层同文本叠放：底层低透明墨色未读字，
+// 上层用 mask 按词内进度线性揭开（逐词独立叠层，揭开百分比即词内进度，无需量测词宽；
+// 揭开前沿是 ±4% 的柔边而不是硬切口）。正在读的词填强调色，读完 10f 内退成主墨色——
+// 强调色只属于"此刻"。词级时间表模拟语速：FRAME 20–38、MOTION 42–75（长词慢读）、
+// CRAFT 85–103、SHOTS 107–130，词间停顿（换气）。
+// 读指：正在填的词底下 8px 强调色圆角下划线，右缘跟随填充前沿；读完从左往右收掉（6f），不留线。
+// 底部一条旁白波形作静音预览的参照：词内起伏、换气处回落，已播部分着色。
+// 0–19f hold；130–149f 真静止（最后的退色 / 收线在 f140 前完成）。
+import React from 'react';
+import { useCurrentFrame, interpolate } from 'remotion';
+import { G } from '../../_fixtures/Fixtures';
+import { Backdrop, EASE, FONT, ramp, tracking } from '../../_fixtures/Polish';
+
+export const KARAOKE_FILL_SYNC_DURATION = 150;
+
+type Word = { text: string; start: number; end: number };
+
+const LINES: Word[][] = [
+  [
+    { text: 'FRAME', start: 20, end: 38 },
+    { text: 'MOTION', start: 42, end: 75 },
+  ],
+  [
+    { text: 'CRAFT', start: 85, end: 103 },
+    { text: 'SHOTS', start: 107, end: 130 },
+  ],
+];
+const ALL = LINES.flat();
+const SIZE = 150;
+const FEATHER = 4; // 揭开前沿柔边（%）
+const ACC = [91, 99, 211]; // G.accent
+const INK = [23, 24, 28]; // G.ink1
+
+const rgbMix = (a: number[], b: number[], k: number) =>
+  `rgb(${a.map((v, i) => Math.round(v + (b[i] - v) * k)).join(',')})`;
+
+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 edge = p * (100 + FEATHER * 2) - FEATHER; // 柔边中心（%），p=0/1 时完全藏 / 完全露
+  const mask = `linear-gradient(90deg, #000 ${(edge - FEATHER).toFixed(2)}%, transparent ${(edge + FEATHER).toFixed(2)}%)`;
+  const settle = ramp(frame, word.end, 10, EASE.out); // 读完退成主墨色
+  const fillColor = rgbMix(ACC, INK, settle);
+  // 读指：读中跟随前沿，读完 6f 从左往右收掉
+  const retract = ramp(frame, word.end, 6, EASE.swift);
+  const showLine = frame >= word.start && retract < 1;
+  return (
+    <span style={{ position: 'relative', display: 'inline-block' }}>
+      {/* 底层：低透明墨色未读字 */}
+      <span style={{ color: 'rgba(23,24,28,0.13)' }}>{word.text}</span>
+      {/* 上层：按进度从左到右柔边揭开 */}
+      {p > 0 && (
+        <span style={{
+          position: 'absolute', inset: 0, color: fillColor,
+          WebkitMaskImage: mask, maskImage: mask,
+        }}>
+          {word.text}
+        </span>
+      )}
+      {/* 读指下划线：右缘跟随填充前沿，读完从左收 */}
+      {showLine && (
+        <span style={{
+          position: 'absolute', bottom: -6, height: 8, borderRadius: 4,
+          left: `${(retract * p * 100).toFixed(2)}%`,
+          width: `${(Math.max(0, p - retract * p) * 100).toFixed(2)}%`,
+          background: G.accent, boxShadow: '0 2px 10px rgba(91,99,211,0.35)',
+        }} />
+      )}
+    </span>
+  );
+};
+
+// 旁白波形：48 根竖条，按"此刻是否在读词"给包络，确定性哈希给起伏
+const BARS = 48;
+const WAVE_W = 560;
+const WAVE_T0 = 14;
+const WAVE_T1 = 136;
+const h = (n: number) => {
+  const s = Math.sin(n * 91.7 + 13.1) * 43758.5453;
+  return s - Math.floor(s);
+};
+const speechAt = (f: number) => {
+  let e = 0.06;
+  for (const w of ALL) {
+    const fadeIn = ramp(f, w.start - 2, 3, EASE.out);
+    const fadeOut = 1 - ramp(f, w.end - 2, 4, EASE.out);
+    e = Math.max(e, fadeIn * fadeOut);
+  }
+  return e;
+};
+
+export const KaraokeFillSync: React.FC = () => {
+  const frame = useCurrentFrame();
+  const playhead = (frame - WAVE_T0) / (WAVE_T1 - WAVE_T0);
+  return (
+    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden', fontFamily: FONT.sans }}>
+      <Backdrop tone="light" light={{ x: 0.5, y: 0.22 }} accent="#5b63d3" />
+
+      {/* 标语：两行居中 */}
+      <div style={{
+        position: 'absolute', left: 0, right: 0, top: 0, bottom: 60,
+        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+        fontSize: SIZE, fontWeight: 800, letterSpacing: tracking(SIZE, true), lineHeight: 1.18,
+      }}>
+        {LINES.map((words, li) => (
+          <div key={li} style={{ display: 'flex', gap: 56 }}>
+            {words.map((w) => (
+              <KaraokeWord key={w.text} word={w} frame={frame} />
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {/* 旁白波形：已播部分强调色，未播部分淡墨 */}
+      <div style={{
+        position: 'absolute', left: 960 - WAVE_W / 2, top: 860, width: WAVE_W, height: 56,
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+      }}>
+        {Array.from({ length: BARS }, (_, i) => {
+          const u = i / (BARS - 1);
+          const at = WAVE_T0 + u * (WAVE_T1 - WAVE_T0); // 这根条对应的旁白时刻
+          const env = speechAt(at);
+          const amp = 0.12 + env * (0.35 + 0.65 * h(i * 3 + 1));
+          const played = u <= playhead;
+          return (
+            <div key={i} style={{
+              width: 4, height: `${(amp * 100).toFixed(1)}%`, borderRadius: 2,
+              background: played ? G.accent : 'rgba(23,24,28,0.16)',
+              opacity: played ? 0.9 : 1,
+            }} />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/typewriter-moves/TypewriterErrorRetype.tsx

@@ -1,137 +1,137 @@
-// typewriter-error-retype｜打字机误删重打
-// 浅底居中大字（眉题 Introducing video-shotcraft）：f2 起 2f/字符打出 "just a slideshow"(16 字符) → f32–48 停顿
-// 16f(光标闪两下=犹豫) → f48 起 1.5f/字符逐字退格删掉 "a slideshow"(11 字符，
-// 字符直接消失) → f68 起 1.5f/字符果断打出 "your cinematic crew"(19 字符，
-// f95 打完) → 光标闪两个周期(10f/周期)后 f110 永久熄灭。节奏三档：打 2f/删
-// 1.5f/重打 1.5f 且无停顿。打完的同时（f96–110，与光标完稿两闪并行）一道强调色马克笔底色
-// 从左到右铺到 "cinematic crew" 下半身给宣言一个落定；f110 后全静止，160f 总长 → 收尾真静止 50f。
-// 等宽感：逐字符固定宽 span（等宽字体 100px，60px 槽），无 letter-spacing 动画。全部帧确定。
-// 质感：柔光底 + 颗粒，主墨色近黑，光标是 6px 强调色圆角竖条。
-import React from 'react';
-import { useCurrentFrame } from 'remotion';
-import { G } from '../../_fixtures/Fixtures';
-import { Backdrop, EASE, FONT, ramp } from '../../_fixtures/Polish';
-import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
-
-export const TYPEWRITER_ERROR_RETYPE_DURATION = 160;
-
-const TEXT1 = 'just a slideshow'; // 16 chars
-const KEEP = 5; // "just " 保留
-const DEL = TEXT1.length - KEEP; // 11 chars 待删
-const TEXT2 = 'your cinematic crew'; // 19 chars
-
-const T1 = 2; // 第一遍打字起点，2f/字符
-const PAUSE_START = T1 + (TEXT1.length - 1) * 2; // f32 打完
-const DS = PAUSE_START + 16; // f48 开删，1.5f/字符
-const RS = 68; // 重打起点，1.5f/字符（删完 f64.5 后小顿 3.5f）
-const TYPE2_END = RS + (TEXT2.length - 1) * 1.5; // f95 打完
-const CURSOR_OFF = 115; // 两个 10f 闪烁周期后熄灭（最后一次视觉变化 f110）
-
-const SIZE = 100; // 字号
-const CHAR_W = 60; // 等宽字体 100px 的字符宽（0.6em）
-const LEFT = (1920 - 24 * CHAR_W) / 2; // 最终句 24 字符整体居中，打字过程左缘锚定不横移
-const HL_START = 96; // 马克笔底色起：打完即铺，和完稿两闪同时，f110 前铺完
-const HL_DUR = 14;
-const HL_FROM = 10; // "cinematic crew" 起始字符序号（最终句 "just your cinematic crew" 第 10 字符起）
-const HL_LEN = 14;
-
-// 光标可见性：打字/删除时常亮；停顿段 8f 周期闪两下；打完后 10f 周期闪两下；之后永灭
-const cursorOn = (f: number): boolean => {
-  if (f >= CURSOR_OFF) return false;
-  if (f >= TYPE2_END) {
-    // f95 起：on[95,100) off[100,105) on[105,110) off[110,115)
-    return Math.floor((f - TYPE2_END) / 5) % 2 === 0;
-  }
-  if (f >= DS) return true; // 删除 + 重打：常亮（果断）
-  if (f >= PAUSE_START) {
-    // 犹豫段 f32–48：on[32,36) off[36,40) on[40,44) off[44,48)
-    return Math.floor((f - PAUSE_START) / 4) % 2 === 0;
-  }
-  return true; // 第一遍打字：常亮
-};
-
-export const TypewriterErrorRetype: React.FC = () => {
-  const f = useCurrentFrame();
-
-  // 第一遍已打出字符数
-  const n1 = f < T1 ? 0 : Math.min(TEXT1.length, Math.floor((f - T1) / 2) + 1);
-  // 已删除字符数（从尾部删）
-  const removed = f < DS ? 0 : Math.min(DEL, Math.floor((f - DS) / 1.5) + 1);
-  // 第二遍已打出字符数
-  const n2 = f < RS ? 0 : Math.min(TEXT2.length, Math.floor((f - RS) / 1.5) + 1);
-
-  const shown =
-    TEXT1.slice(0, Math.max(KEEP, n1 - removed)).slice(0, n1) +
-    TEXT2.slice(0, n2);
-
-  const chars = shown.split('');
-
-  const hl = ramp(f, HL_START, HL_DUR, EASE.snappy);
-
-  return (
-    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden' }}>
-      <Backdrop tone="light" light={{ x: 0.42, y: 0.3 }} accent="#5b63d3" />
-      {/* 马克笔底色：只铺在宣言词下半身，左→右 */}
-      {hl > 0 && (
-        <div style={{
-          position: 'absolute', left: LEFT + HL_FROM * CHAR_W - 10, top: 540 + SIZE * 0.06,
-          width: (HL_LEN * CHAR_W + 20) * hl, height: SIZE * 0.36, borderRadius: 6,
-          background: 'linear-gradient(90deg, rgba(91,99,211,0.26) 0%, rgba(91,99,211,0.20) 100%)',
-        }} />
-      )}
-      {/* 眉题：与打字行左缘对齐，开场 10f 淡入，交代"这是一句产品介绍"——video-shotcraft 标志 + 小写品牌名 */}
-      <div style={{
-        position: 'absolute', left: LEFT + 6, top: 540 - SIZE * 0.55 - 70,
-        display: 'flex', alignItems: 'center', gap: 12,
-        fontFamily: FONT.sans, fontSize: 34, fontWeight: 500, letterSpacing: '0.01em', color: G.ink3,
-        opacity: ramp(f, 0, 10, EASE.out),
-      }}>
-        <ShotcraftMark size={40} tone="light" style={{ marginTop: -2 }} />
-        <span>Introducing <span style={{ fontFamily: BRAND.font, fontWeight: 700, letterSpacing: '0.03em', color: G.ink1 }}>{BRAND.name}</span></span>
-      </div>
-      {/* 左缘锚定：打字过程不横移（真打字机感）；行垂直居中于 540 */}
-      <div
-        style={{
-          position: 'absolute',
-          left: LEFT,
-          top: 540 - (SIZE * 1.1) / 2,
-          display: 'flex',
-          alignItems: 'center',
-          height: SIZE * 1.1,
-        }}
-      >
-        {chars.map((c, i) => (
-          <span
-            key={i}
-            style={{
-              display: 'inline-block',
-              width: CHAR_W,
-              textAlign: 'center',
-              fontFamily: FONT.mono,
-              fontSize: SIZE,
-              fontWeight: 600,
-              color: G.ink1,
-              lineHeight: 1.1,
-            }}
-          >
-            {c === ' ' ? '\u00a0' : c}
-          </span>
-        ))}
-        {/* 光标：强调色竖条，条件挂载而非 opacity 0 */}
-        {cursorOn(f) && (
-          <span
-            style={{
-              display: 'inline-block',
-              width: 6,
-              height: SIZE * 0.98,
-              marginLeft: 4,
-              borderRadius: 3,
-              background: G.accent,
-              boxShadow: '0 0 12px rgba(91,99,211,0.35)',
-            }}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
+// typewriter-error-retype｜打字机误删重打
+// 浅底居中大字（眉题 Introducing video-shotcraft）：f2 起 2f/字符打出 "just a slideshow"(16 字符) → f32–48 停顿
+// 16f(光标闪两下=犹豫) → f48 起 1.5f/字符逐字退格删掉 "a slideshow"(11 字符，
+// 字符直接消失) → f68 起 1.5f/字符果断打出 "your cinematic crew"(19 字符，
+// f95 打完) → 光标闪两个周期(10f/周期)后 f110 永久熄灭。节奏三档：打 2f/删
+// 1.5f/重打 1.5f 且无停顿。打完的同时（f96–110，与光标完稿两闪并行）一道强调色马克笔底色
+// 从左到右铺到 "cinematic crew" 下半身给宣言一个落定；f110 后全静止，160f 总长 → 收尾真静止 50f。
+// 等宽感：逐字符固定宽 span（等宽字体 100px，60px 槽），无 letter-spacing 动画。全部帧确定。
+// 质感：柔光底 + 颗粒，主墨色近黑，光标是 6px 强调色圆角竖条。
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { G } from '../../_fixtures/Fixtures';
+import { Backdrop, EASE, FONT, ramp } from '../../_fixtures/Polish';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const TYPEWRITER_ERROR_RETYPE_DURATION = 160;
+
+const TEXT1 = 'just a slideshow'; // 16 chars
+const KEEP = 5; // "just " 保留
+const DEL = TEXT1.length - KEEP; // 11 chars 待删
+const TEXT2 = 'your cinematic crew'; // 19 chars
+
+const T1 = 2; // 第一遍打字起点，2f/字符
+const PAUSE_START = T1 + (TEXT1.length - 1) * 2; // f32 打完
+const DS = PAUSE_START + 16; // f48 开删，1.5f/字符
+const RS = 68; // 重打起点，1.5f/字符（删完 f64.5 后小顿 3.5f）
+const TYPE2_END = RS + (TEXT2.length - 1) * 1.5; // f95 打完
+const CURSOR_OFF = 115; // 两个 10f 闪烁周期后熄灭（最后一次视觉变化 f110）
+
+const SIZE = 100; // 字号
+const CHAR_W = 60; // 等宽字体 100px 的字符宽（0.6em）
+const LEFT = (1920 - 24 * CHAR_W) / 2; // 最终句 24 字符整体居中，打字过程左缘锚定不横移
+const HL_START = 96; // 马克笔底色起：打完即铺，和完稿两闪同时，f110 前铺完
+const HL_DUR = 14;
+const HL_FROM = 10; // "cinematic crew" 起始字符序号（最终句 "just your cinematic crew" 第 10 字符起）
+const HL_LEN = 14;
+
+// 光标可见性：打字/删除时常亮；停顿段 8f 周期闪两下；打完后 10f 周期闪两下；之后永灭
+const cursorOn = (f: number): boolean => {
+  if (f >= CURSOR_OFF) return false;
+  if (f >= TYPE2_END) {
+    // f95 起：on[95,100) off[100,105) on[105,110) off[110,115)
+    return Math.floor((f - TYPE2_END) / 5) % 2 === 0;
+  }
+  if (f >= DS) return true; // 删除 + 重打：常亮（果断）
+  if (f >= PAUSE_START) {
+    // 犹豫段 f32–48：on[32,36) off[36,40) on[40,44) off[44,48)
+    return Math.floor((f - PAUSE_START) / 4) % 2 === 0;
+  }
+  return true; // 第一遍打字：常亮
+};
+
+export const TypewriterErrorRetype: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // 第一遍已打出字符数
+  const n1 = f < T1 ? 0 : Math.min(TEXT1.length, Math.floor((f - T1) / 2) + 1);
+  // 已删除字符数（从尾部删）
+  const removed = f < DS ? 0 : Math.min(DEL, Math.floor((f - DS) / 1.5) + 1);
+  // 第二遍已打出字符数
+  const n2 = f < RS ? 0 : Math.min(TEXT2.length, Math.floor((f - RS) / 1.5) + 1);
+
+  const shown =
+    TEXT1.slice(0, Math.max(KEEP, n1 - removed)).slice(0, n1) +
+    TEXT2.slice(0, n2);
+
+  const chars = shown.split('');
+
+  const hl = ramp(f, HL_START, HL_DUR, EASE.snappy);
+
+  return (
+    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden' }}>
+      <Backdrop tone="light" light={{ x: 0.42, y: 0.3 }} accent="#5b63d3" />
+      {/* 马克笔底色：只铺在宣言词下半身，左→右 */}
+      {hl > 0 && (
+        <div style={{
+          position: 'absolute', left: LEFT + HL_FROM * CHAR_W - 10, top: 540 + SIZE * 0.06,
+          width: (HL_LEN * CHAR_W + 20) * hl, height: SIZE * 0.36, borderRadius: 6,
+          background: 'linear-gradient(90deg, rgba(91,99,211,0.26) 0%, rgba(91,99,211,0.20) 100%)',
+        }} />
+      )}
+      {/* 眉题：与打字行左缘对齐，开场 10f 淡入，交代"这是一句产品介绍"——video-shotcraft 标志 + 小写品牌名 */}
+      <div style={{
+        position: 'absolute', left: LEFT + 6, top: 540 - SIZE * 0.55 - 70,
+        display: 'flex', alignItems: 'center', gap: 12,
+        fontFamily: FONT.sans, fontSize: 34, fontWeight: 500, letterSpacing: '0.01em', color: G.ink3,
+        opacity: ramp(f, 0, 10, EASE.out),
+      }}>
+        <ShotcraftMark size={40} tone="light" style={{ marginTop: -2 }} />
+        <span>Introducing <span style={{ fontFamily: BRAND.font, fontWeight: 700, letterSpacing: '0.03em', color: G.ink1 }}>{BRAND.name}</span></span>
+      </div>
+      {/* 左缘锚定：打字过程不横移（真打字机感）；行垂直居中于 540 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: LEFT,
+          top: 540 - (SIZE * 1.1) / 2,
+          display: 'flex',
+          alignItems: 'center',
+          height: SIZE * 1.1,
+        }}
+      >
+        {chars.map((c, i) => (
+          <span
+            key={i}
+            style={{
+              display: 'inline-block',
+              width: CHAR_W,
+              textAlign: 'center',
+              fontFamily: FONT.mono,
+              fontSize: SIZE,
+              fontWeight: 600,
+              color: G.ink1,
+              lineHeight: 1.1,
+            }}
+          >
+            {c === ' ' ? '\u00a0' : c}
+          </span>
+        ))}
+        {/* 光标：强调色竖条，条件挂载而非 opacity 0 */}
+        {cursorOn(f) && (
+          <span
+            style={{
+              display: 'inline-block',
+              width: 6,
+              height: SIZE * 0.98,
+              marginLeft: 4,
+              borderRadius: 3,
+              background: G.accent,
+              boxShadow: '0 0 12px rgba(91,99,211,0.35)',
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};