dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/interaction/canvas-materialize-moves/PanelToCanvasMaterialize.tsx

@@ -0,0 +1,352 @@
+// panel-to-canvas-materialize —— miro-promo 84–92s
+// 侧面板列表行逐个打勾 → 按钮按下 → 三行沿上抛弧线错峰飞出面板、跨容器变形成画布上的三张卡（行→卡形态迁移）。
+//
+// 第二轮重设计（沙色暖场 · 研究洞察上墙）：
+// - look = sand（米色纸面 · 赤陶强调 · 藏青点缀）。产品即 video-shotcraft：右侧「Shot recipes」面板列着 5 张镜头配方卡
+//   （32px 行标题、分类标签与挑卡人），左侧是一块开放的分镜板（标志 + 衬线大标题「Launch film」+ 淡点阵画布）。
+// - 动作链有因果：光标逐个点三个复选框（赤陶色勾 spring 弹出、勾线描出）→ 移到「Add 3 to board」按下 →
+//   三行先"拔起"（预备：放大 2% + 阴影加深 4f）再沿二次贝塞尔上抛弧线飞向画布，错峰 6f。
+// - 形态迁移（本式命门）：位置走弧线先到，宽高 / 圆角晚 3f 收敛（父先子后）；行内容在 u<0.4 淡出、卡内容 u>0.5 淡入，
+//   中段两态绝不同显；飞行中按速度做方向性运动模糊，阴影随弧线抬高变大变虚，落地 4f 压扁回弹 + 接触影收紧。
+// - 行槽不复原：飞走的行塌成赤陶虚线留白「On board」，"迁移"不是"复制"。
+// - 相机：起飞后整体极缓推近（总 2.5%）；落定后板头计数「3 shots pinned」升起，hold 成海报。
+//
+// 时间表（30fps，共 150f）：
+//   0–18    面板从右滑入（snappy）、5 行错峰；板头衬线标题逐词升起
+//   14/24/34 光标依次点中三个复选框（勾 spring damping 11，勾线 7f 描出），按钮计数 1→2→3
+//   48      光标到按钮，52f 按下（scale 0.94 → 回弹）
+//   56/62/68 三行拔起 4f → 起飞 40f（spring damping 17，弧线中点上抬 220px）
+//   ~104–112 三卡依次落地（压扁回弹、倾角 −2.5/1.8/−1.2°），行槽塌成虚线
+//   112–150 hold：板头「3 shots pinned」计数升起，相机极缓推进
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, SpeedBlur, mix, ramp, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, SERIF, Stage, TextReveal, alpha, springAt, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const PANEL_TO_CANVAS_MATERIALIZE_DURATION = 150;
+
+const L = LOOKS.sand;
+const ACC = L.accent; // 赤陶
+const NAVY = L.accent2; // 藏青（点缀：标签）
+
+// ── 面板几何 ──
+const PANEL_X = 1164;
+const PANEL_Y = 96;
+const PANEL_W = 656;
+const PANEL_H = 888;
+const ROW_X = PANEL_X + 24;
+const ROW_W = PANEL_W - 48;
+const ROW_H = 104;
+const ROW_STEP = 116;
+const ROWS_TOP = 262; // 第一行的画面 y（面板内布局与飞行起点共用，起飞零跳变）
+
+// ── 卡片落位（画布左区）──
+const CARD_W = 486;
+const CARD_H = 300;
+const TARGETS = [
+  { x: 116, y: 268, rot: -2.5 },
+  { x: 636, y: 306, rot: 1.8 },
+  { x: 330, y: 640, rot: -1.2 },
+];
+
+const CHECK_AT = [14, 24, 34];
+const PRESS = 52;
+const LIFT_AT = [56, 62, 68];
+const LIFT = 4; // 拔起预备帧
+const FLY_DUR = 40;
+
+type Item = { title: string; tag: string; who: string; name: string; quote: string; meta: string };
+const ITEMS: Item[] = [
+  // 镜头配方卡（库里真有的卡名）；quote = 挑卡人的备注，meta = 示意时长
+  { title: 'Crash zoom punch-in', tag: 'Camera', who: 'AO', name: 'Ama Owusu', quote: '“Lands right on the beat drop.”', meta: '24 frames' },
+  { title: 'Text as mask opener', tag: 'Opening', who: 'LB', name: 'Lars Berg', quote: '', meta: '' },
+  { title: 'Cursor flyover tour', tag: 'Interaction', who: 'PS', name: 'Priya Sethi', quote: '“Reads like a real screen take.”', meta: '96 frames' },
+  { title: 'Chart axis rescale shock', tag: 'Data', who: 'TM', name: 'Tomás Mena', quote: 'Rescales on the cut, holds two beats.', meta: '72 frames' },
+  { title: 'Grain dissolve outro', tag: 'Outro', who: 'AO', name: 'Ama Owusu', quote: '', meta: '' },
+];
+const SLOTS = [0, 2, 3]; // 被勾选的行（不连续：读作"挑选"而非"全选"）
+const AV = ['#c4552d', '#3d5a80', '#7c6a4f', '#9a5b3f'];
+
+const rowY = (slot: number) => ROWS_TOP + slot * ROW_STEP;
+
+// 飞行进度（spring，可能短暂 >1）
+const flyU = (f: number, k: number) => springAt(f, LIFT_AT[k] + LIFT, { damping: 17, stiffness: 95, mass: 0.9 });
+
+// 飞行几何：位置走二次贝塞尔（中点上抬），尺寸晚 3f 收敛
+const flyGeom = (f: number, k: number) => {
+  const slot = SLOTS[k];
+  const u = flyU(f, k);
+  const us = flyU(f - 3, k); // 尺寸晚 3f
+  const t = TARGETS[k];
+  const sx = ROW_X + ROW_W / 2, sy = rowY(slot) + ROW_H / 2;
+  const ex = t.x + CARD_W / 2, ey = t.y + CARD_H / 2;
+  const cx = (sx + ex) / 2, cy = Math.min(sy, ey) - 220;
+  const q = Math.min(1, Math.max(0, u));
+  const bx = (1 - q) * (1 - q) * sx + 2 * (1 - q) * q * cx + q * q * ex + (u - q) * (ex - cx) * 0.6;
+  const by = (1 - q) * (1 - q) * sy + 2 * (1 - q) * q * cy + q * q * ey + (u - q) * (ey - cy) * 0.6;
+  const w = mix(ROW_W, CARD_W, us);
+  const h = mix(ROW_H, CARD_H, us);
+  return { u, us, cx: bx, cy: by, w, h, rot: t.rot * u, arc: Math.sin(Math.PI * q) };
+};
+
+const Avatar: React.FC<{ s: string; c: string; size?: number }> = ({ s, c, size = 44 }) => (
+  <div style={{
+    width: size, height: size, borderRadius: 99, flex: 'none', display: 'grid', placeItems: 'center',
+    background: `linear-gradient(180deg, ${alpha(c, 0.85)}, ${c})`, color: '#fff8f0',
+    ...type(size * 0.38, 650), letterSpacing: '0.02em', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.3)',
+  }}>{s}</div>
+);
+
+const Tag: React.FC<{ s: string }> = ({ s }) => (
+  <span style={{
+    ...type(20, 650, { caps: true }), color: NAVY, padding: '6px 12px', borderRadius: 99,
+    background: alpha(NAVY, 0.09), border: `1px solid ${alpha(NAVY, 0.16)}`, whiteSpace: 'nowrap',
+  }}>{s}</span>
+);
+
+const CheckBox: React.FC<{ frame: number; at: number | null }> = ({ frame, at }) => {
+  const checked = at !== null && frame >= at;
+  const pop = at === null ? 0 : springAt(frame, at, { damping: 11, stiffness: 300 });
+  const draw = at === null ? 0 : ramp(frame, at + 1, 7, EASE.out);
+  return (
+    <div style={{
+      width: 36, height: 36, borderRadius: 10, flex: 'none', boxSizing: 'border-box',
+      border: checked ? 'none' : `2px solid ${alpha(L.ink, 0.22)}`,
+      background: checked ? `linear-gradient(180deg, #d4673e, ${ACC})` : L.surface,
+      boxShadow: checked ? `inset 0 1px 0 rgba(255,255,255,0.3), 0 3px 8px -3px ${alpha(ACC, 0.7)}` : `inset 0 1px 2px ${alpha(L.shadow, 0.08)}`,
+      transform: checked ? `scale(${(0.75 + 0.25 * pop).toFixed(3)})` : undefined,
+      display: 'grid', placeItems: 'center',
+    }}>
+      {checked && (
+        <svg width="22" height="22" viewBox="0 0 18 18">
+          <path d="M3.5 9.5 L7.3 13 L14.5 5" stroke="#fff8f0" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round"
+            pathLength={1} strokeDasharray={1} strokeDashoffset={1 - draw} />
+        </svg>
+      )}
+    </div>
+  );
+};
+
+// 行形态内容（面板内的行与飞行中的行共用，保证起飞同形）
+const RowContent: React.FC<{ item: Item; hue: string; check: React.ReactNode }> = ({ item, hue, check }) => (
+  <div style={{ position: 'absolute', left: 0, top: 0, width: ROW_W, height: ROW_H, display: 'flex', alignItems: 'center', gap: 22, padding: '0 24px', boxSizing: 'border-box' }}>
+    {check}
+    <span style={{ ...type(32, 600), color: L.ink, whiteSpace: 'nowrap', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</span>
+    <Avatar s={item.who} c={hue} size={40} />
+  </div>
+);
+
+// 卡形态内容（按卡终态尺寸布局，飞行中由外框裁切）
+const CardContent: React.FC<{ item: Item; hue: string }> = ({ item, hue }) => (
+  <div style={{ position: 'absolute', left: 0, top: 0, width: CARD_W, height: CARD_H, padding: '26px 30px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+      <Tag s={item.tag} />
+      <span style={{ marginLeft: 'auto', ...type(20, 500), color: L.ink3 }}>{item.meta}</span>
+    </div>
+    <div style={{ marginTop: 18, fontFamily: SERIF, fontSize: 38, fontWeight: 600, lineHeight: 1.04, letterSpacing: '-0.02em', color: L.ink }}>{item.title}</div>
+    <div style={{ marginTop: 12, ...type(24, 450), lineHeight: 1.3, color: L.ink2 }}>{item.quote}</div>
+    <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
+      <Avatar s={item.who} c={hue} size={36} />
+      <span style={{ ...type(22, 560), color: L.ink2 }}>{item.name}</span>
+    </div>
+  </div>
+);
+
+const Cursor: React.FC<{ frame: number }> = ({ frame }) => {
+  // 光标路径：入画 → 三个复选框 → 按钮；段间 swift 缓动 + 轻弧线，点击时缩一下
+  const cb = (slot: number) => ({ x: ROW_X + 24 + 18 + 6, y: rowY(slot) + ROW_H / 2 + 6 });
+  const btn = { x: PANEL_X + PANEL_W / 2 + 190, y: PANEL_Y + PANEL_H - 70 };
+  const keys = [
+    { f: 4, ...{ x: 860, y: 760 } },
+    { f: CHECK_AT[0] - 1, ...cb(SLOTS[0]) },
+    { f: CHECK_AT[1] - 1, ...cb(SLOTS[1]) },
+    { f: CHECK_AT[2] - 1, ...cb(SLOTS[2]) },
+    { f: PRESS - 2, ...btn },
+  ];
+  let x = keys[0].x, y = keys[0].y;
+  for (let i = 1; i < keys.length; i++) {
+    const a = keys[i - 1], b = keys[i];
+    const p = ramp(frame, a.f + 1, b.f - a.f - 1, EASE.swift);
+    if (frame >= a.f) {
+      x = mix(a.x, b.x, p);
+      y = mix(a.y, b.y, p) - Math.sin(Math.PI * p) * 26;
+    }
+  }
+  const clicks = [...CHECK_AT, PRESS];
+  let press = 1;
+  for (const c of clicks) if (frame >= c - 1 && frame < c + 6) press = Math.min(press, 1 - 0.16 * Math.sin((Math.PI * (frame - c + 1)) / 7));
+  const show = ramp(frame, 3, 8, EASE.out) * (1 - ramp(frame, PRESS + 26, 10, EASE.out));
+  return (
+    <svg width={44} height={48} viewBox="0 0 20 22" style={{
+      position: 'absolute', left: x, top: y, transform: `scale(${press.toFixed(3)})`, transformOrigin: '4px 2px', opacity: show,
+      filter: `drop-shadow(0 3px 4px ${alpha(L.shadow, 0.3)})`,
+    }}>
+      <path d="M2 1 L2 17 L6.5 13.2 L9.4 20 L12.4 18.7 L9.5 12 L15 11.6 Z" fill={L.ink} stroke="#fff8f0" strokeWidth="1.4" strokeLinejoin="round" />
+    </svg>
+  );
+};
+
+export const PanelToCanvasMaterialize: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const panelIn = ramp(frame, 0, 18, EASE.snappy);
+  const checkedCount = CHECK_AT.filter((c) => frame >= c).length;
+  const btnPress = frame < PRESS ? 0 : ramp(frame, PRESS, 3, EASE.out) * (1 - ramp(frame, PRESS + 3, 9, EASE.out));
+  const btnReady = ramp(frame, CHECK_AT[0], 8, EASE.out);
+  const landed = (k: number) => flyU(frame, k) > 0.96;
+  const doneCount = [0, 1, 2].filter((k) => frame >= LIFT_AT[k] + LIFT + 30).length;
+
+  // 相机：起飞后极缓左移 + 推近，跟着内容看向画布
+  const camP = ramp(frame, LIFT_AT[0], 94, EASE.smooth);
+  const camS = 1 + 0.025 * camP;
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden', fontFamily: FONT.sans }}>
+      <Stage look={L} keyLight={{ x: 0.3, y: 0.1 }} fill={{ x: 0.9, y: 0.9 }}>
+        {/* 画布点阵（板区） */}
+        <AbsoluteFill style={{
+          backgroundImage: `radial-gradient(${alpha(L.ink, 0.13)} 1.5px, transparent 1.8px)`,
+          backgroundSize: '38px 38px', backgroundPosition: '10px 14px',
+          WebkitMaskImage: 'radial-gradient(ellipse 46% 60% at 30% 56%, #000 30%, transparent 100%)',
+          maskImage: 'radial-gradient(ellipse 46% 60% at 30% 56%, #000 30%, transparent 100%)',
+        }} />
+      </Stage>
+
+      <AbsoluteFill style={{ transform: `scale(${camS.toFixed(4)})`, transformOrigin: '52% 50%' }}>
+        {/* ── 板头 ── */}
+        <div style={{ position: 'absolute', left: 120, top: 92 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 14, opacity: ramp(frame, 2, 12, EASE.out) }}>
+            <ShotcraftMark size={34} tone="light" />
+            <span style={{ ...type(26, 680), letterSpacing: '0.01em', color: L.ink }}>{BRAND.name}</span>
+            <span style={{ ...type(22, 650, { caps: true }), letterSpacing: '0.2em', color: ACC }}>· Storyboard</span>
+          </div>
+          <div style={{ marginTop: 10, display: 'flex', alignItems: 'baseline', gap: 26 }}>
+            <TextReveal text="Launch film" by="word" variant="rise" start={4} each={18} gap={5}
+              style={{ fontFamily: SERIF, fontSize: 84, fontWeight: 600, letterSpacing: '-0.03em', color: L.ink, lineHeight: 1 }} />
+            <div style={{ height: 44, overflow: 'hidden' }}>
+              <div style={{
+                ...type(32, 500), color: L.ink2, whiteSpace: 'nowrap',
+                transform: `translateY(${((1 - ramp(frame, LIFT_AT[0] + LIFT + 30, 14, EASE.snappy)) * 110).toFixed(1)}%)`,
+              }}>
+                <span style={{ color: ACC, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{Math.max(1, doneCount)}</span> shot{doneCount === 1 ? '' : 's'} pinned
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* ── 右侧面板 ── */}
+        <div style={{
+          position: 'absolute', left: PANEL_X, top: PANEL_Y, width: PANEL_W, height: PANEL_H, boxSizing: 'border-box',
+          borderRadius: 30, background: `linear-gradient(180deg, ${L.surface}, #f7f0e6)`,
+          border: `1px solid ${L.line}`, boxShadow: `inset 0 1px 0 rgba(255,255,255,0.9), ${softShadow(30, { color: L.shadow, strength: 1.3 })}`,
+          transform: `translateX(${((1 - panelIn) * 160).toFixed(2)}px)`, opacity: panelIn,
+        }}>
+          <div style={{ position: 'absolute', left: 32, top: 34, right: 32 }}>
+            <div style={{ display: 'flex', alignItems: 'baseline' }}>
+              <span style={{ ...type(44, 700), color: L.ink }}>Shot recipes</span>
+              <span style={{ marginLeft: 'auto', ...type(24, 500), color: L.ink3 }}>5 suggested</span>
+            </div>
+            <div style={{ marginTop: 14, ...type(26, 450), color: L.ink2 }}>Pick the shots for this cut.</div>
+          </div>
+          {/* 按钮 */}
+          <div style={{
+            position: 'absolute', left: 24, right: 24, bottom: 24, height: 92, borderRadius: 20,
+            background: `linear-gradient(180deg, #2c241b, ${L.ink})`, boxShadow: `inset 0 1px 0 rgba(255,255,255,0.12), ${softShadow(10 - 6 * btnPress, { color: L.shadow, strength: 1.6 })}`,
+            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16,
+            opacity: 0.35 + 0.65 * btnReady, transform: `scale(${(1 - 0.04 * btnPress).toFixed(4)})`,
+          }}>
+            <span style={{ ...type(32, 620), color: '#fff8f0' }}>Add to board</span>
+            <span style={{
+              minWidth: 44, height: 44, borderRadius: 22, display: 'grid', placeItems: 'center', background: ACC,
+              ...type(26, 700), color: '#fff8f0', transform: `scale(${(1 + 0.12 * Math.max(0, 1 - Math.min(...CHECK_AT.map((c) => Math.abs(frame - c - 2))) / 4)).toFixed(3)})`,
+            }}>{checkedCount}</span>
+          </div>
+        </div>
+
+        {/* ── 面板行（未飞走的 / 塌陷成虚线留白的） ── */}
+        {ITEMS.map((item, slot) => {
+          const k = SLOTS.indexOf(slot);
+          const inP = ramp(frame, 6 + slot * 2.5, 16, EASE.snappy);
+          const y = rowY(slot);
+          const gone = k >= 0 && frame >= LIFT_AT[k] + LIFT;
+          const ghost = k >= 0 ? ramp(frame, LIFT_AT[k] + LIFT + 4, 10, EASE.out) : 0;
+          return (
+            <div key={slot} style={{
+              position: 'absolute', left: ROW_X, top: y, width: ROW_W, height: ROW_H,
+              opacity: inP, transform: `translateX(${((1 - panelIn) * 160 + (1 - inP) * 40).toFixed(2)}px)`,
+            }}>
+              {k >= 0 && (
+                <div style={{
+                  position: 'absolute', inset: 0, borderRadius: 18, border: `2px dashed ${alpha(ACC, 0.45)}`, boxSizing: 'border-box',
+                  background: alpha(ACC, 0.04), opacity: ghost, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
+                  ...type(24, 600), color: alpha(ACC, 0.85),
+                }}>
+                  <svg width={22} height={22} viewBox="0 0 18 18"><path d="M3.5 9.5 L7.3 13 L14.5 5" stroke={ACC} strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
+                  On board
+                </div>
+              )}
+              {!gone && (
+                <div style={{
+                  position: 'absolute', inset: 0, borderRadius: 18, overflow: 'hidden',
+                  background: k >= 0 && frame >= CHECK_AT[k] ? `linear-gradient(180deg, #fffaf3, ${L.surface})` : L.surface2,
+                  border: `1px solid ${k >= 0 && frame >= CHECK_AT[k] ? alpha(ACC, 0.35) : L.line}`,
+                  boxShadow: k >= 0 && frame >= CHECK_AT[k] ? `0 0 0 3px ${alpha(ACC, 0.08)}` : undefined,
+                }}>
+                  <RowContent item={item} hue={AV[slot % 4]} check={<CheckBox frame={frame} at={k >= 0 ? CHECK_AT[k] : null} />} />
+                </div>
+              )}
+            </div>
+          );
+        })}
+
+        {/* ── 飞行 / 落定的卡 ── */}
+        {SLOTS.map((slot, k) => {
+          const liftStart = LIFT_AT[k];
+          if (frame < liftStart) return null;
+          const item = ITEMS[slot];
+          const pre = ramp(frame, liftStart, LIFT, EASE.out); // 拔起预备
+          const g = flyGeom(frame, k);
+          const flying = frame >= liftStart + LIFT;
+          // 速度（px/帧）→ 方向性模糊
+          const g0 = flyGeom(frame - 0.5, k), g1 = flyGeom(frame + 0.5, k);
+          const vx = flying ? g1.cx - g0.cx : 0, vy = flying ? g1.cy - g0.cy : 0;
+          // 落地压扁：u 首次越过 1 附近给一个 4f 的 scaleY 0.97 回弹
+          const landF = liftStart + LIFT + 22;
+          const squash = 1 - 0.03 * Math.sin(Math.PI * Math.min(1, Math.max(0, (frame - landF) / 6)));
+          const rowOp = 1 - ramp(g.us, 0.08, 0.32, EASE.linear);
+          const cardOp = ramp(g.us, 0.5, 0.3, EASE.linear);
+          const elev = flying ? 8 + 46 * g.arc + (landed(k) ? 0 : 6) : 4 + 10 * pre;
+          const radius = mix(18, 24, Math.min(1, g.us));
+          const w = flying ? g.w : ROW_W * (1 + 0.02 * pre);
+          const h = flying ? g.h : ROW_H * (1 + 0.02 * pre);
+          const cx = flying ? g.cx : ROW_X + ROW_W / 2;
+          const cy = flying ? g.cy : rowY(slot) + ROW_H / 2;
+          return (
+            <SpeedBlur key={slot} vx={vx} vy={vy} amount={0.32} max={14}>
+              <div style={{
+                position: 'absolute', left: cx - w / 2, top: cy - h / 2, width: w, height: h,
+                transform: `rotate(${(flying ? g.rot : 0).toFixed(3)}deg) scaleY(${squash.toFixed(4)})`, transformOrigin: '50% 100%',
+                borderRadius: radius, overflow: 'hidden', boxSizing: 'border-box',
+                background: `linear-gradient(180deg, #fffaf3, ${L.surface})`,
+                border: `1px solid ${alpha(ACC, 0.35 * (1 - cardOp))}`,
+                boxShadow: `inset 0 1px 0 rgba(255,255,255,0.95), ${softShadow(elev, { color: L.shadow, strength: 1.5 })}`,
+              }}>
+                {/* 赤陶顶线：卡形态的身份标记 */}
+                <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 6, background: ACC, opacity: cardOp }} />
+                <div style={{ position: 'absolute', inset: 0, opacity: rowOp }}>
+                  <RowContent item={item} hue={AV[slot % 4]} check={<CheckBox frame={frame} at={CHECK_AT[k]} />} />
+                </div>
+                <div style={{ position: 'absolute', inset: 0, opacity: cardOp }}>
+                  <CardContent item={item} hue={AV[slot % 4]} />
+                </div>
+              </div>
+            </SpeedBlur>
+          );
+        })}
+
+        <Cursor frame={frame} />
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/interaction/chip-grid-single-select-blackout/ChipGridSingleSelectBlackout.tsx

@@ -0,0 +1,218 @@
+// chip-grid-single-select-blackout —— Single Select 1 帧灰闪单选反黑
+// 五个选项 chip 3+2 居中排布错峰入场；光标点下：先插 1 帧灰色按压块，紧接 5 帧线性反黑（白字）+ 1→1.04→1 极轻回弹，
+// 其余 chip 淡到 18% 但位置锁死；约 1.5s 后余项归零，黑 chip 上移收窄回中线，下方升起结算价格。
+//
+// 第二轮重设计（瓷白 · 结账页的一次"决定"）：
+// - look = porcelain（冷白 · 墨蓝黑 · 钴蓝）。按 1080p 原生排版重写（不再用 480×270 设计坐标放大）：
+//   眉题 + 84px 问句「How would you like to pay?」、96px 高的实体 chip（36px 字，发丝线 + 顶部内高光 + 两层软阴影），
+//   主体占画宽 ~62%。眉题挂 video-shotcraft 标志 + 名字：这是它的结账页。
+// - 选中两级状态拆开演（本卡命门，参数不变）：56f 单帧灰闪（:active）→ 57–62f 线性反黑（:selected，不加缓动）
+//   + sin 回弹 0.04；其余 chip 只降不透明度、transform 恒为 none。新增一只光标从右下走弧线点中它，因果更明确。
+// - 黑 chip 被选中后底下亮起一圈极淡的钴蓝落地光（只给主角一次）；收束时上移 + 缩到 0.88 + 横向回中线，
+//   阴影随抬升变深变大（离地更高）。
+// - 结果段换成大字结算：现价「$34.44」180px tabular + 「/mo」，原价「$42.00」先出现再被一道划线划掉、退灰，
+//   钴蓝「Save 18%」胶囊最后 overshoot 弹出——结尾是一张完整的价格海报。
+//
+// 时间表（30fps，共 165f）：
+//   0–14    眉题字距收拢、问句逐词升起
+//   8–28    5 个 chip 错峰升起（3f 间隔，snappy）
+//   26–54   读题：光标从右下入画、swift 弧线移向「Annual billing」（相机极缓推近 1.5%）
+//   56      单帧灰闪（按下）
+//   57–62   线性反黑 5f；57–66 回弹；57–66 余项降到 18%（outQuad），位置锁死
+//   66–101  选中态 hold ~1.2s（落地光呼吸）；光标 70f 起淡出
+//   101–119 收束：余项 101–110 归零；黑 chip 上移 / 缩 0.88 / 回中线（18f smooth in-out）
+//   108–134 结算：原价升起 → 118f 划线 → 现价升起（rise）→ 128f Save 18% 弹出
+//   134–165 落定 hold 31f
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, mix, ramp, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const CHIP_GRID_SINGLE_SELECT_BLACKOUT_DURATION = 165;
+
+const L = LOOKS.porcelain;
+const INK = '#0b1020'; // 反黑目标：墨蓝黑（不用纯 #000）
+
+const NAMES = ['Annual billing', 'Monthly billing', 'Two-year commitment', 'Student', 'Nonprofit rate'];
+const WIDTHS = [346, 364, 476, 236, 330]; // chip 固定宽（按 36px 字测得 + 左右 44 内边距）——几何确定，不用运行时测量
+const TI = 0; // 选中项
+const CHIP_H = 96;
+const GAP = 22;
+const ROW_Y = [452, 570]; // 两行 chip 的顶
+const FS = 56; // 灰闪帧
+const COLLAPSE = 101; // 收束起点（选中后 ~1.5s）
+const COLLAPSE_DUR = 18;
+const TARGET_Y = 330; // 收束后黑 chip 中心 y
+const TARGET_S = 0.88; // 收窄到 0.88（字仍 ≈32px，满足辅助字下限）
+
+// 3+2 居中排布的 chip 左上角（位置全程锁死）
+const chipPos = (i: number) => {
+  const row = i < 3 ? 0 : 1;
+  const ids = row === 0 ? [0, 1, 2] : [3, 4];
+  const total = ids.reduce((a, k) => a + WIDTHS[k], 0) + GAP * (ids.length - 1);
+  let x = (1920 - total) / 2;
+  for (const k of ids) {
+    if (k === i) break;
+    x += WIDTHS[k] + GAP;
+  }
+  return { x, y: ROW_Y[row] };
+};
+
+const lin = (f: number, a: number, b: number) => Math.max(0, Math.min(1, (f - a) / (b - a)));
+const outQuad = (t: number) => 1 - (1 - t) * (1 - t);
+const h2r = (h: string) => [1, 3, 5].map((k) => parseInt(h.slice(k, k + 2), 16));
+const mixC = (p: number, a: string, b: string) => {
+  const A = h2r(a), B = h2r(b), q = Math.max(0, Math.min(1, p));
+  return `rgb(${A.map((v, k) => Math.round(v + (B[k] - v) * q)).join(',')})`;
+};
+
+const Cursor: React.FC<{ frame: number }> = ({ frame }) => {
+  const p0 = chipPos(TI);
+  const tx = p0.x + WIDTHS[TI] * 0.62, ty = p0.y + CHIP_H * 0.58;
+  const p = ramp(frame, 26, FS - 2 - 26, EASE.swift);
+  const x = mix(1500, tx, p);
+  const y = mix(960, ty, p) - Math.sin(Math.PI * p) * 60;
+  const press = frame >= FS - 1 && frame < FS + 6 ? 1 - 0.16 * Math.sin((Math.PI * (frame - FS + 1)) / 7) : 1;
+  const show = ramp(frame, 24, 8, EASE.out) * (1 - ramp(frame, 70, 12, EASE.out));
+  return (
+    <svg width={46} height={50} viewBox="0 0 20 22" style={{
+      position: 'absolute', left: x, top: y, transform: `scale(${press.toFixed(3)})`, transformOrigin: '4px 2px', opacity: show,
+      filter: `drop-shadow(0 3px 5px ${alpha(L.shadow, 0.28)})`,
+    }}>
+      <path d="M2 1 L2 17 L6.5 13.2 L9.4 20 L12.4 18.7 L9.5 12 L15 11.6 Z" fill={L.ink} stroke="#ffffff" strokeWidth="1.4" strokeLinejoin="round" />
+    </svg>
+  );
+};
+
+export const ChipGridSingleSelectBlackout: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ── 选中两级状态 ──
+  const flash = frame === FS ? 1 : 0; // 就一帧
+  const bk = lin(frame, FS + 1, FS + 6); // 线性反黑 5f（故意不缓动）
+  const pr = lin(frame, FS + 1, FS + 10);
+  const pulse = 1 + Math.sin(pr * Math.PI) * 0.04 * (pr > 0 ? 1 : 0);
+  const fade = outQuad(lin(frame, FS + 1, FS + 10));
+  const gone = outQuad(lin(frame, COLLAPSE, COLLAPSE + 9));
+  const lift = ramp(frame, COLLAPSE, COLLAPSE_DUR, EASE.smooth);
+
+  const p0 = chipPos(TI);
+  const c0x = p0.x + WIDTHS[TI] / 2, c0y = p0.y + CHIP_H / 2;
+  const dx = (960 - c0x) * lift, dy = (TARGET_Y - c0y) * lift;
+
+  // 相机：读题段极缓推近，收束后回正
+  const cam = 1 + 0.015 * ramp(frame, 20, 60, EASE.smooth) - 0.015 * ramp(frame, COLLAPSE, 30, EASE.smooth);
+
+  // 问句随收束让位（上移淡出），把舞台让给结果
+  const titleOut = ramp(frame, COLLAPSE - 4, 16, EASE.exit);
+
+  // ── 结算 ──
+  const oldIn = ramp(frame, 108, 14, EASE.snappy);
+  const strike = ramp(frame, 118, 8, EASE.swift);
+  const saveIn = ramp(frame, 128, 14, EASE.overshoot);
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden', fontFamily: FONT.sans }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.12 }} fill={null} />
+
+      <AbsoluteFill style={{ transform: `scale(${cam.toFixed(4)})`, transformOrigin: '50% 50%' }}>
+        {/* 眉题 + 问句 */}
+        <div style={{ position: 'absolute', left: 0, right: 0, top: 168, textAlign: 'center', opacity: 1 - titleOut, transform: `translateY(${(-30 * titleOut).toFixed(2)}px)` }}>
+          {/* 眉题：标志 + 小写品牌名（不随字距动画）+ caps 标签（字距收拢） */}
+          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 14, opacity: ramp(frame, 0, 10, EASE.out) }}>
+            <ShotcraftMark size={32} tone="light" />
+            <span style={{ ...type(26, 680), letterSpacing: '0.01em', color: L.ink }}>{BRAND.name}</span>
+            <span style={{
+              ...type(22, 650, { caps: true }), color: L.accent,
+              letterSpacing: `${(0.24 + 0.3 * (1 - ramp(frame, 0, 18, EASE.snappy))).toFixed(3)}em`,
+            }}>· Billing cycle</span>
+          </div>
+          <div style={{ marginTop: 22 }}>
+            <TextReveal text="How would you like to pay?" by="word" variant="rise" start={3} each={16} gap={2.5}
+              style={{ ...type(84, 700), color: L.ink }} />
+          </div>
+        </div>
+
+        {/* chip */}
+        {NAMES.map((n, i) => {
+          const { x, y } = chipPos(i);
+          const inP = ramp(frame, 8 + i * 3, 16, EASE.snappy);
+          const sel = i === TI;
+          if (!sel) {
+            const op = inP * mix(1, 0.18, fade) * (1 - gone);
+            return (
+              <div key={i} style={{
+                position: 'absolute', left: x, top: y + (1 - inP) * 30, width: WIDTHS[i], height: CHIP_H, boxSizing: 'border-box',
+                borderRadius: CHIP_H / 2, background: `linear-gradient(180deg, #ffffff, ${L.surface2})`,
+                border: `1px solid ${L.line}`, boxShadow: `inset 0 1px 0 #ffffff, ${softShadow(6, { color: L.shadow, strength: 1.1 })}`,
+                display: 'grid', placeItems: 'center', opacity: op, transform: 'none',
+                ...type(36, 560), color: L.ink,
+              }}>{n}</div>
+            );
+          }
+          const elev = 6 + 10 * bk + 26 * lift;
+          return (
+            <div key={i} style={{
+              position: 'absolute', left: x, top: y + (1 - inP) * 30, width: WIDTHS[i], height: CHIP_H, opacity: inP,
+              transform: `translate(${dx.toFixed(2)}px, ${dy.toFixed(2)}px) scale(${(pulse * mix(1, TARGET_S, lift)).toFixed(4)})`,
+            }}>
+              {/* 落地光：选中后在 chip 下方亮起，只给主角一次 */}
+              <div style={{
+                position: 'absolute', left: -120, right: -120, top: CHIP_H * 0.35, height: CHIP_H * 1.3,
+                background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(L.accent, 0.2 * bk * (1 - 0.5 * lift))} 0%, transparent 70%)`,
+                filter: 'blur(6px)',
+              }} />
+              <div style={{
+                position: 'absolute', inset: 0, boxSizing: 'border-box', borderRadius: CHIP_H / 2, overflow: 'hidden',
+                background: bk > 0 ? `linear-gradient(180deg, ${mixC(bk, '#ffffff', '#1d2438')}, ${mixC(bk, '#f3f6fb', INK)})` : `linear-gradient(180deg, #ffffff, ${L.surface2})`,
+                border: `1px solid ${bk > 0 ? alpha(INK, 0.1 + 0.9 * bk) : L.line}`,
+                boxShadow: `inset 0 1px 0 ${alpha('#ffffff', 1 - 0.85 * bk)}, ${softShadow(elev, { color: L.shadow, strength: 1.1 + 0.9 * bk })}`,
+                display: 'grid', placeItems: 'center', ...type(36, 600), color: mixC(bk, L.ink, '#ffffff'),
+              }}>
+                {/* 按压灰块：1 帧 */}
+                <div style={{ position: 'absolute', inset: 0, background: 'rgba(120,128,146,0.5)', opacity: flash }} />
+                <span style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 14 }}>
+                  <svg width={30} height={30} viewBox="0 0 18 18" style={{ marginLeft: -12 * bk, width: 30 * bk, opacity: bk }}>
+                    <path d="M3.5 9.5 L7.3 13 L14.5 5" stroke="#ffffff" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                  {n}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+
+        {/* ── 结算：原价划掉 → 现价 → Save 18% ── */}
+        <div style={{ position: 'absolute', left: 0, right: 0, top: 452, display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 44 }}>
+          {/* 起播前隐藏：未升起的「$42.00」字顶（$ 尖、数字上缘）会从 82px 遮罩框底露出几道细痕，压在第二行 chip 左边 */}
+          <div style={{ height: 82, overflow: 'hidden', marginBottom: 0, opacity: frame >= 108 ? 1 : 0 }}>
+            <div style={{ position: 'relative', transform: `translateY(${((1 - oldIn) * 110).toFixed(1)}%)`, ...type(60, 500), color: mixC(strike, L.ink2, L.ink3) }}>
+              $42.00
+              <div style={{
+                position: 'absolute', left: -4, top: '54%', height: 4, borderRadius: 2, background: L.ink3,
+                width: `calc(${(strike * 100).toFixed(1)}% + ${(8 * strike).toFixed(1)}px)`,
+              }} />
+            </div>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
+            <TextReveal text="$34.44" by="char" variant="rise" start={116} each={14} gap={1.2}
+              style={{ ...type(180, 750), letterSpacing: '-0.05em', color: L.ink }} />
+            <span style={{ ...type(48, 500), color: L.ink2, opacity: ramp(frame, 124, 10, EASE.out) }}>/mo</span>
+          </div>
+        </div>
+        <div style={{
+          position: 'absolute', left: 0, right: 0, top: 690, display: 'flex', justifyContent: 'center',
+        }}>
+          <div style={{
+            padding: '12px 26px', borderRadius: 99, background: L.accent, color: L.onAccent, ...type(32, 650),
+            boxShadow: `inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 26px -10px ${alpha(L.accent, 0.8)}`,
+            opacity: Math.min(1, saveIn * 1.5), transform: `translateY(${((1 - saveIn) * 16).toFixed(2)}px) scale(${(0.8 + 0.2 * saveIn).toFixed(3)})`,
+          }}>Save 18% · billed $413.28 yearly</div>
+        </div>
+
+        <Cursor frame={frame} />
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};