dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/typography/marker-underline-title/MarkerUnderlineTitle.tsx

@@ -0,0 +1,121 @@
+// marker-underline-title —— 白底大标题落定后，斜体 "new" 下方一道
+// 马克笔下划线从左到右描画（粗细变化/端头圆润/微歪/边缘毛糙）。
+// 对标 notion-ai.mp4 2.3–3.6s。与库内 draw-svg-trace 撞车，本版做马克笔质感。
+// 质感层（改版）：补导出时长 75f（f42 划完后静止 33f ≥1s）；标题两行错峰 blur-slide
+// （snappy，第二行晚 4f）；笔画加确定性干笔肌理——feTurbulence 位移做毛糙边 + 细碎飞白镂空，
+// 墨色改带暖调的近黑并 multiply 进纸面；纸面 = 暖白低对比底 + 主光 + 颗粒；
+// 第二行 = video-shotcraft 品牌行（镜刻标志 + 小写品牌名）；整段极缓推近 1→1.015。
+import React, { useId } from 'react';
+import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';
+import { Backdrop, EASE, FONT, ramp } from '../../_fixtures/Polish';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const MARKER_UNDERLINE_TITLE_DURATION = 75; // 标题 22f 落定 → f32–42 划线 → 静止 33f
+
+const mulberry32 = (a: number) => () => {
+  let t = (a += 0x6d2b79f5);
+  t = Math.imul(t ^ (t >>> 15), t | 1);
+  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
+// 马克笔笔画：中轴微歪的路径 + 变宽轮廓，一次生成多边形
+const buildStroke = (len: number, seed: number) => {
+  const rand = mulberry32(seed);
+  const N = 40;
+  const top: string[] = [];
+  const bot: string[] = [];
+  // 预生成微歪偏移（低频）与毛糙（高频）
+  const wob = Array.from({ length: N + 1 }, () => rand() - 0.5);
+  for (let i = 0; i <= N; i++) {
+    const t = i / N;
+    const x = t * len;
+    // 中轴：跟随斜体微上斜（左低右高，对照截图）+ 缓波
+    const mid = 19 - t * 9 + Math.sin(t * Math.PI * 1.6 + 0.4) * 2.6 + wob[i] * 1.6;
+    // 宽度：起笔略细→中段饱满→收笔收尖，加高频毛糙
+    const wBase = 14 + Math.sin(t * Math.PI) * 6 - Math.max(0, t - 0.86) * 46 - Math.max(0, 0.06 - t) * 70; // 起笔再收细一点，不再是平头
+    const w = Math.max(2.2, wBase + wob[i] * 3);
+    top.push(`${x.toFixed(1)},${(mid - w / 2).toFixed(1)}`);
+    bot.push(`${x.toFixed(1)},${(mid + w / 2).toFixed(1)}`);
+  }
+  return `M${top.join('L')}L${bot.reverse().join('L')}Z`;
+};
+
+const LEN = 252;
+const PATH = buildStroke(LEN, 77);
+const MARKER_INK = '#1b1916'; // 暖调近黑（马克笔墨，不是纯黑）
+
+export const MarkerUnderlineTitle: React.FC = () => {
+  const frame = useCurrentFrame();
+  // SVG id 按实例生成，多实例同场不串引（useId 的 «:» 在 url() 里非法，需清洗）
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const revealId = `reveal-${uid}`;
+  const dryId = `dry-${uid}`;
+
+  // 标题两行错峰落定：同一条 snappy 进度驱动 y / blur / opacity
+  const line = (delay: number): React.CSSProperties => {
+    const e = ramp(frame, delay, 22, EASE.snappy);
+    return {
+      opacity: Math.min(1, e * 1.4),
+      transform: `translateY(${(1 - e) * 36}px)`,
+      filter: e < 0.999 ? `blur(${((1 - e) * 8).toFixed(2)}px)` : undefined,
+    };
+  };
+
+  // 下划线：标题落定停一拍后描画，10 帧从左到右（提速一档），ease-out
+  const draw = interpolate(frame, [32, 42], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const drawE = 1 - Math.pow(1 - draw, 2.2);
+  // 整段极缓推近（smooth，起止速度为 0）
+  const push = 1 + 0.015 * ramp(frame, 0, 74, EASE.smooth);
+
+  return (
+    <AbsoluteFill>
+      <Backdrop tone="light" light={{ x: 0.42, y: 0.3 }} vignette={0.12} grain={0.05} />
+      <AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center', transform: `scale(${push})` }}>
+        <div style={{
+          fontFamily: FONT.sans,
+          fontWeight: 700, fontSize: 118, color: '#17181c',
+          textAlign: 'center', lineHeight: 1.12, letterSpacing: '-0.028em',
+        }}>
+          <div style={line(0)}>
+            Meet the{' '}
+            <span style={{ fontStyle: 'italic', position: 'relative', display: 'inline-block' }}>
+              new
+              {/* 马克笔下划线：clip 从左到右揭示，保留笔形本身的粗细变化 */}
+              <svg
+                width={LEN} height={44} viewBox={`0 0 ${LEN} 44`}
+                style={{ position: 'absolute', left: -12, bottom: -20, overflow: 'visible', mixBlendMode: 'multiply' }}
+              >
+                <defs>
+                  <clipPath id={revealId}>
+                    <rect x={0} y={-20} width={drawE * (LEN + 6)} height={60} />
+                  </clipPath>
+                  {/* 干笔肌理：低频位移 → 毛糙边；高频噪声阈值 → 细碎飞白（固定 seed，确定性） */}
+                  <filter id={dryId} x="-5%" y="-40%" width="110%" height="180%" colorInterpolationFilters="sRGB">
+                    <feTurbulence type="fractalNoise" baseFrequency="0.09 0.5" numOctaves={2} seed={7} result="warp" />
+                    <feDisplacementMap in="SourceGraphic" in2="warp" scale={1.8} xChannelSelector="R" yChannelSelector="G" result="rough" />
+                    <feTurbulence type="fractalNoise" baseFrequency="0.035 0.9" numOctaves={2} seed={19} result="grain" />
+                    <feColorMatrix in="grain" type="matrix"
+                      values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -16 11.4" result="holes" />
+                    <feComposite in="rough" in2="holes" operator="in" />
+                  </filter>
+                </defs>
+                {draw > 0 && (
+                  <g clipPath={`url(#${revealId})`}>
+                    <path d={PATH} fill={MARKER_INK} fillOpacity={0.94} filter={`url(#${dryId})`} />
+                  </g>
+                )}
+              </svg>
+            </span>
+          </div>
+          <div style={{ ...line(4), display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18 }}>
+            <ShotcraftMark size={112} tone="light" />
+            <span>{BRAND.name}</span>
+          </div>
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/outline-word-fill/OutlineWordFill.tsx

@@ -0,0 +1,153 @@
+// outline-word-fill — Outline→Solid Fill 空心字瞬时点亮
+// 空心词从约 3.2 倍急缓收缩落位居中；背后虚线大圆从画外持续收缩到字周围并缓慢自转，两侧水平虚线从画框
+// 边缘向内伸向圆（"瞄准"）；描边先预热增亮，随即实心字一帧内硬切点亮（无慢扫），一闪辉光后定格。
+//
+// 第二轮重设计（制图 HUD · 白热点亮）：
+// - look = ember（暖黑 · 橙）。原生 1920 坐标重写（不再走 480×270 DesignStage）：220px / 500 的 Helvetica Neue
+//   空心字（2px 暖灰描边），r=410 虚线圆 + 内圈 72 格刻度环（每 30° 一根长刻度，反向慢转）+ 四个套准刻度，两侧水平虚线带 mono 读数
+//   「BEFORE 1 week」/「AFTER 4 hrs」——把"更快"讲成一组前后对比数据（手 K 一周 vs video-shotcraft 一下午出片），瞄准的过程就有了内容。
+// - 点亮：第 54 帧硬切成白热实心字（#fff5ee），同帧圆与水平线"锁定"成橙色、右侧读数 4 hrs 变橙；
+//   辉光（白 + 橙两层）8f 衰完；一道冲击环从圆边外扩 14f 消散（只此一次）；舞台主光同步脉冲一下再回落。
+// - 主圈自转在点亮那一刻刹停（"锁定"），内圈刻度环继续反向慢转。
+// - 曲线：字急缩 11f（EASE.snappy，按 scale 速度给瞬时失焦）、圆慢收 44f（EASE.out，全片最慢的呼吸），
+//   快慢对比是这张卡的节奏；水平线 18f ease-out 内伸，停在圆边外 28px。
+// - 空心字必须用静态字体（Helvetica Neue）：SF 可变字体字形内部有重叠轮廓，text-stroke 会描出 a/e 内部交叠线。
+//
+// 时间表（30fps，共 90f）：
+//   0–2    舞台光与浮尘已在（第 1 帧不空）
+//   2–13   空心字 3.2→1 急缩（2–8 淡入）
+//   8–52   虚线圆 2.8→1 慢收 + 自转（8–18 淡入）
+//   28–46  两侧水平虚线内伸、读数淡入
+//   44–53  描边预热：暖灰 → 亮橙白
+//   54     硬切点亮 + 锁定（主圈刹停）；54–62 辉光衰减；54–68 冲击环
+//   56–70  眉题 / 副行在圆内升起
+//   70–90  hold 20f（极缓推进 1.5%）
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, mix, ramp } from '../../_fixtures/Polish';
+import { Dust, LOOKS, Stage, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const OUTLINE_WORD_FILL_DURATION = 90; // 3.0s @30fps
+
+const L = LOOKS.ember;
+const CX = 960;
+const CY = 540;
+const R = 410; // 虚线圆半径
+const WORD = 'Faster';
+const SIZE = 220;
+const POP = 54; // 硬切点亮帧
+const STATIC_SANS = '"Helvetica Neue", Helvetica, Arial, sans-serif';
+
+const lerpColor = (a: [number, number, number], b: [number, number, number], t: number) =>
+  `rgb(${Math.round(mix(a[0], b[0], t))},${Math.round(mix(a[1], b[1], t))},${Math.round(mix(a[2], b[2], t))})`;
+const GREY: [number, number, number] = [138, 118, 104]; // 暖灰描边 / 制图线
+const HOT: [number, number, number] = [255, 196, 150]; // 预热后的亮橙白
+const ORANGE: [number, number, number] = [255, 107, 44];
+
+const wordScaleAt = (f: number) => mix(3.2, 1, ramp(f, 2, 11, EASE.snappy));
+
+export const OutlineWordFill: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const born = ramp(frame, 2, 6, EASE.out);
+  const ws = wordScaleAt(frame);
+  const zoomBlur = Math.min(6, Math.abs(wordScaleAt(frame + 0.5) - wordScaleAt(frame - 0.5)) * 9);
+  const cin = ramp(frame, 8, 10, EASE.out);
+  const shrink = ramp(frame, 8, 44, EASE.out);
+  const ext = ramp(frame, 28, 18, EASE.out);
+  const warm = ramp(frame, 44, 9, EASE.swift);
+  const lit = frame >= POP ? 1 : 0; // 硬切：不存在中间态
+  const flash = lit * (1 - ramp(frame, POP, 8, EASE.out));
+  const lock = lit * (0.55 + 0.45 * flash); // 锁定后保持一半橙色
+  const shock = ramp(frame, POP, 14, EASE.out);
+  // 主圈自转到点亮那一刻"锁死"（再滑 6° 刹停）；内圈刻度环继续反向慢转，hold 段画面仍在呼吸
+  const rot = 0.22 * Math.min(frame, POP) + (frame > POP ? 6 * ramp(frame, POP, 14, EASE.out) : 0);
+  const rotIn = -0.14 * frame;
+  const sub = (d: number) => ramp(frame, 56 + d, 14, EASE.snappy);
+  const push = 1 + 0.015 * ramp(frame, 0, OUTLINE_WORD_FILL_DURATION, EASE.swift);
+
+  const strokeC = lerpColor(GREY, HOT, warm);
+  const lineC = lit ? lerpColor([150, 120, 100], ORANGE, lock) : lerpColor(GREY, [150, 120, 100], warm);
+  const lineEnd = CX - R - 28; // 水平线停在圆边外 28px
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1] }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.5 }} fill={{ x: 0.5, y: 1.1 }} intensity={0.45 + 0.5 * flash + 0.15 * lit} grain={0.09} vignette={0.6}>
+        <Dust look={L} count={22} seed={3} drift={0.12} opacity={0.4} />
+      </Stage>
+
+      <AbsoluteFill style={{ transform: `scale(${push.toFixed(5)})` }}>
+        <svg width={1920} height={1080} viewBox="0 0 1920 1080" style={{ position: 'absolute', inset: 0 }}>
+          {/* 冲击环：点亮那一下从圆边外扩消散（只此一次） */}
+          {lit > 0 && shock < 1 && (
+            <circle cx={CX} cy={CY} r={R + shock * 160} fill="none" stroke={alpha('#ff8a4c', 0.55 * (1 - shock))} strokeWidth={2 + 10 * (1 - shock)} />
+          )}
+          <g transform={`translate(${CX} ${CY}) scale(${mix(2.8, 1, shrink).toFixed(5)})`} opacity={cin}>
+            {/* 主虚线圆（自转） */}
+            <g transform={`rotate(${rot.toFixed(3)})`}>
+              <circle r={R} fill="none" stroke={lineC} strokeWidth={2} strokeDasharray="22 18" />
+              {[0, 90, 180, 270].map((a) => (
+                <line key={a} x1={0} y1={-R - 22} x2={0} y2={-R + 10} stroke={lineC} strokeWidth={2.5} strokeLinecap="round" transform={`rotate(${a})`} />
+              ))}
+            </g>
+            {/* 内圈刻度环（反向慢转，降亮：纹理层） */}
+            <g transform={`rotate(${rotIn.toFixed(3)})`}>
+              <circle r={R - 34} fill="none" stroke={lineC} strokeWidth={1} opacity={0.35} />
+              {Array.from({ length: 72 }, (_, i) => {
+                const major = i % 6 === 0;
+                return (
+                  <line key={i} x1={0} y1={-(R - 34)} x2={0} y2={-(R - (major ? 58 : 44))} stroke={lineC}
+                    strokeWidth={major ? 2 : 1.2} opacity={major ? 0.7 : 0.32} transform={`rotate(${i * 5})`} />
+                );
+              })}
+            </g>
+          </g>
+          {/* 两侧水平虚线：从画框边缘内伸到圆边外 */}
+          <line x1={0} y1={CY} x2={lineEnd * ext} y2={CY} stroke={lineC} strokeWidth={2} strokeDasharray="14 12" opacity={ext} />
+          <line x1={1920} y1={CY} x2={1920 - lineEnd * ext} y2={CY} stroke={lineC} strokeWidth={2} strokeDasharray="14 12" opacity={ext} />
+          {/* 线端准星点 */}
+          <circle cx={lineEnd * ext} cy={CY} r={5} fill={lineC} opacity={ext} />
+          <circle cx={1920 - lineEnd * ext} cy={CY} r={5} fill={lineC} opacity={ext} />
+        </svg>
+
+        {/* 读数：水平线上方，左 = 旧值（弱），右 = 新值（点亮时变橙） */}
+        <div style={{ position: 'absolute', left: 120, top: CY - 74, opacity: ext, transform: `translateX(${((1 - ext) * -30).toFixed(2)}px)`, ...type(30, 500, { mono: true }), letterSpacing: '0.12em', color: L.ink3 }}>
+          BEFORE <span style={{ color: L.ink2 }}>1 week</span>
+        </div>
+        <div style={{ position: 'absolute', right: 120, top: CY - 74, opacity: ext, transform: `translateX(${((1 - ext) * 30).toFixed(2)}px)`, ...type(30, 500, { mono: true }), letterSpacing: '0.12em', color: L.ink3, textAlign: 'right' }}>
+          AFTER <span style={{ color: lit ? L.accent : L.ink2, textShadow: lit && flash > 0.02 ? `0 0 ${(18 * flash).toFixed(1)}px ${alpha(L.accent, 0.8)}` : undefined }}>4 hrs</span>
+        </div>
+
+        {/* 眉题 / 副行：圆内、字上下 */}
+        {/* 眉题 = 品牌落款：小号反白标志 + 全小写 video-shotcraft（字标规范：不做全大写） */}
+        <div style={{ position: 'absolute', left: 0, right: 0, top: CY - 200, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 16, opacity: sub(0), transform: `translateY(${((1 - sub(0)) * 16).toFixed(2)}px)`, ...type(28, 600, { mono: true }), letterSpacing: '0.16em', color: L.ink2 }}>
+          <ShotcraftMark size={40} tone="dark" />
+          <span>{BRAND.name}</span>
+        </div>
+        <div style={{ position: 'absolute', left: 0, right: 0, top: CY + 128, textAlign: 'center', opacity: sub(3), transform: `translateY(${((1 - sub(3)) * 16).toFixed(2)}px)`, ...type(40, 450), letterSpacing: '-0.01em', color: L.ink2 }}>
+          One prompt to a finished promo.
+        </div>
+
+        {/* 双层字：底层空心描边、顶层白热实心（硬切） */}
+        <div style={{
+          position: 'absolute', left: CX, top: CY, fontFamily: STATIC_SANS, fontSize: SIZE, fontWeight: 500, letterSpacing: '0.005em', lineHeight: 1,
+          opacity: born, transform: `translate(-50%, -54%) scale(${ws.toFixed(5)})`, whiteSpace: 'nowrap',
+        }}>
+          <div style={{
+            color: 'transparent', WebkitTextStroke: `2px ${strokeC}`, opacity: 1 - lit,
+            filter: zoomBlur > 0.05 ? `blur(${(zoomBlur / ws).toFixed(2)}px)` : warm > 0.01 ? `drop-shadow(0 0 ${(10 * warm).toFixed(1)}px ${alpha('#ff9a5c', 0.5 * warm)})` : undefined,
+          }}>
+            {WORD}
+          </div>
+          <div style={{
+            position: 'absolute', inset: 0, color: '#fff5ee', opacity: lit,
+            textShadow: flash > 0.01 ? `0 0 ${(14 * flash).toFixed(1)}px rgba(255,255,255,${(0.7 * flash).toFixed(3)}), 0 0 ${(60 * flash).toFixed(1)}px ${alpha(L.accent, 0.65 * flash)}` : `0 0 40px ${alpha(L.accent, 0.18)}`,
+          }}>
+            {WORD}
+          </div>
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/paper-title-card/PaperTitleCard.tsx

@@ -0,0 +1,179 @@
+// paper-title-card —— 一句话逐词 letterpress 压印上纸字卡
+// 章节转场/价值主张呼吸位：单句文案逐词压印入场（scale 大→1 + blur→0），
+// 每句恰一个强调色斜体重点词，强调色下划线 scaleX 收束，尾部整卡淡出。
+// 全片多张字卡统一 50–55f；纸底+中心暖光与纸墨风格产品画面同色系。
+// 参数化：words/sub/subDigits 可换成目标产品文案；subDigits 走 DigitRoll
+// 数字滚动（必须在本卡淡出前落定）。渲染本 demo 前把 text 复制进项目即可。
+import React from 'react';
+import { AbsoluteFill, interpolate, useCurrentFrame, Easing } from 'remotion';
+
+export const PAPER_TITLE_CARD_DURATION = 55; // ≈1.8s @30fps
+
+const SERIF = 'ui-serif, Georgia, "Times New Roman", serif';
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace';
+
+// 每句恰好一个 accent：功能名/收益词（C2）
+// br：该词后强制换行（让两行长度接近原版 "All your team’s research, / one place to go." 的分行，避免孤词）
+const WORDS: { text: string; accent?: boolean; br?: boolean }[] = [
+  { text: 'Direct' },
+  { text: 'the' },
+  { text: 'film.', br: true },
+  { text: 'Let' },
+  { text: 'the' },
+  { text: 'agent' },
+  { text: 'shoot', accent: true },
+  { text: 'it.' },
+];
+// 副行：video-shotcraft 的渲染队列语境（示意数据）
+const SUB = 'shots rendered today';
+const SUB_DIGITS = '12';
+
+// 数字滚动列（odometer 风格，复制自 template DigitRoll，数字带双份拼接保证
+// 任何目标位都有滚感；tabular-nums 防横向抖）
+const DIGITS = '0123456789';
+const DigitColumn: React.FC<{ ch: string; delay: number; lineH: number; color: string }> = ({ ch, delay, lineH, color }) => {
+  const frame = useCurrentFrame();
+  if (ch < '0' || ch > '9') {
+    return <span style={{ fontSize: 26, lineHeight: `${lineH}px`, color }}>{ch}</span>;
+  }
+  const target = DIGITS.indexOf(ch);
+  const t = interpolate(frame, [delay, delay + 22], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.25, 0.8, 0.25, 1),
+  });
+  const offset = (10 + target) * t * lineH;
+  return (
+    <span style={{ display: 'inline-block', height: lineH }}>
+      <span style={{ display: 'block', transform: `translateY(${-offset}px)` }}>
+        {(DIGITS + DIGITS).split('').map((d, j) => (
+          <span
+            key={j}
+            style={{
+              display: 'block',
+              fontSize: 26,
+              lineHeight: `${lineH}px`,
+              color,
+              fontVariantNumeric: 'tabular-nums',
+            }}
+          >
+            {d}
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+};
+
+const DigitRoll: React.FC<{ value: string; delay: number; color: string }> = ({ value, delay, color }) => {
+  const lineH = 26 * 1.15;
+  return (
+    <span style={{ display: 'inline-flex', overflow: 'hidden', height: lineH, verticalAlign: 'bottom' }}>
+      {value.split('').map((c, i) => (
+        <DigitColumn key={i} ch={c} delay={delay + i * 4} lineH={lineH} color={color} />
+      ))}
+    </span>
+  );
+};
+
+export const PaperTitleCard: React.FC = () => {
+  const frame = useCurrentFrame();
+  const duration = PAPER_TITLE_CARD_DURATION;
+  const fadeOut = interpolate(frame, [duration - 8, duration], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const underline = interpolate(frame, [16, 34], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.3, 0, 0.2, 1),
+  });
+  const subT = interpolate(frame, [10, 22], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: 'oklch(97.5% 0.008 82)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        opacity: fadeOut,
+        backgroundImage:
+          'radial-gradient(1100px 750px at 50% 42%, oklch(99.3% 0.014 88 / 0.85), transparent 65%)',
+      }}
+    >
+      <div style={{ textAlign: 'center', maxWidth: 1500 }}>
+        <div
+          style={{
+            fontFamily: SERIF,
+            fontSize: 116,
+            fontWeight: 600,
+            lineHeight: 1.14,
+            color: 'oklch(18% 0.006 82)',
+            letterSpacing: '-0.012em',
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            columnGap: '0.26em',
+          }}
+        >
+          {WORDS.map((w, i) => {
+            const delay = 4 + i * 4;
+            const t = interpolate(frame, [delay, delay + 9], [0, 1], {
+              extrapolateLeft: 'clamp',
+              extrapolateRight: 'clamp',
+              easing: Easing.bezier(0.2, 0.75, 0.3, 1),
+            });
+            return (
+              <React.Fragment key={i}>
+                <span
+                  style={{
+                    opacity: t,
+                    transform: `scale(${1.28 - 0.28 * t})`,
+                    filter: `blur(${(1 - t) * 7}px)`,
+                    display: 'inline-block',
+                    fontStyle: w.accent ? 'italic' : 'normal',
+                    color: w.accent ? 'oklch(52% 0.115 65)' : undefined,
+                  }}
+                >
+                  {w.text}
+                </span>
+                {w.br && <span style={{ flexBasis: '100%', height: 0 }} />}
+              </React.Fragment>
+            );
+          })}
+        </div>
+        <div
+          style={{
+            height: 6,
+            width: 220,
+            margin: '38px auto 0',
+            borderRadius: 3,
+            background: 'oklch(52% 0.115 65)',
+            transform: `scaleX(${underline})`,
+          }}
+        />
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 26,
+            letterSpacing: '0.12em',
+            color: 'oklch(50% 0.006 82)',
+            marginTop: 34,
+            opacity: subT,
+            textTransform: 'uppercase',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'baseline',
+            gap: '0.5em',
+          }}
+        >
+          <DigitRoll value={SUB_DIGITS} delay={12} color="oklch(52% 0.115 65)" />
+          <span>{SUB}</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/pill-chip-slot-cycle-handled/PillChipSlotCycleHandled.tsx

@@ -0,0 +1,140 @@
+// pill-chip-slot-cycle-handled — Chip Slot Cycle 胶囊滚轮挤开（motion-lab 定稿转原生 Remotion）
+// 白底句式 "Your [chip] Handled"：深色胶囊内词垂直滚轮轮换（Shots→Camera→Sound→Renders，
+// video-shotcraft 替你包办的四件事：镜头 / 运镜 / 音效 / 渲染），
+// 上下露出灰色幽灵项，胶囊宽度随词长平滑变化，两侧文字被自然挤开收拢。
+// 设计坐标 480×270（DesignStage 等比放大），参数表数值以此坐标系标定。
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';
+
+export const PILL_CHIP_SLOT_CYCLE_HANDLED_DURATION = 150; // 5000ms @30fps
+
+const WORDS = [
+  { w: 'Shots', e: '🎬' },
+  { w: 'Camera', e: '🎥' },
+  { w: 'Sound', e: '🔊' },
+  { w: 'Renders', e: '🎞️' },
+];
+const FONT = '700 22px -apple-system,system-ui,sans-serif';
+// 兜底词宽（原 effect.js 未挂载时的估算：字符数×13，再加胶囊内留白 74）；
+// 首帧 useLayoutEffect 用 offsetWidth 实测替换，与原渲染逐像素一致
+const FALLBACK_WIDTHS = WORDS.map((o) => o.w.length * 13 + 74);
+
+// 两侧静态文字（"Your" / "Handled"）
+const SIDE: React.CSSProperties = {
+  color: '#15171d',
+  fontWeight: 800,
+  fontSize: 30,
+  letterSpacing: -0.5,
+  flex: 'none',
+};
+
+export const PillChipSlotCycleHandled: React.FC = () => {
+  const t = useT();
+
+  // 量宽：与原 effect.js 相同，用隐藏 span 实测每个词的 offsetWidth（+74 胶囊留白），
+  // 只在首次布局量一次；量到前用兜底估算，避免首帧闪动
+  const measRef = useRef<HTMLDivElement>(null);
+  const [widths, setWidths] = useState<number[]>(FALLBACK_WIDTHS);
+  useLayoutEffect(() => {
+    const spans = measRef.current?.children;
+    if (!spans) return;
+    setWidths(
+      WORDS.map((o, i) => ((spans[i] as HTMLElement).offsetWidth || o.w.length * 13) + 74),
+    );
+  }, []);
+
+  // 三次切换：0.25 / 0.47 / 0.69，每次用 0.12 的 inOutCubic 推进一格
+  let pos = 0;
+  for (const s0 of [0.25, 0.47, 0.69]) pos += seg(t, s0, s0 + 0.12, E.inOutCubic);
+  const ci = Math.min(WORDS.length - 1, Math.floor(pos));
+  const frac = pos - ci;
+  // 胶囊宽度随当前词→下一词插值，平滑挤开两侧文字
+  const chipW = lerp(frac, widths[ci], widths[Math.min(ci + 1, WORDS.length - 1)]);
+
+  // 幽灵项：当前词的前/后邻居，随滚动微移，落定时回到基准透明度
+  const near = Math.round(pos);
+  const roll = (pos - near) * 48 * 0.5;
+  const settle = 1 - Math.min(1, Math.abs(pos - near) * 3);
+  const ghost = (top: number): React.CSSProperties => ({
+    position: 'absolute',
+    left: '50%',
+    top,
+    font: FONT,
+    color: '#15171d',
+    whiteSpace: 'nowrap',
+    transform: `translateX(-50%) translateY(${-roll}px)`,
+    opacity: 0.13 * (0.4 + settle * 0.6),
+  });
+
+  return (
+    <DesignStage bg="#fbfbfd">
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontFamily: '-apple-system,system-ui,sans-serif',
+        }}
+      >
+        {/* 隐藏量宽 span（与原 setup 的 meas 等价，不参与布局显示） */}
+        <div ref={measRef} style={{ position: 'absolute', visibility: 'hidden' }}>
+          {WORDS.map((o) => (
+            <span key={o.w} style={{ whiteSpace: 'nowrap', font: FONT }}>
+              {o.w}
+            </span>
+          ))}
+        </div>
+        <div style={SIDE}>Your</div>
+        <div style={{ position: 'relative', flex: 'none' }}>
+          {/* 深色胶囊：overflow hidden 里放 4 行词的滚轮列 */}
+          <div
+            style={{
+              position: 'relative',
+              height: 48,
+              width: chipW,
+              margin: '0 14px',
+              flex: 'none',
+              borderRadius: 99,
+              background: '#1a1c24',
+              boxShadow: '0 8px 24px rgba(20,22,40,.22)',
+              overflow: 'hidden',
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                transform: `translateY(${-pos * 48}px)`,
+              }}
+            >
+              {WORDS.map(({ w, e }) => (
+                <div
+                  key={w}
+                  style={{
+                    height: 48,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 9,
+                    paddingLeft: 18,
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  <span style={{ fontSize: 18 }}>{e}</span>
+                  <span style={{ font: FONT, color: '#fff' }}>{w}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 胶囊外上下的灰色幽灵项 */}
+          <div style={ghost(-38)}>{near > 0 ? WORDS[near - 1].w : ''}</div>
+          <div style={ghost(58)}>{near < WORDS.length - 1 ? WORDS[near + 1].w : ''}</div>
+        </div>
+        <div style={SIDE}>Handled</div>
+      </div>
+    </DesignStage>
+  );
+};