dsh-drawai 0.4.2 → 0.4.4

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

@@ -1,179 +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>
-  );
-};
+// 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

@@ -1,140 +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>
-  );
-};
+// 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>
+  );
+};