dsh-drawai 0.4.2 → 0.4.4

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

@@ -1,135 +1,135 @@
-// 字形漂移合拢（letterform-drift-assembly）——Stranger Things 片头式入场。
-// 品牌名 "Shotcraft"（BRAND.short，video-shotcraft 的简称）拆 9 字符：各自从不同方向（h(i) seeded 随机向量，
-// 幅度 ±260–360px）带 blur 8px + opacity 0.35 缓慢漂入，错峰归位
-// （delay i×3f，45f 行程，Easing.out(cubic)）。每字锁定瞬间给一次
-// "加深脉冲"：字色 ink→#000→ink + 描边 0→3px→0（8f）——白底上
-// 不用发光用加深（库判例）。全部合体后整词 scale 1→1.04→1 收束呼吸
-// （判例：1.02 太弱，加码到 1.04）。
-// 关键帧：0–24 各字错峰启程 → i 字 [i*3, i*3+45] 漂入归位 →
-// 锁定帧 i*3+45 起 8f 加深脉冲（最后一字 69–77）→ 80–104 整词呼吸 →
-// 104–150 全静止（46f，无逐帧滤镜）。
-//
-// 质感升级：去掉调试标题；柔光 Backdrop；系统 SF 栈 700、带色相的近黑墨色；
-// 漂入除位移/blur/opacity 外再绑同一条 p 的旋转（±24°→0）与纵深缩放（1.22→1），
-// 字是从镜头前的空间里飘回字面，而不是平面滑动；合体后字面下方浮出一层极淡的落地影。
-// 补导出时长 150f（原工作台按 56f 推断，渲染止于半空）。
-import React from 'react';
-import { useCurrentFrame, interpolate, Easing } from 'remotion';
-import { G } from '../../_fixtures/Fixtures';
-import { Backdrop, EASE, FONT, ramp } from '../../_fixtures/Polish';
-import { BRAND } from '../../_fixtures/Brand';
-
-export const LETTERFORM_DRIFT_ASSEMBLY_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 TRAVEL = 45; // 每字漂入行程帧数
-const STAG = 3; // 错峰间隔
-const INK = [23, 24, 28]; // G.ink1 #17181c
-
-export const LetterformDriftAssembly: React.FC = () => {
-  const frame = useCurrentFrame();
-  const chars = WORD.split('');
-  const lastLock = (chars.length - 1) * STAG + TRAVEL; // 69
-
-  // 整词收束呼吸：80–92 放大到 1.04，92–104 回落，之后恒 1 → 帧确定
-  const breath =
-    frame < 92
-      ? interpolate(frame, [80, 92], [1, 1.04], {
-          extrapolateLeft: 'clamp',
-          extrapolateRight: 'clamp',
-          easing: Easing.inOut(Easing.cubic),
-        })
-      : interpolate(frame, [92, 104], [1.04, 1], {
-          extrapolateLeft: 'clamp',
-          extrapolateRight: 'clamp',
-          easing: Easing.inOut(Easing.cubic),
-        });
-  // 合体后落地影
-  const ground = ramp(frame, lastLock - 6, 30, EASE.out);
-
-  return (
-    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden' }}>
-      <Backdrop tone="light" light={{ x: 0.5, y: 0.32 }} accent="#5b63d3" grain={0.05} vignette={0.14} />
-      {/* 落地影：合体后在字面下方出现的极淡椭圆影 */}
-      <div
-        style={{
-          position: 'absolute',
-          left: 960 - 520,
-          top: 540 + 70,
-          width: 1040,
-          height: 70,
-          borderRadius: '50%',
-          background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(20,22,32,0.13), rgba(20,22,32,0) 70%)',
-          opacity: ground,
-          transform: `scale(${breath})`,
-        }}
-      />
-      <div
-        style={{
-          position: 'absolute',
-          inset: 0,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          transform: `scale(${breath})`,
-        }}
-      >
-        {chars.map((c, i) => {
-          const start = i * STAG;
-          const lock = start + TRAVEL;
-          // 漂入进度（位移 / blur / opacity / 旋转 / 纵深 共用一条 p）
-          const p = interpolate(frame, [start, lock], [0, 1], {
-            extrapolateLeft: 'clamp',
-            extrapolateRight: 'clamp',
-            easing: Easing.out(Easing.cubic),
-          });
-          // seeded 起始向量：方向 h(i)，幅度 260–360px
-          const ang = h(i + 1) * Math.PI * 2;
-          const mag = 260 + h(i + 101) * 100;
-          const dx = Math.cos(ang) * mag * (1 - p);
-          const dy = Math.sin(ang) * mag * (1 - p);
-          const rot = (h(i + 201) - 0.5) * 48 * (1 - p);
-          const depth = 1 + 0.22 * (1 - p);
-          const blur = 8 * (1 - p);
-          const op = interpolate(p, [0, 1], [0.35, 1]);
-          // 锁定加深脉冲：lock→lock+8，三角波 0→1→0
-          const pulse =
-            frame <= lock || frame >= lock + 8
-              ? 0
-              : frame < lock + 4
-                ? (frame - lock) / 4
-                : (lock + 8 - frame) / 4;
-          const color = `rgb(${INK.map((v) => Math.round(v * (1 - pulse))).join(',')})`;
-          const strokeW = 3 * pulse;
-          const settled = p >= 1 && pulse === 0;
-          return (
-            <span
-              key={i}
-              style={{
-                fontFamily: FONT.sans,
-                fontWeight: 700,
-                fontSize: 148,
-                letterSpacing: '0.02em',
-                color: settled ? G.ink1 : color,
-                display: 'inline-block',
-                transform: settled
-                  ? undefined
-                  : `translate(${dx.toFixed(2)}px, ${dy.toFixed(2)}px) rotate(${rot.toFixed(2)}deg) scale(${depth.toFixed(4)})`,
-                opacity: op,
-                filter: blur > 0.01 ? `blur(${blur.toFixed(2)}px)` : undefined,
-                WebkitTextStroke: strokeW > 0.01 ? `${strokeW.toFixed(2)}px #000` : undefined,
-              }}
-            >
-              {c}
-            </span>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
+// 字形漂移合拢（letterform-drift-assembly）——Stranger Things 片头式入场。
+// 品牌名 "Shotcraft"（BRAND.short，video-shotcraft 的简称）拆 9 字符：各自从不同方向（h(i) seeded 随机向量，
+// 幅度 ±260–360px）带 blur 8px + opacity 0.35 缓慢漂入，错峰归位
+// （delay i×3f，45f 行程，Easing.out(cubic)）。每字锁定瞬间给一次
+// "加深脉冲"：字色 ink→#000→ink + 描边 0→3px→0（8f）——白底上
+// 不用发光用加深（库判例）。全部合体后整词 scale 1→1.04→1 收束呼吸
+// （判例：1.02 太弱，加码到 1.04）。
+// 关键帧：0–24 各字错峰启程 → i 字 [i*3, i*3+45] 漂入归位 →
+// 锁定帧 i*3+45 起 8f 加深脉冲（最后一字 69–77）→ 80–104 整词呼吸 →
+// 104–150 全静止（46f，无逐帧滤镜）。
+//
+// 质感升级：去掉调试标题；柔光 Backdrop；系统 SF 栈 700、带色相的近黑墨色；
+// 漂入除位移/blur/opacity 外再绑同一条 p 的旋转（±24°→0）与纵深缩放（1.22→1），
+// 字是从镜头前的空间里飘回字面，而不是平面滑动；合体后字面下方浮出一层极淡的落地影。
+// 补导出时长 150f（原工作台按 56f 推断，渲染止于半空）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G } from '../../_fixtures/Fixtures';
+import { Backdrop, EASE, FONT, ramp } from '../../_fixtures/Polish';
+import { BRAND } from '../../_fixtures/Brand';
+
+export const LETTERFORM_DRIFT_ASSEMBLY_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 TRAVEL = 45; // 每字漂入行程帧数
+const STAG = 3; // 错峰间隔
+const INK = [23, 24, 28]; // G.ink1 #17181c
+
+export const LetterformDriftAssembly: React.FC = () => {
+  const frame = useCurrentFrame();
+  const chars = WORD.split('');
+  const lastLock = (chars.length - 1) * STAG + TRAVEL; // 69
+
+  // 整词收束呼吸：80–92 放大到 1.04，92–104 回落，之后恒 1 → 帧确定
+  const breath =
+    frame < 92
+      ? interpolate(frame, [80, 92], [1, 1.04], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.inOut(Easing.cubic),
+        })
+      : interpolate(frame, [92, 104], [1.04, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.inOut(Easing.cubic),
+        });
+  // 合体后落地影
+  const ground = ramp(frame, lastLock - 6, 30, EASE.out);
+
+  return (
+    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden' }}>
+      <Backdrop tone="light" light={{ x: 0.5, y: 0.32 }} accent="#5b63d3" grain={0.05} vignette={0.14} />
+      {/* 落地影：合体后在字面下方出现的极淡椭圆影 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 960 - 520,
+          top: 540 + 70,
+          width: 1040,
+          height: 70,
+          borderRadius: '50%',
+          background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(20,22,32,0.13), rgba(20,22,32,0) 70%)',
+          opacity: ground,
+          transform: `scale(${breath})`,
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transform: `scale(${breath})`,
+        }}
+      >
+        {chars.map((c, i) => {
+          const start = i * STAG;
+          const lock = start + TRAVEL;
+          // 漂入进度（位移 / blur / opacity / 旋转 / 纵深 共用一条 p）
+          const p = interpolate(frame, [start, lock], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+            easing: Easing.out(Easing.cubic),
+          });
+          // seeded 起始向量：方向 h(i)，幅度 260–360px
+          const ang = h(i + 1) * Math.PI * 2;
+          const mag = 260 + h(i + 101) * 100;
+          const dx = Math.cos(ang) * mag * (1 - p);
+          const dy = Math.sin(ang) * mag * (1 - p);
+          const rot = (h(i + 201) - 0.5) * 48 * (1 - p);
+          const depth = 1 + 0.22 * (1 - p);
+          const blur = 8 * (1 - p);
+          const op = interpolate(p, [0, 1], [0.35, 1]);
+          // 锁定加深脉冲：lock→lock+8，三角波 0→1→0
+          const pulse =
+            frame <= lock || frame >= lock + 8
+              ? 0
+              : frame < lock + 4
+                ? (frame - lock) / 4
+                : (lock + 8 - frame) / 4;
+          const color = `rgb(${INK.map((v) => Math.round(v * (1 - pulse))).join(',')})`;
+          const strokeW = 3 * pulse;
+          const settled = p >= 1 && pulse === 0;
+          return (
+            <span
+              key={i}
+              style={{
+                fontFamily: FONT.sans,
+                fontWeight: 700,
+                fontSize: 148,
+                letterSpacing: '0.02em',
+                color: settled ? G.ink1 : color,
+                display: 'inline-block',
+                transform: settled
+                  ? undefined
+                  : `translate(${dx.toFixed(2)}px, ${dy.toFixed(2)}px) rotate(${rot.toFixed(2)}deg) scale(${depth.toFixed(4)})`,
+                opacity: op,
+                filter: blur > 0.01 ? `blur(${blur.toFixed(2)}px)` : undefined,
+                WebkitTextStroke: strokeW > 0.01 ? `${strokeW.toFixed(2)}px #000` : undefined,
+              }}
+            >
+              {c}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

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

@@ -1,124 +1,124 @@
-// 逐字遮罩裂升（split-text-stagger）——GSAP SplitText 惯用入场。
-// 标题 "FRAME MOTION."（video-shotcraft 品牌短句前半句）按字符拆 span，每字外包 overflow:hidden 的行高盒，
-// 内层从 translateY(115%) 升到 0，各 14f Easing.out(cubic)，带 10% 过冲
-// 再 6f 回落（原案 6% 过冲，按可感性红线加码到 10%）。delay = 字符索引×2f。
-// 底部基线细线在首字起跳同帧从左向右生长，暗示裁切线存在。
-// 关键帧：0–12 空场 hold → 12 首字起跳 + 基线开始生长 → 每字 12+i*2 起跳，
-// 14f 升至 -10% 过冲 → 再 6f 回落归 0 → 末字(索引12)于 56f 落定 →
-// 56–130 全静止（74f ≥ 40f，无逐帧噪声层）。
-//
-// 质感升级：去掉调试标题；柔光 Backdrop；系统 SF 栈 700、字号 120→136；
-// 升起快速段按每字竖向速度加 y 向运动模糊（静止为 0）；基线改强调色、宽度与文字行严格等宽，
-// 生长用强 ease-out；补导出时长 130f（原工作台按 56f 推断，末字刚落定就切走）。
-import React from 'react';
-import { useCurrentFrame, interpolate, Easing } from 'remotion';
-import { G } from '../../_fixtures/Fixtures';
-import { Backdrop, EASE, FONT as PFONT, ramp } from '../../_fixtures/Polish';
-
-export const SPLIT_TEXT_STAGGER_DURATION = 130;
-
-const TEXT = 'FRAME MOTION.'; // 品牌短句 Frame motion. Craft the shot. 的前半句（13 字符，与原文等长）
-const START = 12; // 首字起跳帧
-const RISE = 14; // 升起时长
-const SETTLE = 6; // 过冲回落时长
-const OVERSHOOT = -10; // 过冲到 -10%（原案 6%，加码）
-const FONT = 136;
-const LINE_H = 1.05; // span 行高（translateY 百分比以此为基准）
-
-// 单字符纵向位移（%）：115 → -10（out cubic）→ 0（out quad），帧确定
-const charY = (f: number, idx: number): number => {
-  const t0 = START + idx * 2;
-  if (f < t0 + RISE) {
-    return interpolate(f, [t0, t0 + RISE], [115, OVERSHOOT], {
-      extrapolateLeft: 'clamp',
-      extrapolateRight: 'clamp',
-      easing: Easing.out(Easing.cubic),
-    });
-  }
-  return interpolate(f, [t0 + RISE, t0 + RISE + SETTLE], [OVERSHOOT, 0], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'clamp',
-    easing: Easing.out(Easing.quad),
-  });
-};
-
-export const SplitTextStagger: React.FC = () => {
-  const frame = useCurrentFrame();
-  const chars = TEXT.split('');
-  // 基线：首字起跳同帧开始，从左向右生长到 100%
-  const lineW = ramp(frame, START, 30, EASE.snappy) * 100;
-
-  return (
-    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden' }}>
-      <Backdrop tone="light" light={{ x: 0.42, y: 0.3 }} accent="#5b63d3" grain={0.045} vignette={0.12} />
-      <div
-        style={{
-          position: 'absolute',
-          inset: 0,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        {/* 行容器：基线与文字行同宽 */}
-        <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'stretch' }}>
-          <div style={{ display: 'flex' }}>
-            {chars.map((c, i) => {
-              const y = charY(frame, i);
-              // 竖向速度（px/帧）→ y 向模糊
-              const vy = Math.abs(charY(frame + 0.5, i) - charY(frame - 0.5, i)) * FONT * LINE_H * 0.01;
-              const blur = Math.min(10, vy * 0.32);
-              const id = `sts-vb-${i}`;
-              return (
-                <div
-                  key={i}
-                  style={{
-                    // 遮罩盒：上方留 0.3em 头部空间容纳过冲，底边即裁切线
-                    overflow: 'hidden',
-                    height: FONT * 1.35,
-                    display: 'flex',
-                    alignItems: 'flex-end',
-                  }}
-                >
-                  {blur > 0.3 && (
-                    <svg width={0} height={0} style={{ position: 'absolute' }} aria-hidden>
-                      <filter id={id} x="-10%" y="-50%" width="120%" height="200%">
-                        <feGaussianBlur stdDeviation={`0 ${blur.toFixed(2)}`} />
-                      </filter>
-                    </svg>
-                  )}
-                  <span
-                    style={{
-                      display: 'inline-block',
-                      fontFamily: PFONT.sans,
-                      fontWeight: 700,
-                      fontSize: FONT,
-                      lineHeight: LINE_H,
-                      color: G.ink1,
-                      letterSpacing: '-0.015em',
-                      transform: `translateY(${y.toFixed(3)}%)`,
-                      filter: blur > 0.3 ? `url(#${id})` : undefined,
-                    }}
-                  >
-                    {c === ' ' ? '\u00a0' : c}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-          {/* 基线细线：宽度从 0 生长到全文宽（强调色，暗示裁切线） */}
-          <div style={{ marginTop: 12, height: 3, display: 'flex' }}>
-            <div
-              style={{
-                height: 3,
-                width: `${lineW.toFixed(3)}%`,
-                borderRadius: 2,
-                background: `linear-gradient(90deg, ${G.accent}, #7c83e6)`,
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+// 逐字遮罩裂升（split-text-stagger）——GSAP SplitText 惯用入场。
+// 标题 "FRAME MOTION."（video-shotcraft 品牌短句前半句）按字符拆 span，每字外包 overflow:hidden 的行高盒，
+// 内层从 translateY(115%) 升到 0，各 14f Easing.out(cubic)，带 10% 过冲
+// 再 6f 回落（原案 6% 过冲，按可感性红线加码到 10%）。delay = 字符索引×2f。
+// 底部基线细线在首字起跳同帧从左向右生长，暗示裁切线存在。
+// 关键帧：0–12 空场 hold → 12 首字起跳 + 基线开始生长 → 每字 12+i*2 起跳，
+// 14f 升至 -10% 过冲 → 再 6f 回落归 0 → 末字(索引12)于 56f 落定 →
+// 56–130 全静止（74f ≥ 40f，无逐帧噪声层）。
+//
+// 质感升级：去掉调试标题；柔光 Backdrop；系统 SF 栈 700、字号 120→136；
+// 升起快速段按每字竖向速度加 y 向运动模糊（静止为 0）；基线改强调色、宽度与文字行严格等宽，
+// 生长用强 ease-out；补导出时长 130f（原工作台按 56f 推断，末字刚落定就切走）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G } from '../../_fixtures/Fixtures';
+import { Backdrop, EASE, FONT as PFONT, ramp } from '../../_fixtures/Polish';
+
+export const SPLIT_TEXT_STAGGER_DURATION = 130;
+
+const TEXT = 'FRAME MOTION.'; // 品牌短句 Frame motion. Craft the shot. 的前半句（13 字符，与原文等长）
+const START = 12; // 首字起跳帧
+const RISE = 14; // 升起时长
+const SETTLE = 6; // 过冲回落时长
+const OVERSHOOT = -10; // 过冲到 -10%（原案 6%，加码）
+const FONT = 136;
+const LINE_H = 1.05; // span 行高（translateY 百分比以此为基准）
+
+// 单字符纵向位移（%）：115 → -10（out cubic）→ 0（out quad），帧确定
+const charY = (f: number, idx: number): number => {
+  const t0 = START + idx * 2;
+  if (f < t0 + RISE) {
+    return interpolate(f, [t0, t0 + RISE], [115, OVERSHOOT], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.cubic),
+    });
+  }
+  return interpolate(f, [t0 + RISE, t0 + RISE + SETTLE], [OVERSHOOT, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+};
+
+export const SplitTextStagger: React.FC = () => {
+  const frame = useCurrentFrame();
+  const chars = TEXT.split('');
+  // 基线：首字起跳同帧开始，从左向右生长到 100%
+  const lineW = ramp(frame, START, 30, EASE.snappy) * 100;
+
+  return (
+    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden' }}>
+      <Backdrop tone="light" light={{ x: 0.42, y: 0.3 }} accent="#5b63d3" grain={0.045} vignette={0.12} />
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {/* 行容器：基线与文字行同宽 */}
+        <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'stretch' }}>
+          <div style={{ display: 'flex' }}>
+            {chars.map((c, i) => {
+              const y = charY(frame, i);
+              // 竖向速度（px/帧）→ y 向模糊
+              const vy = Math.abs(charY(frame + 0.5, i) - charY(frame - 0.5, i)) * FONT * LINE_H * 0.01;
+              const blur = Math.min(10, vy * 0.32);
+              const id = `sts-vb-${i}`;
+              return (
+                <div
+                  key={i}
+                  style={{
+                    // 遮罩盒：上方留 0.3em 头部空间容纳过冲，底边即裁切线
+                    overflow: 'hidden',
+                    height: FONT * 1.35,
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                  }}
+                >
+                  {blur > 0.3 && (
+                    <svg width={0} height={0} style={{ position: 'absolute' }} aria-hidden>
+                      <filter id={id} x="-10%" y="-50%" width="120%" height="200%">
+                        <feGaussianBlur stdDeviation={`0 ${blur.toFixed(2)}`} />
+                      </filter>
+                    </svg>
+                  )}
+                  <span
+                    style={{
+                      display: 'inline-block',
+                      fontFamily: PFONT.sans,
+                      fontWeight: 700,
+                      fontSize: FONT,
+                      lineHeight: LINE_H,
+                      color: G.ink1,
+                      letterSpacing: '-0.015em',
+                      transform: `translateY(${y.toFixed(3)}%)`,
+                      filter: blur > 0.3 ? `url(#${id})` : undefined,
+                    }}
+                  >
+                    {c === ' ' ? '\u00a0' : c}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+          {/* 基线细线：宽度从 0 生长到全文宽（强调色，暗示裁切线） */}
+          <div style={{ marginTop: 12, height: 3, display: 'flex' }}>
+            <div
+              style={{
+                height: 3,
+                width: `${lineW.toFixed(3)}%`,
+                borderRadius: 2,
+                background: `linear-gradient(90deg, ${G.accent}, #7c83e6)`,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};