dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/typography/title-demote-to-label/TitleDemoteToLabel.tsx

@@ -0,0 +1,292 @@
+// title-demote-to-label —— 大标题降格为节标签（两式串播）
+// 源：perplexity-promo 16–18.5s；B 式变体源自 framer text-selection-title。
+//
+// 第二轮重设计（paper · 瑞士网格编辑版式 · 产品 = video-shotcraft 的分镜工作台）：
+// - look = paper（暖白纸 · 墨 · 朱红）。主角是 220px / 850 字重的单词海报标题「Frame.」「Craft.」（品牌短句 Frame motion. Craft the shot.），
+//   句点是朱红——降格后它就是栏目标签的识别点。12 栏网格的左边距 120、发丝线、mono 眉题撑起编辑版式。
+// - 降格：一次连续补间（26f，不对称 in-out：起步果断、落点很软）scale 1→0.22、中心→左上标签槽，
+//   transform-origin 左中、居中修正 translate(-50%) 随补间归零；飞行按速度加方向性运动模糊。
+//   眉题「CHAPTER 01」随起飞 6f 淡出，落位时标签前的「01 /」从左擦入接班。
+// - 内容在降格进行到 12f 时开始错峰生长（裁切揭开 + 上移 + 淡入，先密后疏），交接零空档：
+//   A = 导语 + 三张卡（镜头配方卡 / 用户评价 / 卡点节拍）；B = 一段分镜脚本，其中一句带朱红选区 → 连线 → 匹配镜头卡。
+// - 两式之间不再白闪：A 内容 ease-in 上移退场，A 标签上移一行、变灰缩小成"上一节"（多节连用不叠放），
+//   B 大标题在同一个舞台上显影——共享一个 Stage，没有接缝。
+// - B 式：朱红选区扫入（右缘跟着 3px 插入光标）→ 站 10f → 左缘撤走 → 再降格。
+//
+// 时间表（30fps，共 246f）：
+//   A  0–16    眉题字距收拢 + 标题逐字从线下升起（rise，先到先稳）
+//      16–36   站稳 20f（极缓 1.5% 推近，画面不死）
+//      36–62   降格 26f；48 起内容生长（~44f 长完）
+//      92–112  hold
+//   转 112–124 A 内容退场（exit 12f）；A 标签 124–140 上移成"上一节"
+//   B  118–134 B 标题显影；136–146 选区扫入；146–156 站；156–164 撤；166–192 降格；178 起内容生长
+//      226–246 hold 落定（尾帧 = 完整编辑页海报）
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, SpeedBlur, bezier, mix, ramp, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+const L = LOOKS.paper;
+export const TITLE_DEMOTE_TO_LABEL_DURATION = 246;
+
+const B0 = 112; // B 式（转场）起点
+const MARGIN = 120; // 网格左边距
+const HERO = 220; // 标题字号
+const LABEL_SCALE = 0.22; // 降格终点缩放（≈48px）
+const SLOT = { x: MARGIN + 96, y: 196 }; // 标签槽（左中锚点）；前面留给「01 /」
+const DEMOTE_EASE = bezier(0.6, 0, 0.18, 1); // 起步果断、落点很软的不对称 in-out
+const SEL = alpha(L.accent, 0.2);
+
+// ───────────── 生长块：裁切从左揭开 + 上移 + 淡入（内容不变形） ─────────────
+const Grow: React.FC<{ frame: number; at: number; dur?: number; children: React.ReactNode; style?: React.CSSProperties }> = ({
+  frame, at, dur = 20, children, style,
+}) => {
+  const p = ramp(frame, at, dur, EASE.out);
+  return (
+    <div style={{
+      opacity: Math.min(1, p * 1.6),
+      transform: `translateY(${((1 - p) * 30).toFixed(2)}px)`,
+      clipPath: p < 1 ? `inset(-60px ${((1 - (0.3 + 0.7 * p)) * 100).toFixed(2)}% -60px -20px)` : undefined,
+      ...style,
+    }}>
+      {children}
+    </div>
+  );
+};
+
+const Tag: React.FC<{ label: string; color?: string }> = ({ label, color = L.accent }) => (
+  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, ...type(22, 700, { caps: true, mono: true }), letterSpacing: '0.14em', color: L.ink2 }}>
+    <span style={{ width: 10, height: 10, borderRadius: 5, background: color }} />
+    {label}
+  </span>
+);
+
+const card: React.CSSProperties = {
+  position: 'relative', width: 536, height: 430, borderRadius: 22, background: L.surface,
+  border: `1px solid ${L.line}`, boxShadow: `inset 0 1px 0 rgba(255,255,255,0.9), ${softShadow(10, { color: L.shadow, strength: 0.9 })}`,
+  padding: '34px 36px', boxSizing: 'border-box', overflow: 'hidden',
+};
+
+// ───────────── A：取景（导语 + 配方卡 / 评价 / 节拍三张卡） ─────────────
+const ContentA: React.FC<{ frame: number; at: number }> = ({ frame, at }) => {
+  const t = (k: number) => at + k; // 先密后疏的错峰
+  return (
+    <div style={{ position: 'absolute', left: MARGIN, top: 262, width: 1680 }}>
+      <Grow frame={frame} at={t(8)} dur={18}>
+        <div style={{ height: 1.5, background: alpha(L.ink, 0.85) }} />
+      </Grow>
+      <Grow frame={frame} at={t(6)} style={{ marginTop: 40 }}>
+        <div style={{ ...type(60, 650), color: L.ink, whiteSpace: 'nowrap' }}>
+          Pick a shot. <span style={{ color: L.ink3 }}>Each one comes with a recipe.</span>
+        </div>
+      </Grow>
+      <div style={{ display: 'flex', gap: 36, marginTop: 56 }}>
+        <Grow frame={frame} at={t(10)} dur={22}>
+          <div style={card}>
+            <Tag label="Recipe card" />
+            <div style={{ ...type(42, 700), color: L.ink, marginTop: 26, lineHeight: 1.12 }}>Crash zoom punch</div>
+            <div style={{ ...type(32, 400), color: L.ink2, marginTop: 18, lineHeight: 1.35 }}>Slam into the one number that matters.</div>
+            <div style={{ position: 'absolute', left: 36, right: 36, bottom: 30, display: 'flex', justifyContent: 'space-between', ...type(22, 500, { mono: true }), color: L.ink3 }}>
+              <span>camera / punch-in</span><span>18f</span>
+            </div>
+          </div>
+        </Grow>
+        <Grow frame={frame} at={t(16)} dur={22}>
+          <div style={{ ...card, background: L.ink, border: 'none' }}>
+            <Tag label="Review" color={L.accent} />
+            <div style={{ fontFamily: '"Iowan Old Style", Palatino, Georgia, serif', fontSize: 52, lineHeight: 1.12, fontStyle: 'italic', color: L.surface, marginTop: 26, letterSpacing: '-0.015em' }}>
+              “Camera moves I’d have keyframed for a <span style={{ color: L.accent }}>week</span>.”
+            </div>
+            <div style={{ position: 'absolute', left: 36, right: 36, bottom: 30, ...type(22, 500, { mono: true }), color: alpha(L.surface, 0.5) }}>
+              Saved from launch day · 03:12
+            </div>
+          </div>
+        </Grow>
+        <Grow frame={frame} at={t(24)} dur={22}>
+          <div style={card}>
+            <Tag label="Beat grid" color={L.accent2} />
+            <div style={{ ...type(42, 700), color: L.ink, marginTop: 26, lineHeight: 1.12 }}>Launch BGM, 128 BPM</div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6, height: 120, marginTop: 30 }}>
+              {Array.from({ length: 34 }, (_, i) => {
+                const hgt = 18 + 90 * Math.abs(Math.sin(i * 1.7) * Math.cos(i * 0.43));
+                return <span key={i} style={{ width: 7, height: hgt, borderRadius: 4, background: i < 13 ? L.accent2 : alpha(L.ink, 0.18) }} />;
+              })}
+            </div>
+            <div style={{ position: 'absolute', left: 36, right: 36, bottom: 30, display: 'flex', justifyContent: 'space-between', ...type(22, 500, { mono: true }), color: L.ink3 }}>
+              <span>Cuts on the beat</span><span>00:32</span>
+            </div>
+          </div>
+        </Grow>
+      </div>
+    </div>
+  );
+};
+
+// ───────────── B：分镜脚本 + 句内选区 → 连线 → 匹配镜头卡 ─────────────
+const ContentB: React.FC<{ frame: number; at: number }> = ({ frame, at }) => {
+  const sel = ramp(frame, at + 20, 12, EASE.swift); // 文中那句的选区扫入
+  const wire = ramp(frame, at + 30, 12, EASE.swift); // 选区 → 答案卡的连线
+  const body: React.CSSProperties = { ...type(58, 450), lineHeight: 1.5, color: L.ink2, whiteSpace: 'nowrap' };
+  return (
+    <div style={{ position: 'absolute', left: MARGIN, top: 262, width: 1680 }}>
+      <Grow frame={frame} at={at + 6} dur={18}>
+        <div style={{ height: 1.5, background: alpha(L.ink, 0.85) }} />
+      </Grow>
+      <Grow frame={frame} at={at + 8} style={{ marginTop: 40 }}>
+        <div style={{ ...type(22, 700, { caps: true, mono: true }), letterSpacing: '0.14em', color: L.ink3 }}>
+          Launch film <span style={{ color: L.accent }}>·</span> Storyboard v4
+        </div>
+      </Grow>
+      <div style={{ position: 'relative', marginTop: 22 }}>
+        <Grow frame={frame} at={at + 10}><div style={body}>The launch film opens on the dashboard,</div></Grow>
+        <Grow frame={frame} at={at + 12}><div style={body}>glides past the chart and, best of all,</div></Grow>
+        <Grow frame={frame} at={at + 14}>
+          <div style={body}>
+            <span style={{ position: 'relative', color: L.ink }}>
+              <span style={{ position: 'absolute', left: -6, top: 8, bottom: 4, width: `calc(${(sel * 100).toFixed(2)}% + 12px)`, background: SEL, borderRadius: 5 }} />
+              <span style={{ position: 'relative' }}>every cut lands right on the beat.</span>
+            </span>
+          </div>
+        </Grow>
+        <Grow frame={frame} at={at + 16}><div style={{ ...body, color: L.ink3 }}>Sound design and the logo sting come last.</div></Grow>
+        {/* 连线：从选区右缘拐到旁注卡 */}
+        <svg width={1680} height={400} style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible', pointerEvents: 'none' }}>
+          <path d="M 800 217 L 1112 217" stroke={L.accent} strokeWidth={2.5} fill="none" pathLength={1} strokeDasharray={1} strokeDashoffset={1 - wire} />
+          {wire > 0.02 && <circle cx={800} cy={217} r={6} fill={L.accent} />}
+        </svg>
+        {/* 旁注：匹配到的镜头配方卡 */}
+        <div style={{ position: 'absolute', left: 1120, top: -40, width: 560 }}>
+          <Grow frame={frame} at={at + 38} dur={22}>
+            <div style={{ ...card, width: 560, height: 'auto', padding: '32px 36px 30px' }}>
+              <Tag label="Shot match · 2 cards" />
+              <div style={{ ...type(40, 650), color: L.ink, marginTop: 22, lineHeight: 1.18 }}>
+                Every line of the script becomes a tuned shot.
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 28 }}>
+                {[['beat-cut-moves', '4 cuts'], ['crash-zoom-punch', '18f']].map(([a, b]) => (
+                  <div key={a} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 18px', borderRadius: 12, background: L.surface2, ...type(26, 500, { mono: true }), color: L.ink2 }}>
+                    <span>{a}</span><span style={{ color: L.accent }}>{b}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Grow>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// 页脚：发丝线 + 纹理级 mono 小字（两节共用，给海报一个底边）
+const Footer: React.FC<{ frame: number }> = ({ frame }) => {
+  const p = ramp(frame, 54, 26, EASE.out);
+  return (
+    <div style={{ position: 'absolute', left: MARGIN, right: MARGIN, top: 948, opacity: p }}>
+      <div style={{ height: 1, background: L.line, transformOrigin: 'left', transform: `scaleX(${p.toFixed(4)})` }} />
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20, ...type(22, 500, { mono: true }), letterSpacing: '0.06em', color: L.ink3 }}>
+        <span>{BRAND.name} / storyboard</span><span>Autosaved · just now</span>
+      </div>
+    </div>
+  );
+};
+
+// ───────────── 标题：显影 → (选区) → 降格 ─────────────
+const Title: React.FC<{
+  frame: number; word: string; num: string; reveal: number; demote: number; select?: { on: number; off: number };
+  retire?: number; // 被下一节顶上去的时刻（变"上一节"）
+}> = ({ frame, word, num, reveal, demote, select, retire }) => {
+  const demAt = (f: number) => ramp(f, demote, 26, DEMOTE_EASE);
+  const dem = demAt(frame);
+  const v = demAt(frame + 0.5) - demAt(frame - 0.5);
+  const hold = ramp(frame, reveal + 14, demote - reveal - 14, EASE.linear);
+  const scale = mix(1 + 0.015 * hold, LABEL_SCALE, dem);
+  const x = mix(960, SLOT.x, dem);
+  const y = mix(540, SLOT.y, dem);
+  // 退位：上移一行、变小、变灰
+  const ret = retire !== undefined ? ramp(frame, retire, 16, EASE.swift) : 0;
+  const ry = -68 * ret;
+  const rs = 1 - 0.3 * ret;
+  if (frame < reveal) return null;
+
+  // 眉题：字距由宽收紧（显影），起飞后 6f 淡出
+  const eyebrowIn = ramp(frame, reveal, 16, EASE.out);
+  const eyebrowOut = ramp(frame, demote, 6, EASE.exit);
+  // 选区（B 式）
+  let selL = 0, selW = 0, caret = 0;
+  if (select) {
+    const on = ramp(frame, select.on, 10, EASE.swift);
+    const off = ramp(frame, select.off, 8, EASE.exit);
+    selL = off * 100;
+    selW = Math.max(0, on * 100 - selL);
+    caret = frame >= select.on && frame < select.off + 6 ? 1 - off : 0;
+  }
+  // 「01 /」在落位前 4f 从左擦入
+  const numIn = ramp(frame, demote + 20, 12, EASE.out);
+  const ink = ret > 0 ? `rgb(${[23, 19, 15].map((c, k) => Math.round(mix(c, [155, 145, 132][k], ret))).join(',')})` : L.ink;
+
+  return (
+    <>
+      {/* 落位后的「01 /」 */}
+      <div style={{
+        position: 'absolute', left: MARGIN, top: SLOT.y + ry, transform: `translateY(-50%) scale(${rs})`, transformOrigin: 'left center',
+        ...type(30, 700, { mono: true }), color: ret > 0.5 ? L.ink3 : L.accent, whiteSpace: 'nowrap',
+        clipPath: `inset(-10px ${((1 - numIn) * 100).toFixed(1)}% -10px 0)`, opacity: numIn,
+      }}>
+        {num} <span style={{ color: L.ink3 }}>/</span>
+      </div>
+      <SpeedBlur vx={v * (SLOT.x - 960)} vy={v * (SLOT.y - 540)} amount={0.2} max={12}>
+        <div style={{
+          position: 'absolute', left: x - (SLOT.x - MARGIN) * (1 - rs), top: y + ry,
+          transform: `translate(${(-(1 - dem) * 50).toFixed(3)}%, -50%) scale(${(scale * rs).toFixed(4)})`,
+          transformOrigin: 'left center', whiteSpace: 'nowrap',
+        }}>
+          {/* 眉题 */}
+          <div style={{
+            position: 'absolute', left: 14, top: -46, ...type(30, 700, { caps: true, mono: true }),
+            letterSpacing: `${(0.3 - 0.12 * eyebrowIn).toFixed(3)}em`, color: L.accent,
+            opacity: eyebrowIn * (1 - eyebrowOut), whiteSpace: 'nowrap',
+          }}>
+            Chapter {num}
+          </div>
+          <div style={{ position: 'relative', ...type(HERO, 850), letterSpacing: '-0.055em', color: ink, padding: '0 14px' }}>
+            {selW > 0 && (
+              <div style={{ position: 'absolute', left: `${selL}%`, width: `${selW}%`, top: '8%', bottom: '2%', background: SEL, borderRadius: 6 }} />
+            )}
+            {caret > 0 && (
+              <div style={{ position: 'absolute', left: `calc(${(selL + selW).toFixed(2)}% - 2px)`, top: '4%', bottom: '-2%', width: 5, borderRadius: 3, background: L.accent, opacity: caret }} />
+            )}
+            <span style={{ position: 'relative' }}>
+              <TextReveal text={word} start={reveal} by="char" variant="rise" each={16} gap={1.6} />
+              <span style={{ color: ret > 0.5 ? L.ink3 : L.accent, display: 'inline-block', transform: `scale(${ramp(frame, reveal + 10, 14, EASE.overshoot).toFixed(3)})`, transformOrigin: '50% 85%' }}>.</span>
+            </span>
+          </div>
+        </div>
+      </SpeedBlur>
+    </>
+  );
+};
+
+export const TitleDemoteToLabel: React.FC = () => {
+  const frame = useCurrentFrame();
+  // A 内容退场
+  const outA = ramp(frame, B0, 12, EASE.exit);
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.3, y: 0.05 }} fill={{ x: 0.9, y: 0.95 }} />
+      {/* 网格页眉：右上角品牌（镜刻标志 + 全小写字标）/ 页码（纹理级小字） */}
+      <div style={{ position: 'absolute', right: MARGIN, top: 182, display: 'flex', alignItems: 'center', gap: 40, ...type(22, 600, { caps: true, mono: true }), letterSpacing: '0.16em', color: L.ink3, opacity: ramp(frame, 40, 20, EASE.out) }}>
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12, textTransform: 'none', letterSpacing: '0.04em' }}><ShotcraftMark size={28} tone="light" />{BRAND.name}</span><span style={{ color: L.ink }}>{frame < 190 ? '01' : '02'} / 04</span>
+      </div>
+      {frame < B0 + 14 && (
+        <div style={{ position: 'absolute', inset: 0, opacity: 1 - outA, transform: `translateY(${(-50 * outA).toFixed(2)}px)` }}>
+          <ContentA frame={frame} at={48} />
+        </div>
+      )}
+      {frame >= B0 + 40 && <ContentB frame={frame} at={178} />}
+      <Footer frame={frame} />
+      <Title frame={frame} word="Frame" num="01" reveal={0} demote={36} retire={B0 + 54} />
+      <Title frame={frame} word="Craft" num="02" reveal={B0 + 6} demote={166} select={{ on: 136, off: 156 }} />
+    </AbsoluteFill>
+  );
+};

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

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

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

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