dsh-drawai 0.3.3 → 0.4.0

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

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +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>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/vertical-word-roll-blur-cycle/VerticalWordRollBlurCycle.tsx

@@ -0,0 +1,147 @@
+// vertical-word-roll-blur-cycle — Word Roll 竖向词条滚轮（motion-lab 定稿转原生 Remotion）
+// 标语（video-shotcraft 卖点句 "Crafted for ___"）后半词用竖向滚轮循环 Launches→Demos→Promos→Every Shot：中心词清晰上色，相邻行浅灰带
+// 垂直 blur（滚轮景深），每步 outQuint 前快后慢带轻微过冲，落定瞬间中心词从灰染成强调色。
+// 质感：blur 改为真·纵向高斯（SVG feGaussianBlur 只在 y 向，横向笔画不糊），转动时再按滚轮
+// 速度叠一层纵向运动模糊（静止为 0）；离中心越远的行按滚筒曲面轻微压扁；视窗上下沿柔边渐隐，
+// 不再是硬裁切；底景柔光 + 颗粒。
+// 设计坐标 480×270（DesignStage 等比放大），参数表数值以此坐标系标定。
+import React from 'react';
+import { DesignStage, E, seg, useT } from '../../_fixtures/Motion';
+import { Backdrop, FONT, Grain } from '../../_fixtures/Polish';
+
+export const VERTICAL_WORD_ROLL_BLUR_CYCLE_DURATION = 150; // 5000ms @30fps
+
+const ROW = 44;
+const WORDS = ['Launches', 'Demos', 'Promos', 'Every Shot'];
+// 3 次换词，每次 0.11（≈0.55s）
+const STEPS = [0.16, 0.36, 0.56];
+
+const ACCENT = '#5b63d3';
+const ACCENT_DIM = '#B9B9BE';
+const INK = '#17181c';
+const clamp01 = (v: number) => Math.max(0, Math.min(1, v));
+// 十六进制颜色按 k 混合（与原 effect.js 的 mixHex 等价）
+const mixHex = (a: string, b: string, k: number) => {
+  k = clamp01(k);
+  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));
+  const c = pa.map((v, i) => Math.round(v + (pb[i] - v) * k));
+  return `rgb(${c[0]},${c[1]},${c[2]})`;
+};
+
+// 滚轮进度 p：每步 0.7·outQuint + 0.3·outBack（前快后极慢 + 轻微过冲回落）
+const reelAt = (t: number) => {
+  let p = 0;
+  for (const s of STEPS) {
+    const u = seg(t, s, s + 0.11);
+    p += 0.7 * E.outQuint(u) + 0.3 * E.outBack(u);
+  }
+  return p;
+};
+const DT = 0.5 / (VERTICAL_WORD_ROLL_BLUR_CYCLE_DURATION - 1); // 半帧对应的 t
+
+export const VerticalWordRollBlurCycle: React.FC = () => {
+  const t = useT();
+  const p = reelAt(t);
+  // 滚轮速度（行/帧）→ 纵向运动模糊（设计 px），静止时为 0
+  const speed = Math.abs(reelAt(t + DT) - reelAt(t - DT));
+  const motionBlur = Math.min(4, speed * ROW * 0.22);
+
+  return (
+    <div style={{ position: 'absolute', inset: 0 }}>
+    <DesignStage bg="#F4F4F2">
+      <Backdrop tone="light" light={{ x: 0.5, y: 0.3 }} accent={ACCENT} vignette={0.12} grain={0} />
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontFamily: FONT.sans,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 14,
+            // 结束整组淡出
+            opacity: 1 - seg(t, 0.9, 0.985) * 0.999,
+          }}
+        >
+          <div
+            style={{
+              fontSize: 30,
+              fontWeight: 800,
+              color: INK,
+              letterSpacing: -0.5,
+            }}
+          >
+            Crafted for
+          </div>
+          {/* 三行高的视窗，滚轮列在其中滑动，中心行 = 第二行；上下沿柔边渐隐 */}
+          <div
+            style={{
+              position: 'relative',
+              height: ROW * 3,
+              width: 190,
+              overflow: 'hidden',
+              WebkitMaskImage: 'linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%)',
+              maskImage: 'linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%)',
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                transform: `translateY(${ROW - p * ROW}px)`,
+              }}
+            >
+              {WORDS.map((w, i) => {
+                const d = Math.abs(i - p);
+                // 相邻行纵向 blur：距中心 1 行内线性 0→3px，更远 3→5px；转动时叠运动模糊
+                const blur = (d < 1 ? 3 * d : 3 + 2 * Math.min(d - 1, 1)) + motionBlur;
+                const op = d < 1 ? 1 - 0.65 * d : Math.max(0.1, 0.35 - 0.23 * (d - 1));
+                // 滚筒曲面：离中心越远越扁（最多 14%）
+                const squash = 1 - 0.14 * Math.min(1, d / 1.4);
+                const fid = `vroll-${i}`;
+                return (
+                  <div key={w} style={{ position: 'relative', height: ROW }}>
+                    <svg width={0} height={0} style={{ position: 'absolute' }} aria-hidden>
+                      <filter id={fid} x="-10%" y="-120%" width="120%" height="340%" colorInterpolationFilters="sRGB">
+                        <feGaussianBlur stdDeviation={`0 ${blur.toFixed(2)}`} />
+                      </filter>
+                    </svg>
+                    <div
+                      style={{
+                        height: ROW,
+                        display: 'flex',
+                        alignItems: 'center',
+                        fontSize: 30,
+                        fontWeight: 800,
+                        letterSpacing: -0.5,
+                        whiteSpace: 'nowrap', // 末词 "Every Shot" 带空格，禁止折行
+                        filter: blur > 0.05 ? `url(#${fid})` : undefined,
+                        opacity: op,
+                        transform: `scaleY(${squash.toFixed(4)})`,
+                        // 落定染色：中心词灰→强调色（d 越小越彩）
+                        color: mixHex(ACCENT_DIM, ACCENT, clamp01(1 - d * 2.4)),
+                      }}
+                    >
+                      {w}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </DesignStage>
+    {/* 颗粒放在设计坐标容器外，按成片像素取样，不随 4× 放大变粗 */}
+    <Grain opacity={0.05} />
+    </div>
+  );
+};