dsh-drawai 0.3.4 → 0.4.1

package/lib/motion/shotcraft/upstream/demos/interaction/collab-cursor-moves/CursorCastEnsemble.tsx

@@ -0,0 +1,297 @@
+// cursor-cast-ensemble —— figma 0:05 (cursor-badge-cast) + miro 全片 cursor-ensemble-ambience
+// 五枚具名彩色光标错峰飞入一块白板画布，落位后持续漂移当"团队在场"的氛围层；其中一枚（Rita）
+// 停在中央简报卡上打字补完标题（cameo），最后全员聚拢到卡片四周围观。
+//
+// 第二轮重设计（瓷白 · 无限画布的"开工会"）：
+// - look = porcelain（冷白 + 钴蓝）。画面是 video-shotcraft 的一块分镜白板：左上标志 + 板名、右上在线头像组、
+//   底部浮动工具条，点阵画布上 6 张便签（34px 正文，读得清）+ 中央一张大简报卡。不再是灰阶道具。
+// - 身份编码贯穿全画面：五人五色（Ines 钴蓝 / Kofi 翠绿 / Mei 橘 / Tomás 紫 / Rita 洋红），
+//   便签底色是作者色的淡彩、角落有作者色圆点；右上头像组随每个人入场同帧弹出——"人到了"三处同时成立。
+// - Rita 的光标挂在打字光标上（行内锚点）：标题 "Ship a launch film by Friday." 88px 逐字出现，
+//   她的箭头始终跟着插入点走、换行也跟着换；打完后卡片状态 Draft → Ready。
+// - 空间：画布 / 便签 / 简报卡 / 光标四层，全程极缓推镜（1 → 1.045，焦点在卡片），远层便签视差更小、
+//   轻微虚化降对比，近层清晰；光标投影 + 名牌带色辉光。
+//
+// 时间表（30fps，共 156f）：
+//   0–4      画布、便签、空简报卡已在（开场即有画面），推镜开始
+//   2–30     四枚光标从四边错峰 spring 飞入（stagger 先密后疏），名牌晚 10f 随减速淡入上浮；头像组同帧弹出
+//   20–46    Rita 从顶部飞入，落到标题起点
+//   48–104   打字：28 字 + 人手节奏抖动（1.6–2.4f/字），Rita 手稳（不漂移），箭头跟插入点
+//   104–112  卡片状态 Draft → Ready（绿点）
+//   98–126   其余四人 smooth 聚拢到卡片四周（漂移保留 25%，不归零），不压标题
+//   126–156  hold：漂移继续、推镜继续（画面活着，但不抢）
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, ramp, mix } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, springAt, type, TYPE } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const CURSOR_CAST_ENSEMBLE_DURATION = 156;
+
+const L = LOOKS.porcelain;
+const clamp01 = (t: number) => (t < 0 ? 0 : t > 1 ? 1 : t);
+
+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;
+};
+
+type Actor = {
+  name: string; initial: string; color: string; tint: string;
+  from: [number, number]; home: [number, number]; gather: [number, number];
+  delay: number; phase: number;
+};
+
+// 名牌颜色 = 身份编码：五人五色，便签 / 头像 / 光标三处一致
+const ACTORS: Actor[] = [
+  { name: 'Ines', initial: 'I', color: '#2f5bff', tint: '#e3eaff', from: [-160, 260], home: [330, 470], gather: [318, 372], delay: 2, phase: 0.0 },
+  { name: 'Kofi', initial: 'K', color: '#0e9f6e', tint: '#dcf4e8', from: [2080, 220], home: [1600, 470], gather: [1512, 330], delay: 7, phase: 1.7 },
+  { name: 'Mei', initial: 'M', color: '#f26a1b', tint: '#ffe9d8', from: [-160, 980], home: [380, 860], gather: [900, 784], delay: 11, phase: 3.1 },
+  { name: 'Tomás', initial: 'T', color: '#7b4dff', tint: '#ece4ff', from: [2080, 1000], home: [1540, 880], gather: [1470, 800], delay: 16, phase: 4.4 },
+  { name: 'Rita', initial: 'R', color: '#ec2f7c', tint: '#ffe2ee', from: [980, -200], home: [0, 0], gather: [0, 0], delay: 22, phase: 5.6 },
+];
+const RITA = 4;
+
+// 简报卡（画布坐标）
+const CARD = { x: 432, y: 318, w: 1056, h: 432, pad: 56 };
+const TITLE = 'Ship a launch film by Friday.'; // 与原句同为 29 字 / 5 个空格：打字节奏与收尾帧不变
+const TITLE_FS = 88;
+const TITLE_TOP = CARD.y + CARD.pad + 66; // 眉题行之下
+const TYPE0 = 48;
+const READY = 106;
+
+// 人手打字节奏：每字 1.6–2.4f（确定性抖动），空格后略停
+const TYPE_AT: number[] = (() => {
+  const r = mulberry32(41);
+  const at: number[] = [];
+  let f = TYPE0;
+  for (let i = 0; i < TITLE.length; i++) {
+    at.push(f);
+    f += 1.6 + r() * 0.8 + (TITLE[i] === ' ' ? 0.9 : 0);
+  }
+  return at;
+})();
+const TYPE_END = TYPE_AT[TYPE_AT.length - 1];
+
+// 便签：作者 = ACTORS 下标；depth 0 近 / 1 远（远层小一点、虚一点、视差小）
+const NOTES = [
+  // 便签 = 这支片子的分镜与制作待办（video-shotcraft 的世界）
+  { x: 96, y: 156, rot: -3.2, owner: 0, depth: 1, title: 'Open on a crash zoom', meta: '4 votes' },
+  { x: 1540, y: 150, rot: 2.6, owner: 1, depth: 1, title: 'Logo sting outro', meta: 'In review' },
+  { x: 60, y: 560, rot: 2.2, owner: 2, depth: 0, title: 'Beat map at 120 BPM', meta: '2 comments' },
+  { x: 1580, y: 560, rot: -2.4, owner: 3, depth: 0, title: 'Real page captures', meta: 'Due Wed' },
+  { x: 560, y: 812, rot: -1.6, owner: 4, depth: 1, title: 'Renders: 214', meta: 'Live count' },
+  { x: 1090, y: 820, rot: 1.8, owner: 0, depth: 1, title: 'SFX pass', meta: 'Needs mix' },
+];
+
+const ARROW = 'M0.5 0.5 L0.5 17.2 L4.7 13.4 L7.3 19.5 L10 18.3 L7.4 12.3 L13 12.3 Z';
+const CK = 4.2; // 光标每单位像素（≈84px 高）
+
+const Cursor: React.FC<{ a: Actor; badge: number; style?: React.CSSProperties }> = ({ a, badge, style }) => (
+  <div style={{ position: 'absolute', ...style }}>
+    <svg width={14 * CK} height={21 * CK} viewBox="0 0 14 21" style={{ display: 'block', overflow: 'visible', filter: `drop-shadow(0 3px 4px ${alpha(L.shadow, 0.28)})` }}>
+      <path d={ARROW} fill={a.color} stroke="#ffffff" strokeWidth={1.1} strokeLinejoin="round" />
+    </svg>
+    <div style={{
+      position: 'absolute', left: 9.4 * CK, top: 17.6 * CK, whiteSpace: 'nowrap',
+      background: `linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 50%), ${a.color}`,
+      color: '#fff', borderRadius: '6px 18px 18px 18px', padding: '7px 16px 8px',
+      ...type(26, 680), letterSpacing: '-0.005em',
+      boxShadow: `inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px ${alpha(L.shadow, 0.14)}, 0 8px 22px -6px ${alpha(a.color, 0.55)}`,
+      opacity: badge, transform: `translateY(${(1 - badge) * 12}px)`,
+    }}>
+      {a.name}
+    </div>
+  </div>
+);
+
+export const CursorCastEnsemble: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // 推镜：全程极缓，焦点在卡片中心偏上
+  const cam = mix(1, 1.045, ramp(f, 0, 156, EASE.swift));
+  const camFar = mix(1, 1.02, ramp(f, 0, 156, EASE.swift));
+
+  const gatherT = ramp(f, 98, 28, EASE.smooth);
+  const typed = TYPE_AT.filter((t) => f >= t).length;
+  const ready = ramp(f, READY, 8, EASE.out);
+  const typingHold = clamp01((f - 40) / 8); // Rita 手稳
+
+  // 光标位置（画布坐标）
+  const posOf = (i: number): [number, number] => {
+    const a = ACTORS[i];
+    const s = springAt(f, a.delay, { damping: 15, stiffness: 80, mass: 0.9 });
+    let x = mix(a.from[0], a.home[0], s);
+    let y = mix(a.from[1], a.home[1], s);
+    const settled = clamp01((f - a.delay - 20) / 12);
+    const dX = Math.sin(f * 0.055 + a.phase) * 40 + Math.sin(f * 0.021 + a.phase * 2) * 26;
+    const dY = Math.cos(f * 0.047 + a.phase * 1.3) * 32 + Math.cos(f * 0.017 + a.phase) * 20;
+    x += dX * settled * (1 - gatherT);
+    y += dY * settled * (1 - gatherT);
+    x = mix(x, a.gather[0] + dX * 0.25, gatherT);
+    y = mix(y, a.gather[1] + dY * 0.25, gatherT);
+    return [x, y];
+  };
+
+  // Rita：飞入段的偏移（相对插入点锚点），落定后锚在插入点
+  const rita = ACTORS[RITA];
+  const rs = springAt(f, rita.delay, { damping: 16, stiffness: 70, mass: 1 });
+  const anchor0: [number, number] = [CARD.x + CARD.pad, TITLE_TOP];
+  const rDrift = 1 - typingHold * (f < TYPE_END + 6 ? 1 : 1 - clamp01((f - TYPE_END - 6) / 14) * 0.75);
+  const ritaOff: [number, number] = [
+    // 落定偏移 (12, -8)：箭头尖停在插入点右上，身体和名牌落在"还没打出来"的空位里，不压已打的字
+    (rita.from[0] - anchor0[0]) * (1 - rs) + 12 + Math.sin(f * 0.06 + 1) * 18 * rDrift,
+    (rita.from[1] - anchor0[1]) * (1 - rs) - 8 + Math.cos(f * 0.05) * 14 * rDrift,
+  ];
+  const caretOn = typed < TITLE.length || Math.floor(f / 9) % 2 === 0;
+
+  const avatarPop = (i: number) => springAt(f, ACTORS[i].delay + 8, { damping: 15, stiffness: 190 });
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.36 }} fill={{ x: 0.9, y: 0.95 }} vignette={0.2}>
+        {/* 点阵画布（远层，视差最小） */}
+        <div style={{
+          position: 'absolute', inset: -60, transform: `scale(${camFar})`, transformOrigin: '50% 50%',
+          backgroundImage: `radial-gradient(${alpha(L.ink, 0.13)} 1.6px, transparent 1.9px)`, backgroundSize: '40px 40px',
+          WebkitMaskImage: 'radial-gradient(ellipse 75% 75% at 50% 50%, #000 45%, transparent 100%)',
+          maskImage: 'radial-gradient(ellipse 75% 75% at 50% 50%, #000 45%, transparent 100%)',
+        }} />
+      </Stage>
+
+      {/* 画布层（便签 + 简报卡 + 光标）随推镜缩放 */}
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${cam})`, transformOrigin: '50% 48%' }}>
+        {NOTES.map((n, i) => {
+          const o = ACTORS[n.owner];
+          const far = n.depth === 1;
+          return (
+            <div key={i} style={{
+              position: 'absolute', left: n.x, top: n.y, width: 288, height: 232, borderRadius: 10,
+              background: `linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 30%), ${o.tint}`,
+              boxShadow: `inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px ${alpha(L.shadow, 0.08)}, 0 18px 34px -16px ${alpha(L.shadow, 0.3)}`,
+              transform: `rotate(${n.rot}deg) scale(${far ? 0.94 : 1})`,
+              filter: far ? 'blur(1.4px) saturate(0.85)' : undefined, opacity: far ? 0.78 : 1,
+              padding: '26px 26px 22px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column',
+            }}>
+              <div style={{ ...type(36, 700), color: alpha(L.ink, 0.86), lineHeight: 1.12 }}>{n.title}</div>
+              <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
+                <span style={{ width: 14, height: 14, borderRadius: 7, background: o.color }} />
+                <span style={{ ...type(24, 560), color: alpha(L.ink, 0.5) }}>{o.name} · {n.meta}</span>
+              </div>
+            </div>
+          );
+        })}
+
+        {/* 中央简报卡：Rita 打字的舞台 */}
+        <div style={{
+          position: 'absolute', left: CARD.x, top: CARD.y, width: CARD.w, height: CARD.h, borderRadius: 28,
+          background: 'linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%)', border: `1px solid ${L.line}`,
+          boxShadow: `inset 0 1px 0 #fff, 0 2px 4px ${alpha(L.shadow, 0.06)}, 0 40px 80px -30px ${alpha(L.shadow, 0.35)}`,
+          padding: CARD.pad, boxSizing: 'border-box',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 16, height: 40 }}>
+            <span style={{ ...type(TYPE.label + 2, 700, { caps: true }), letterSpacing: '0.16em', color: L.ink3 }}>Project brief</span>
+            <span style={{ width: 5, height: 5, borderRadius: 3, background: L.ink3 }} />
+            <span style={{ ...type(28, 520), color: L.ink2 }}>Due Thu, Oct 16</span>
+            {/* 状态：Draft → Ready */}
+            <span style={{
+              marginLeft: 'auto', position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 10, height: 44, padding: '0 18px',
+              borderRadius: 22, background: ready > 0.5 ? alpha('#0e9f6e', 0.1) : L.surface2,
+              border: `1px solid ${ready > 0.5 ? alpha('#0e9f6e', 0.3) : L.line}`,
+              transform: `scale(${1 + 0.06 * Math.sin(Math.PI * ready)})`,
+            }}>
+              <span style={{ width: 12, height: 12, borderRadius: 6, background: ready > 0.5 ? '#0e9f6e' : L.ink3 }} />
+              <span style={{ ...type(26, 650), color: ready > 0.5 ? '#0b7a55' : L.ink2 }}>{ready > 0.5 ? 'Ready' : 'Draft'}</span>
+            </span>
+          </div>
+          {/* 标题：逐字 + Rita 的插入点（行内锚点，箭头挂在上面） */}
+          <div style={{ marginTop: 26, ...type(TITLE_FS, 760), color: L.ink, lineHeight: 1.04, minHeight: TITLE_FS * 2.1 }}>
+            {TITLE.slice(0, typed)}
+            <span style={{ position: 'relative', display: 'inline-block', width: 0, height: TITLE_FS * 0.8, verticalAlign: '-0.06em' }}>
+              <span style={{
+                position: 'absolute', left: 3, top: -4, width: 6, height: TITLE_FS * 0.92, borderRadius: 3, background: rita.color,
+                opacity: f >= TYPE0 - 6 && caretOn ? 1 : 0,
+              }} />
+              <Cursor a={rita} badge={ramp(f, rita.delay + 12, 12, EASE.out)} style={{ left: ritaOff[0], top: ritaOff[1], zIndex: 5 }} />
+            </span>
+          </div>
+          {/* 卡片底部：负责人 + 进度（辅助信息，32px 档） */}
+          <div style={{ position: 'absolute', left: CARD.pad, right: CARD.pad, bottom: CARD.pad - 6, display: 'flex', alignItems: 'center', gap: 28 }}>
+            <span style={{ display: 'flex' }}>
+              {[4, 0, 1].map((k, j) => (
+                <span key={k} style={{
+                  width: 44, height: 44, borderRadius: 22, background: ACTORS[k].color, marginLeft: j ? -12 : 0, border: '3px solid #fff',
+                  display: 'grid', placeItems: 'center', color: '#fff', ...type(20, 760),
+                }}>{ACTORS[k].initial}</span>
+              ))}
+            </span>
+            <span style={{ ...type(30, 540), color: L.ink2 }}>3 owners · 12 shots</span>
+            <span style={{ marginLeft: 'auto', width: 260, height: 10, borderRadius: 5, background: L.surface2, overflow: 'hidden', border: `1px solid ${L.line}` }}>
+              <span style={{ display: 'block', height: '100%', width: `${mix(38, 72, ready)}%`, borderRadius: 5, background: L.accent }} />
+            </span>
+            <span style={{ ...type(30, 650), color: L.ink, width: 70, textAlign: 'right' }}>{Math.round(mix(38, 72, ready))}%</span>
+          </div>
+        </div>
+
+        {/* 其余四枚光标 */}
+        {ACTORS.slice(0, 4).map((a, i) => {
+          const [x, y] = posOf(i);
+          return <Cursor key={a.name} a={a} badge={ramp(f, a.delay + 10, 12, EASE.out)} style={{ left: x, top: y, zIndex: 10 }} />;
+        })}
+      </div>
+
+      {/* 界面 chrome（不随推镜）：左上板名、右上在线头像组、底部工具条 */}
+      <div style={{ position: 'absolute', left: 64, top: 48, display: 'flex', alignItems: 'center', gap: 18 }}>
+        <span style={{ width: 48, height: 48, borderRadius: 14, background: L.ink, display: 'grid', placeItems: 'center' }}>
+          <ShotcraftMark size={34} tone="dark" />
+        </span>
+        <span style={{ ...type(32, 700), color: L.ink }}>Launch Film Kickoff</span>
+        <span style={{ ...type(26, 500), color: L.ink3 }}>{BRAND.name}</span>
+      </div>
+      <div style={{ position: 'absolute', right: 64, top: 46, display: 'flex', alignItems: 'center', gap: 18 }}>
+        <span style={{ display: 'flex' }}>
+          {ACTORS.map((a, i) => {
+            const p = avatarPop(i);
+            return (
+              // 槽宽随弹出长出来：头像组从右往左"挤进"新来的人，不留空位
+              <span key={a.name} style={{ position: 'relative', width: (i ? 42 : 56) * clamp01(p), height: 56 }}>
+                <span style={{
+                  position: 'absolute', right: 0, top: 0, width: 56, height: 56, borderRadius: 28, background: a.color, border: '3px solid #fff',
+                  boxSizing: 'border-box', display: 'grid', placeItems: 'center', color: '#fff', ...type(24, 760),
+                  transform: `scale(${p})`, opacity: clamp01(p * 3), boxShadow: `0 4px 12px -4px ${alpha(a.color, 0.6)}`,
+                }}>{a.initial}</span>
+              </span>
+            );
+          })}
+        </span>
+        <span style={{
+          height: 52, padding: '0 22px', borderRadius: 26, background: L.accent, color: '#fff', display: 'grid', placeItems: 'center', ...type(26, 680),
+          boxShadow: `0 8px 20px -8px ${alpha(L.accent, 0.7)}`,
+        }}>Share</span>
+      </div>
+      <div style={{
+        position: 'absolute', left: '50%', bottom: 40, transform: 'translateX(-50%)', height: 72, padding: '0 14px', borderRadius: 22,
+        background: alpha('#ffffff', 0.92), border: `1px solid ${L.line}`, display: 'flex', alignItems: 'center', gap: 6,
+        boxShadow: `inset 0 1px 0 #fff, 0 16px 36px -14px ${alpha(L.shadow, 0.3)}`,
+      }}>
+        {['select', 'hand', 'note', 'text', 'shape', 'pen'].map((k, i) => (
+          <span key={k} style={{
+            width: 52, height: 52, borderRadius: 14, display: 'grid', placeItems: 'center',
+            background: i === 2 ? alpha(L.accent, 0.1) : 'transparent',
+          }}>
+            <svg width={26} height={26} viewBox="0 0 26 26" fill="none" stroke={i === 2 ? L.accent : L.ink2} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+              {k === 'select' && <path d="M7 5v15l4-4 3 6 3-1.4-3-5.8h6z" />}
+              {k === 'hand' && <path d="M9 13V7.5a1.5 1.5 0 0 1 3 0V12M12 11V6a1.5 1.5 0 0 1 3 0v5M15 11V7a1.5 1.5 0 0 1 3 0v7c0 4-2.5 6.5-6 6.5S7 18 6 15l-1.5-3a1.5 1.5 0 0 1 2.6-1.5L9 13" />}
+              {k === 'note' && <path d="M6 5h14v10l-5 5H6zM15 20v-5h5" />}
+              {k === 'text' && <path d="M6 7V5h14v2M13 5v16M10 21h6" />}
+              {k === 'shape' && <><rect x={5} y={5} width={9} height={9} rx={2} /><circle cx={17} cy={17} r={4.5} /></>}
+              {k === 'pen' && <path d="M5 21l1.2-4.6L17 5.6a2 2 0 0 1 2.8 2.8L9 19.2zM15 7.6l3.4 3.4" />}
+            </svg>
+          </span>
+        ))}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/interaction/glass-pill-dictation-typing/GlassPillDictationTyping.tsx

@@ -0,0 +1,157 @@
+// glass-pill-dictation-typing — Glass Pill Dictation 玻璃胶囊听写
+// 一条定宽玻璃胶囊以约 1.25 倍略大浮现、缓落到位；胶囊内部自左淡到右浓铺一层暖光（"在等你开口"）；
+// 光标先行，随后听写的句子匀速打出，光随打字进度渐渐退去，收尾成一条中性的磨砂玻璃条。
+// 全片最安静的一拍：只做三件事——落位、打字、光退。
+//
+// 第二轮重设计（沙色日光 · 磨砂玻璃）：
+// - look = sand（米色 + 赤陶）。从近黑底换成午后日光的亮场：胶囊背后是一轮暖色"太阳"和几团柔光，
+//   胶囊用 backdrop-filter 真磨砂（背后的光被它晕开），顶沿白色高光线、上亮下暗的体积、暖色两层落地影。
+// - 主体放大到"看得见材质"：1240×132 的胶囊、56px 听写字、92px 圆形声波按钮；画面只有胶囊 + 底部一枚 video-shotcraft 品牌小标。
+// - 光的因果做满三层，都挂在同一个 g（1→0）上：胶囊内的赤陶→杏色渐层、背后那轮暖光、胶囊下方的地面反光，
+//   一起随打字退去；声波按钮从"实心暖色"退成"描边中性色"。
+// - 曲线：落位 scale 1.25→1 用强 ease-out（snappy，20f），opacity 前 2f 就满（先"在了"再落位），
+//   落位前半段带一点景深虚化（离镜头更近）；打字匀速 2f/字（听写不犹豫）；光退 smooth in-out。
+//
+// 时间表（30fps，共 100f）：
+//   0–2      胶囊整体出现（opacity 满），光在最亮
+//   0–20     落位：scale 1.25→1（snappy）+ 虚化 6px→0（前 14f）；2f 光标先行
+//   8–64     打字：28 字匀速（2f/字）
+//   10–72    光退：g 1→0（smooth），三层光与声波按钮同步
+//   66–74    光标撤掉
+//   74–100   hold：中性磨砂玻璃条 + 句子，环境光极缓呼吸
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, ramp, mix } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const GLASS_PILL_DICTATION_TYPING_DURATION = 100;
+
+const L = LOOKS.sand;
+// 内嵌光：赤陶 → 杏色（换品牌色只改这两个）
+const WARM = '#d9643a';
+const APRICOT = '#ffb070';
+
+const PW = 1240; // 定宽：不随打字伸缩（伸缩会读作 chip 而不是输入条）
+const PH = 132;
+const PX = (1920 - PW) / 2;
+const PY = 540 - PH / 2;
+const BTN = 92;
+const BARS = [30, 16, 24, 13, 20]; // 声波竖条基准高（左高右低的听写图标）
+const TEXT = 'Cut a launch film for my app'; // 28 字，与原句同长：打字窗口 8–64f 不变
+const TYPE0 = 8;
+const CPF = 2; // 帧/字（匀速）
+
+const hexRgb = (h: string) => {
+  const n = parseInt(h.replace('#', ''), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+};
+const mixHex = (a: string, b: string, t: number) => {
+  const A = hexRgb(a), B = hexRgb(b);
+  return `rgb(${A.map((v, i) => Math.round(v + (B[i] - v) * t)).join(',')})`;
+};
+
+export const GlassPillDictationTyping: React.FC = () => {
+  const f = useCurrentFrame();
+
+  const appear = ramp(f, 0, 2, EASE.linear);
+  const land = ramp(f, 0, 20, EASE.snappy);
+  const s = mix(1.25, 1, land);
+  const defocus = 6 * (1 - ramp(f, 0, 14, EASE.out));
+  const n = Math.floor(Math.min(1, Math.max(0, (f - TYPE0) / (TEXT.length * CPF))) * TEXT.length + 1e-6);
+  const caret = ramp(f, 2, 2, EASE.linear) * (1 - ramp(f, 66, 8, EASE.out));
+  const g = 1 - ramp(f, 10, 62, EASE.smooth); // 光：随打字退去
+  const breathe = 0.5 + 0.5 * Math.sin(f / 22);
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.36, y: 0.12 }} fill={{ x: 0.8, y: 0.9 }} vignette={0.22}>
+        {/* 胶囊背后的"太阳"：暖光主体，跟胶囊内的光一起退到只剩一点余温 */}
+        {/* 光心压在胶囊右段正后方：磨砂玻璃把它晕开，读作"光在玻璃后面/里面" */}
+        <div style={{
+          position: 'absolute', left: 1330, top: 470, width: 1100, height: 900, marginLeft: -550, marginTop: -450, borderRadius: '50%',
+          background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(APRICOT, 0.15 + 0.6 * g)} 0%, ${alpha(APRICOT, 0.1 + 0.42 * g)} 18%, ${alpha(WARM, 0.06 + 0.26 * g)} 40%, ${alpha(WARM, 0.02 + 0.08 * g)} 62%, ${alpha(WARM, 0)} 80%)`,
+        }} />
+        {/* 几团远景柔光（磨砂玻璃后面要有东西可晕） */}
+        {[
+          { x: 520, y: 470, r: 220, c: '#fff4e4', a: 0.9 },
+          { x: 820, y: 620, r: 160, c: '#e9b08a', a: 0.35 },
+          { x: 1460, y: 610, r: 200, c: '#f6d2a8', a: 0.55 },
+        ].map((b, i) => (
+          <div key={i} style={{
+            position: 'absolute', left: b.x - b.r + Math.sin(f / 40 + i) * 6, top: b.y - b.r, width: b.r * 2, height: b.r * 2, borderRadius: '50%',
+            background: `radial-gradient(circle, ${alpha(b.c, b.a)} 0%, ${alpha(b.c, 0)} 70%)`,
+          }} />
+        ))}
+        {/* 地面反光：胶囊下方一抹暖色，随 g 熄灭 */}
+        <div style={{
+          position: 'absolute', left: PX + PW * 0.35, width: PW * 0.75, top: PY + PH * 0.9, height: 220,
+          background: `radial-gradient(ellipse 50% 40% at 60% 20%, ${alpha(WARM, 0.22 * g)} 0%, ${alpha(WARM, 0)} 72%)`,
+          opacity: appear,
+        }} />
+      </Stage>
+
+      {/* 胶囊本体 */}
+      <div style={{
+        position: 'absolute', left: PX, top: PY, width: PW, height: PH, borderRadius: PH / 2, overflow: 'hidden', boxSizing: 'border-box',
+        display: 'flex', alignItems: 'center', padding: `0 20px 0 58px`, opacity: appear,
+        transform: `scale(${s})`, filter: defocus > 0.05 ? `blur(${defocus.toFixed(2)}px)` : undefined,
+        background: `linear-gradient(180deg, ${alpha('#ffffff', 0.62)} 0%, ${alpha('#fffaf3', 0.42)} 55%, ${alpha('#f3e7d8', 0.5)} 100%)`,
+        backdropFilter: 'blur(26px) saturate(1.3)', WebkitBackdropFilter: 'blur(26px) saturate(1.3)',
+        border: `1.5px solid ${alpha('#ffffff', 0.85)}`,
+        // 落地影两层（近地小而实 + 远地大而虚，落位时收紧）直接挂在胶囊上，与玻璃同一个圆角
+        boxShadow: `0 0 0 1px ${alpha(L.shadow, 0.07)}, inset 0 2px 0 ${alpha('#ffffff', 0.95)}, inset 0 -10px 24px ${alpha('#c9a888', 0.22)}, ` +
+          `0 ${mix(10, 4, land).toFixed(1)}px ${mix(20, 10, land).toFixed(1)}px ${alpha(L.shadow, 0.12)}, 0 ${mix(60, 36, land).toFixed(1)}px 70px -28px ${alpha(L.shadow, 0.4)}, ` +
+          `0 0 ${60 * g}px ${alpha(APRICOT, 0.45 * g)}`,
+      }}>
+        {/* 内嵌暖光：左淡右浓，随打字退去（光在玻璃里面，不是外部光晕） */}
+        <div style={{
+          position: 'absolute', inset: 0, pointerEvents: 'none', opacity: g,
+          background: `linear-gradient(90deg, ${alpha(WARM, 0)} 0%, ${alpha(WARM, 0.18)} 38%, ${alpha(WARM, 0.62)} 78%, ${alpha(APRICOT, 0.95)} 100%)`,
+        }} />
+        <div style={{
+          position: 'absolute', inset: 0, pointerEvents: 'none', opacity: g * 0.7, mixBlendMode: 'screen',
+          background: `radial-gradient(ellipse 34% 130% at 100% 100%, ${alpha('#ffe2b8', 0.9)} 0%, ${alpha('#ffe2b8', 0)} 70%)`,
+        }} />
+        {/* 顶沿高光线：两端渐隐，裁在圆角里 */}
+        <div style={{
+          position: 'absolute', left: PH * 0.45, right: PH * 0.45, top: 3, height: 1.5, pointerEvents: 'none',
+          background: `linear-gradient(90deg, ${alpha('#ffffff', 0)}, ${alpha('#ffffff', 0.95)} 20%, ${alpha('#ffffff', 0.7)} 75%, ${alpha('#ffffff', 0)})`,
+        }} />
+        {/* 听写文字 + 光标 */}
+        <div style={{ position: 'relative', ...type(56, 500), letterSpacing: '-0.015em', color: L.ink, whiteSpace: 'pre', flex: 'none' }}>
+          {TEXT.slice(0, n)}
+        </div>
+        <div style={{
+          position: 'relative', width: 4, height: 62, marginLeft: 4, borderRadius: 2, flex: 'none', opacity: caret,
+          background: mixHex(L.ink, WARM, 0.8 * g),
+        }} />
+        {/* 声波按钮：实心暖色 → 描边中性 */}
+        <div style={{
+          position: 'relative', marginLeft: 'auto', width: BTN, height: BTN, borderRadius: BTN / 2, flex: 'none', boxSizing: 'border-box',
+          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+          background: `linear-gradient(180deg, ${alpha('#ffffff', 0.35 * g)}, ${alpha('#ffffff', 0)}), ${alpha(WARM, 0.92 * g)}`,
+          border: `1.5px solid ${g > 0.5 ? alpha('#ffffff', 0.5) : alpha(L.ink, 0.16 + 0.1 * (1 - g))}`,
+          boxShadow: `inset 0 1.5px 0 ${alpha('#ffffff', 0.5)}, 0 ${6 * g}px ${18 * g}px -6px ${alpha(WARM, 0.8 * g)}`,
+        }}>
+          {BARS.map((h, i) => (
+            <div key={i} style={{
+              width: 5, borderRadius: 3, height: h + 2.4 * Math.sin(f * 0.5 + i * 1.7),
+              background: mixHex(L.ink2, '#fffaf3', g),
+            }} />
+          ))}
+        </div>
+      </div>
+
+      {/* 品牌小标（静态，跟胶囊一起出现，不抢戏） */}
+      <div style={{
+        position: 'absolute', left: 0, right: 0, bottom: 112, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 14,
+        opacity: ramp(f, 4, 16, EASE.out) * (0.9 + 0.1 * breathe),
+      }}>
+        <ShotcraftMark size={34} tone="light" />
+        <span style={{ ...type(30, 650), color: L.ink2 }}>{BRAND.name}</span>
+        <span style={{ ...type(30, 450), color: L.ink3 }}>· speak or type</span>
+      </div>
+    </AbsoluteFill>
+  );
+};