dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/transition/page-turn-transitions/BarnDoorSplit.tsx

@@ -0,0 +1,227 @@
+// 对开门裂幕（barn-door-split-reveal）——旧页从正中裂成两扇门向外加速让位，新页从门缝里迎上来。
+//
+// 第二轮重设计（余烬 · 版本更替发布）：
+// - look = ember（暖黑 · 橙）。语义是"新旧交替"：旧页 = video-shotcraft 的现行版「Shotcraft 3」（示意版本号），
+//   冷灰、无强调色、像一块熄了火的金属板；新页 = 「Shotcraft 4」发布海报，暖黑舞台 + 余烬橙，眉题前挂镜刻标志。
+//   两页同一版式、同一槽位（眉题 / 220px 字标 / 副题 / 三枚数据），所以门一开，"3"的位置上站着"4"——取代关系一眼可读。
+// - 门是有厚度的实体板：内缘 10px 切面在门缝光里被照亮（橙色轮廓光），门面靠近裂缝处被光染暖；
+//   门缝里透出的是新页的光——先是一条发丝亮线自中点向上下描出（预告裂点），再撑开一道光缝，
+//   门滑走时新页带着一次过曝光束（屏幕混合，随门远去衰减）显影。
+// - 运动：裂缝预张 ease-in（预备）接门 ease-in 加速 1000px（"让位"不是"被推走"），按速度挂横向运动模糊；
+//   新页 1.08→1 迎上来（snappy，晚门 2f 起跳）；落定后副题逐词升起、三枚数据从旧值滚到新值
+//   （渲染 64s → 11.8s、手 K 关键帧 12 → 0：数字本身讲出"新版更省事"，均为示意值）。
+//
+// 时间表（30fps，共 150f）：
+//   0–24    旧页建立：冷灰海报，相机极缓推近 1→1.015；第 0 帧即完整画面
+//   20–30   预告：中缝发丝亮线自中点向上下描出（snappy 10f），两侧门面被光染暖
+//   30–40   预备：缝隙 ease-in 撑开 0→16px，光缝变亮
+//   40–64   主动作：两扇门各 translateX ∓1000（ease-in 24f）+ 横向运动模糊
+//   42–78   新页 1.08→1 迎上（snappy 36f）；过曝光束 40–74 衰减
+//   64–110  跟随：副题逐词升起（64）、三枚数据错峰滚到新值（72–104）
+//   110–150 hold：余烬缓缓上浮、字标光呼吸、相机极缓推近 1.8%，尾帧是完整的发布海报
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { EASE, FONT, SpeedBlur, bezier, mix, ramp, velocity } from '../../_fixtures/Polish';
+import { Dust, LOOKS, Stage, TextReveal, alpha, glow, stagger, type } from '../../_fixtures/Look';
+import { ShotcraftMark } from '../../_fixtures/Brand';
+
+export const BARN_DOOR_SPLIT_DURATION = 150;
+
+const L = LOOKS.ember;
+// 旧页：冷灰金属板（刻意不用强调色）
+const OLD = { bg0: '#1d1f23', bg1: '#141518', ink: '#9a9ea7', ink2: '#6f737b', ink3: '#4a4d54', line: 'rgba(255,255,255,0.07)' };
+
+const CRACK = 20; // 发丝亮线起
+const GAP = 30; // 缝隙预张起
+const SLIDE = 40; // 门开始加速
+const SLIDE_D = 24;
+const SLIDE_EASE = bezier(0.42, 0, 0.8, 0.25); // ease-in（≈cubic-in 偏猛）：起步可见、越走越快，不是最后一帧才消失
+
+const gapAt = (f: number) => 16 * ramp(f, GAP, 10, EASE.exit);
+const slideAt = (f: number) => 1000 * ramp(f, SLIDE, SLIDE_D, SLIDE_EASE);
+const doorAt = (f: number) => gapAt(f) / 2 + slideAt(f); // 单扇外移量
+
+// 三枚数据：旧值 → 新值（示意值）
+const STATS = [
+  { from: 64, to: 11.8, dec: 1, unit: 's', label: 'Median render' },
+  { from: 12, to: 0, dec: 0, unit: '', label: 'Manual keyframes' },
+  { from: 6, to: 30, dec: 0, unit: '', label: 'Preview fps' },
+];
+
+// 两页共用的版式骨架：眉题 / 字标 / 副题 / 数据行（同槽位 = 取代关系）
+const Layout: React.FC<{
+  kicker: React.ReactNode; mark: React.ReactNode; sub: React.ReactNode; stats: React.ReactNode;
+}> = ({ kicker, mark, sub, stats }) => (
+  <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', fontFamily: FONT.sans }}>
+    <div style={{ marginTop: 214, height: 40 }}>{kicker}</div>
+    <div style={{ marginTop: 26, height: 230, display: 'flex', alignItems: 'center' }}>{mark}</div>
+    <div style={{ marginTop: 34, height: 60 }}>{sub}</div>
+    <div style={{ marginTop: 92 }}>{stats}</div>
+  </div>
+);
+
+const StatRow: React.FC<{ cells: { value: string; label: string; color: string; labelColor: string; line: string; o?: number; y?: number }[] }> = ({ cells }) => (
+  <div style={{ display: 'flex', gap: 56 }}>
+    {cells.map((c, k) => (
+      <div key={k} style={{ width: 300, borderTop: `1px solid ${c.line}`, paddingTop: 26, opacity: c.o ?? 1, transform: `translateY(${(c.y ?? 0).toFixed(2)}px)` }}>
+        <div style={{ ...type(72, 700), color: c.color, letterSpacing: '-0.04em' }}>{c.value}</div>
+        <div style={{ ...type(30, 500), color: c.labelColor, marginTop: 10 }}>{c.label}</div>
+      </div>
+    ))}
+  </div>
+);
+
+// 旧页：Shotcraft 3（冷灰海报）
+const OldPage: React.FC = () => (
+  <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse 70% 60% at 50% 30%, #25272c 0%, ${OLD.bg0} 45%, ${OLD.bg1} 100%)` }}>
+    {/* 板面的细横纹：拉丝金属的质地（极淡） */}
+    <div style={{ position: 'absolute', inset: 0, opacity: 0.5, background: 'repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 4px)' }} />
+    <Layout
+      kicker={<span style={{ ...type(30, 650, { caps: true }), letterSpacing: '0.22em', color: OLD.ink3 }}>Current release</span>}
+      mark={<span style={{ ...type(220, 760), color: OLD.ink, letterSpacing: '-0.055em' }}>Shotcraft 3</span>}
+      sub={<span style={{ ...type(48, 450), color: OLD.ink2 }}>Shot recipes for product films.</span>}
+      stats={<StatRow cells={STATS.map((s) => ({
+        value: `${s.from.toFixed(s.dec)}${s.unit}`, label: s.label, color: OLD.ink, labelColor: OLD.ink3, line: OLD.line,
+      }))} />}
+    />
+  </div>
+);
+
+// 新页：Shotcraft 4（余烬舞台上的发布海报）
+const NewPage: React.FC<{ frame: number }> = ({ frame }) => {
+  const statP = (k: number) => ramp(frame, 72 + stagger(k, 3, 12, EASE.out), 26, EASE.snappy);
+  const breath = 0.85 + 0.15 * Math.sin(frame / 16);
+  return (
+    <>
+      <Layout
+        kicker={
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 18 }}>
+            <ShotcraftMark size={44} tone="dark" />
+            <span style={{ ...type(30, 700, { caps: true }), letterSpacing: '0.22em', color: L.accent }}>Introducing</span>
+          </span>
+        }
+        mark={
+          <span style={{ ...type(220, 800), letterSpacing: '-0.055em', color: L.ink, position: 'relative' }}>
+            Shotcraft{' '}
+            <span style={{
+              backgroundImage: `linear-gradient(180deg, ${L.accent2} 0%, ${L.accent} 70%, #e0471a 100%)`,
+              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
+              filter: `drop-shadow(0 0 ${(30 * breath).toFixed(1)}px ${alpha(L.accent, 0.55)})`,
+            }}>4</span>
+          </span>
+        }
+        sub={
+          <span style={{ ...type(48, 450), color: L.ink2 }}>
+            <TextReveal text="One prompt to a finished promo." start={64} by="word" variant="rise" each={18} gap={3} />
+          </span>
+        }
+        stats={<StatRow cells={STATS.map((s, k) => {
+          const p = statP(k);
+          const v = mix(s.from, s.to, p);
+          return {
+            value: `${v.toFixed(s.dec)}${s.unit}`, label: s.label,
+            color: L.ink,
+            labelColor: L.ink2, line: alpha(L.accent, 0.35),
+            o: ramp(frame, 66 + k * 4, 12, EASE.out), y: mix(18, 0, ramp(frame, 66 + k * 4, 18, EASE.snappy)),
+          };
+        })} />}
+      />
+    </>
+  );
+};
+
+// 门：960 宽视口里装一整页旧页（右门内层左移 960 对位拼合）+ 内缘切面 + 裂缝光染
+// （门不投影到新页上：光从门后来，影子落向镜头一侧，投在门缝里只会把光压灰）
+const Door: React.FC<{ side: 'left' | 'right'; offset: number; light: number; edge: number }> = ({ side, offset, light, edge }) => {
+  const inner = side === 'left' ? 'right' : 'left';
+  const toward = side === 'left' ? 'to left' : 'to right';
+  return (
+    <div style={{
+      position: 'absolute', top: 0, left: side === 'left' ? 0 : 960, width: 960, height: 1080, overflow: 'hidden',
+      transform: `translateX(${side === 'left' ? -offset : offset}px)`,
+    }}>
+      <div style={{ position: 'absolute', top: 0, left: side === 'left' ? 0 : -960, width: 1920, height: 1080 }}>
+        <OldPage />
+      </div>
+      {/* 门面被裂缝光染暖：靠缝最亮，向外 520px 衰减 */}
+      {light > 0.01 && (
+        <div style={{
+          position: 'absolute', top: 0, bottom: 0, [inner]: 0, width: 620, mixBlendMode: 'screen', opacity: light,
+          background: `linear-gradient(${toward}, ${alpha(L.light, 0.5)} 0%, ${alpha(L.light, 0.14)} 30%, ${alpha(L.light, 0)} 100%)`,
+        }} />
+      )}
+      {/* 板材切面：10px 厚度带，被门缝光照亮（亮 → 暖 → 暗） */}
+      {edge > 0.01 && (
+        <div style={{
+          position: 'absolute', top: 0, bottom: 0, [inner]: 0, width: 10, opacity: edge,
+          background: `linear-gradient(${toward}, #ffe2c2 0%, ${L.accent} 35%, #5a2410 100%)`,
+        }} />
+      )}
+    </div>
+  );
+};
+
+export const BarnDoorSplit: React.FC = () => {
+  const frame = useCurrentFrame();
+  const door = doorAt(frame);
+  const vx = velocity(doorAt, frame);
+
+  // 预告亮线：自中点向上下描出；缝隙一撑开就并入光缝
+  const crack = ramp(frame, CRACK, 10, EASE.snappy);
+  const seamLight = ramp(frame, CRACK, 12, EASE.out); // 门面光染 / 切面亮度
+  const edge = frame >= GAP ? 1 : 0;
+  // 过曝光束：随门远去衰减
+  const flash = ramp(frame, GAP, 12, EASE.exit) * (1 - ramp(frame, SLIDE + 6, 30, EASE.out));
+  const bP = ramp(frame, SLIDE + 2, 36, EASE.snappy);
+  const bScale = mix(1.08, 1, bP) * mix(1, 1.018, ramp(frame, 78, 72, EASE.smooth)); // 落定后再极缓推近，hold 段不死
+  const push = mix(1, 1.015, ramp(frame, 0, SLIDE, EASE.smooth));
+  const doorsGone = frame > SLIDE + SLIDE_D;
+  const showNew = frame >= GAP;
+  // 门面光染：门滑开后随之减弱（门离光源越远越暗）
+  const doorLight = seamLight * (1 - ramp(frame, SLIDE, 14, EASE.out) * 0.6);
+
+  return (
+    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: L.bg[2] }}>
+      {/* 新页：只画一个 Stage 做舞台底；门缝一开才挂载 */}
+      {showNew && (
+        <div style={{ position: 'absolute', inset: 0, transform: `scale(${bScale.toFixed(5)})`, transformOrigin: '50% 46%' }}>
+          <Stage look={L} keyLight={{ x: 0.5, y: 0.12 }} fill={{ x: 0.5, y: 1.08 }} breathe={0.6}>
+            <Dust look={L} count={28} seed={4} drift={0.35} opacity={0.55} color={L.accent2} />
+          </Stage>
+          {/* 字标后的暖光晕 */}
+          <div style={{
+            position: 'absolute', left: 960 - 700, top: 366 - 260, width: 1400, height: 520,
+            background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(L.accent, 0.16)} 0%, ${alpha(L.accent, 0)} 70%)`,
+          }} />
+          <NewPage frame={frame} />
+          {/* 过曝光束：门缝里涌进来的光 */}
+          {flash > 0.01 && (
+            <div style={{
+              position: 'absolute', top: 0, bottom: 0, left: 960 - (door + 160), width: 2 * (door + 160), mixBlendMode: 'screen', opacity: flash,
+              background: `linear-gradient(90deg, ${alpha(L.light, 0)} 0%, ${alpha(L.light, 0.55)} 40%, ${alpha('#ffe6cc', 0.85)} 50%, ${alpha(L.light, 0.55)} 60%, ${alpha(L.light, 0)} 100%)`,
+            }} />
+          )}
+        </div>
+      )}
+
+      {!doorsGone && (
+        <div style={{ position: 'absolute', inset: 0, transform: `scale(${push.toFixed(5)})`, transformOrigin: '50% 50%' }}>
+          <SpeedBlur vx={-vx} amount={0.09} max={22}>
+            <Door side="left" offset={door} light={doorLight} edge={edge} />
+          </SpeedBlur>
+          <SpeedBlur vx={vx} amount={0.09} max={22}>
+            <Door side="right" offset={door} light={doorLight} edge={edge} />
+          </SpeedBlur>
+          {/* 裂点预告：发丝亮线 + 泛光，自中点向上下描出 */}
+          {crack > 0 && frame < SLIDE + 4 && (
+            <div style={{
+              position: 'absolute', left: 960 - 1, top: 0, width: 2, height: 1080, transform: `scaleY(${crack.toFixed(4)})`,
+              background: 'linear-gradient(180deg, rgba(255,226,194,0) 0%, #ffe2c2 22%, #fff6ec 50%, #ffe2c2 78%, rgba(255,226,194,0) 100%)',
+              boxShadow: glow(L.accent, 0.9), opacity: 1 - ramp(frame, SLIDE, 4, EASE.out),
+            }} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/transition/print-texture-transitions/InkBleedReveal.tsx

@@ -0,0 +1,162 @@
+// 墨渗揭示（ink-bleed-reveal）——水墨转场（轨道遮罩法）。
+// 旧景：暖白纸面上的章节扉页（等宽小字章号 + 衬线大标题 + 细线 + 副题），纸纹静态颗粒；
+// 新景 FakeDashboard(A) 放进 SVG <foreignObject>，套 <mask>：落墨点 (800,420) 的白圆当轨道遮罩。
+// 墨的三层（自外向内）：①湿晕——纸被水洇湿的一圈极淡暗环（大半径、重羽化）；
+// ②墨边——深靛墨色的须状渗边，半径领先新景 20–42px：外沿半透明重羽化、内芯浓，读作"湿墨"；
+// ③新景——在墨边后面"显影"出来，内容始终清晰，scale 1.035→1 轻收（显影感）。
+// 三层遮罩圆共用 feTurbulence(baseFrequency 0.02, octaves 3, seed 7 固定) + feDisplacementMap
+// （scale 60→160 随帧涨）造须状渗边——filter 只揉遮罩形状，不揉画面。
+// 节拍：0–14 hold 旧景 → 14–22 墨滴落点（小墨点过冲落下）→ 20–98 半径 0→1450
+// （Easing.out(quad)）叠 ±8% 低频正弦扰动（帧 78–98 衰减到 0，洇满全屏）→
+// 100–130 摘掉 mask 直接铺新景，真静止 30f。
+import React, { useId } from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard } from '../../_fixtures/Fixtures';
+import { EASE, FONT, ramp, mix, Grain } from '../../_fixtures/Polish';
+
+export const INK_BLEED_REVEAL_DURATION = 130;
+
+const SERIF = 'ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif';
+const PAPER = '#f3efe6'; // 暖白纸
+const INK = '#1a1c29'; // 带一点靛的墨色（不用纯黑）
+const PAPER_INK = '#2a2620'; // 印在纸上的字色
+
+// 旧景：章节扉页（纸 + 印刷字）——标题是 video-shotcraft 品牌短句，副题是宣传语
+const PaperPage: React.FC = () => (
+  <div style={{
+    position: 'absolute', inset: 0, background: `radial-gradient(ellipse 80% 70% at 42% 38%, #f8f5ee 0%, ${PAPER} 55%, #e9e4d8 100%)`,
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+  }}>
+    <div style={{ textAlign: 'center', color: PAPER_INK }}>
+      <div style={{ fontFamily: FONT.mono, fontSize: 22, letterSpacing: '0.32em', color: '#8a8173', marginBottom: 34 }}>
+        CHAPTER 02
+      </div>
+      <div style={{ fontFamily: SERIF, fontSize: 112, fontWeight: 500, lineHeight: 1.04, letterSpacing: '-0.025em' }}>
+        Frame motion.
+        <br />
+        <span style={{ fontStyle: 'italic' }}>Craft the shot.</span>
+      </div>
+      <div style={{ width: 120, height: 1.5, background: '#b7ab97', margin: '44px auto 30px' }} />
+      <div style={{ fontFamily: SERIF, fontSize: 34, color: '#6f675a', letterSpacing: '-0.005em' }}>
+        Every shot, tuned in one place.
+      </div>
+    </div>
+    {/* 纸纹：静态颗粒（step 极大 = 不换帧，静止段像素恒定） */}
+    <Grain opacity={0.07} step={100000} freq={0.9} blend="multiply" />
+  </div>
+);
+
+export const InkBleedReveal: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 滤镜/mask ID 按实例生成，多实例同场不串引（useId 的 «:» 在 url() 里非法，需清洗）
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const bleedId = `inkBleed-${uid}`;
+  const featherId = `inkFeather-${uid}`;
+  const haloId = `inkHalo-${uid}`;
+  const maskNew = `inkMaskNew-${uid}`;
+  const maskInk = `inkMaskInk-${uid}`;
+  const maskHalo = `inkMaskHalo-${uid}`;
+
+  // 墨滴落点：画面中心偏左上
+  const cx = 800;
+  const cy = 420;
+
+  // 基础半径：帧 20–98，0 → 1450px（最远角 ~1300px + 渗边位移余量 150px）
+  const baseR = interpolate(frame, [20, 98], [0, 1450], {
+    easing: Easing.out(Easing.quad),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  // ±8% 低频正弦扰动 = 快慢不匀的洇开；帧 78–98 幅度衰减到 0，保证吃满后能真静止
+  const wobbleEnv = interpolate(frame, [78, 98], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  const r = Math.max(0, baseR * (1 + 0.08 * Math.sin(frame * 0.32) * wobbleEnv));
+  // 墨边领先量：起笔时窄（20px）、洇开中段最宽（~42px）——墨在纸上先跑、画面后显
+  const lead = 20 + 22 * Math.sin(Math.PI * ramp(frame, 20, 78, EASE.linear));
+  const rInk = r > 0.5 ? r + lead : 0; // 墨边外沿（半透明、羽化重）
+  const rCore = r > 0.5 ? r + lead * 0.45 : 0; // 墨芯（浓、羽化轻）
+  // 湿晕：比墨边再外扩 ~110px，极淡
+  const rHalo = r > 0.5 ? r + lead + 110 : 0;
+
+  // 渗边发散度：displacement scale 60 → 160（边缘越洇越散、指尖分叉越长）
+  const dispScale = interpolate(frame, [20, 98], [60, 160], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+
+  // 墨滴：14–22f 一个小墨点过冲落下，随后被洇开的墨边吞没
+  const drop = ramp(frame, 14, 8, EASE.overshoot);
+  const dropR = 16 * drop;
+
+  // 新景显影：scale 1.035 → 1（20–100f，ease-out），摘罩前必须精确回到 1
+  const develop = mix(1.035, 1, ramp(frame, 20, 80, EASE.out));
+
+  // 帧 100 起 mask 已全白：摘掉 SVG 直接铺新景，确保结尾像素级真静止
+  const settled = frame >= 100;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: PAPER, position: 'relative', overflow: 'hidden' }}>
+      {!settled && <PaperPage />}
+
+      {settled ? (
+        <div style={{ position: 'absolute', inset: 0 }}>
+          <FakeDashboard variant="A" />
+        </div>
+      ) : (
+        <svg width={1920} height={1080} viewBox="0 0 1920 1080" style={{ position: 'absolute', inset: 0, display: 'block' }}>
+          <defs>
+            {/* filter 只挂在 mask 的圆上——揉的是遮罩边，不是画面内容 */}
+            <filter id={bleedId} x="-40%" y="-40%" width="180%" height="180%">
+              <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" seed="7" result="noise" />
+              <feDisplacementMap in="SourceGraphic" in2="noise" scale={dispScale} xChannelSelector="R" yChannelSelector="G" />
+            </filter>
+            {/* 墨边：同一套须状位移 + 1.6px 羽化 = 湿墨的软边 */}
+            <filter id={featherId} x="-40%" y="-40%" width="180%" height="180%">
+              <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" seed="7" result="noise" />
+              <feDisplacementMap in="SourceGraphic" in2="noise" scale={dispScale * 1.08} xChannelSelector="R" yChannelSelector="G" result="d" />
+              <feGaussianBlur in="d" stdDeviation="3.2" />
+            </filter>
+            <filter id={`${featherId}c`} x="-40%" y="-40%" width="180%" height="180%">
+              <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" seed="7" result="noise" />
+              <feDisplacementMap in="SourceGraphic" in2="noise" scale={dispScale * 1.03} xChannelSelector="R" yChannelSelector="G" result="d" />
+              <feGaussianBlur in="d" stdDeviation="1" />
+            </filter>
+            {/* 湿晕：重羽化，只留一圈若有若无的暗 */}
+            <filter id={haloId} x="-40%" y="-40%" width="180%" height="180%">
+              <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" seed="7" result="noise" />
+              <feDisplacementMap in="SourceGraphic" in2="noise" scale={dispScale * 1.3} xChannelSelector="R" yChannelSelector="G" result="d" />
+              <feGaussianBlur in="d" stdDeviation="34" />
+            </filter>
+            <mask id={maskHalo} maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1080">
+              <rect x="0" y="0" width="1920" height="1080" fill="black" />
+              {rHalo > 0 && <circle cx={cx} cy={cy} r={rHalo} fill="white" filter={`url(#${haloId})`} />}
+            </mask>
+            <mask id={maskInk} maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1080">
+              <rect x="0" y="0" width="1920" height="1080" fill="black" />
+              {rInk > 0 && <circle cx={cx} cy={cy} r={rInk} fill="white" filter={`url(#${featherId})`} />}
+              {dropR > 0.5 && <circle cx={cx} cy={cy} r={dropR} fill="white" />}
+            </mask>
+            <mask id={`${maskInk}c`} maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1080">
+              <rect x="0" y="0" width="1920" height="1080" fill="black" />
+              {rCore > 0 && <circle cx={cx} cy={cy} r={rCore} fill="white" filter={`url(#${featherId}c)`} />}
+              {dropR > 0.5 && <circle cx={cx} cy={cy} r={dropR * 0.86} fill="white" />}
+            </mask>
+            <mask id={maskNew} maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1080">
+              <rect x="0" y="0" width="1920" height="1080" fill="black" />
+              {r > 0.5 && <circle cx={cx} cy={cy} r={r} fill="white" filter={`url(#${bleedId})`} />}
+            </mask>
+          </defs>
+          {/* ① 湿晕 */}
+          <rect x="0" y="0" width="1920" height="1080" fill="#5a4e3a" opacity={0.12} mask={`url(#${maskHalo})`} />
+          {/* ② 墨边（含落点墨滴） */}
+          <rect x="0" y="0" width="1920" height="1080" fill={INK} opacity={0.42} mask={`url(#${maskInk})`} />
+          <rect x="0" y="0" width="1920" height="1080" fill={INK} opacity={0.86} mask={`url(#${maskInk}c)`} />
+          {/* ③ 新景显影 */}
+          <g mask={`url(#${maskNew})`}>
+            <foreignObject x="0" y="0" width="1920" height="1080">
+              <div style={{ width: 1920, height: 1080, transform: `scale(${develop})`, transformOrigin: `${cx}px ${cy}px` }}>
+                <FakeDashboard variant="A" />
+              </div>
+            </foreignObject>
+          </g>
+        </svg>
+      )}
+    </div>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/transition/shot-transitions/PortalWipeV2.tsx

@@ -0,0 +1,248 @@
+// portal-wipe 穿窗入景（纵深款）——网格里一张卡放大成全屏窗口，窗内是被点开那张卡的"世界"，
+// 只 2 层视差（远景面板 0.08 + 近景 2 枚浮卡 0.3，不加 blur），穿窗完成后 8f 缓停 → 静止读清新景。
+//
+// 第二轮重设计（瓷白工作台 → 钴蓝预测世界）：
+// - look = porcelain（冷白 · 钴蓝）。不再用通用灰阶 FakeDashboard：外景是为镜头设计的 video-shotcraft
+//   「Workspace」主页（眉题前挂字标）——96px 问候标题 + 3×2 张「影片项目」卡，每张卡有自己的程序化封面
+//   （同心圆 / 柱 / 点阵 / 斜纹 / 弧 / 波形）、40px 标题与 32px 元信息。目标卡 = 第 2 行居中的
+//   「Premiere Forecast」（发布片的观看量预测，钴蓝封面 + 三道波形）。
+// - 语义闭环：目标卡的**封面就是窗内世界的样子**——窗内是深钴蓝空间，三道同款波形放大成背景地貌；
+//   远景层 = 一块玻璃预测面板（64px 标题 + 面积图：实线历史 + 虚线预测区间 + TODAY 标线），
+//   近景层 = 两枚浮卡（+18.4% vs last launch / 94% confidence 环），落点压住面板两角，做出前后景。
+// - 运动：目标卡先悬浮抬起作预备（−10px、1.03×、阴影变大变虚），邻卡同时退暗；窗放大 40f 用
+//   bezier(0.7,0,0.3,1) 先慢后快再缓收；窗内整景 0.42→1 与窗几何同一个 t；面积图的线随 t 画出、
+//   与穿窗同时完成；视差散开 Easing.out(cubic) 在穿窗完成后 8f 内速度归零，之后画面真静止。
+//
+// 时间表（30fps，共 140f）：
+//   0–14    hold：Workspace 主页建立（第 0 帧即完整画面）
+//   14–26   预备：目标卡抬起、邻卡退暗 18%
+//   26–66   窗放大 40f：卡变全屏窗，卡面 0–28% 行程内渐隐露出窗内世界（再慢会被拉成巨字残影）
+//   42–74   近/远两层视差散开（66f 穿窗完成后 8f 缓停）
+//   74–140  静止 hold 66f：新世界完整可读
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { EASE, FONT, ramp, mix, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, type } from '../../_fixtures/Look';
+import { ShotcraftWordmark } from '../../_fixtures/Brand';
+
+export const PORTAL_WIPE_V2_DURATION = 140;
+
+const L = LOOKS.porcelain;
+const COBALT = { deep: '#040a26', mid: '#0b1a5c', hi: '#2f5bff', glow: '#7d9bff', mint: '#3fe0c5' };
+
+// ───────── 外景：Workspace 网格 ─────────
+const TILE = { w: 520, h: 300, gap: 32, cover: 176 };
+const GRID_X = (1920 - (3 * TILE.w + 2 * TILE.gap)) / 2;
+const GRID_Y = 330;
+type Space = { name: string; meta: string; art: 'rings' | 'bars' | 'dots' | 'stripes' | 'waves' | 'arcs'; c: [string, string] };
+const SPACES: Space[] = [
+  { name: 'Launch Film', meta: 'Promo · 12 shots', art: 'rings', c: ['#ff9a6b', '#ff5f6d'] },
+  { name: 'Changelog Reel', meta: 'Release · 8 shots', art: 'bars', c: ['#4fd1a5', '#1f9e89'] },
+  { name: 'Onboarding Tour', meta: 'Explainer · 21 shots', art: 'dots', c: ['#b9a2ff', '#7a5cff'] },
+  { name: 'Ink Press Teaser', meta: 'Template · 5 shots', art: 'stripes', c: ['#f2c879', '#d99a3e'] },
+  { name: 'Premiere Forecast', meta: 'Analytics · 9 films', art: 'waves', c: ['#3d6bff', '#0f2a9e'] },
+  { name: 'Render Queue', meta: 'Renders · 14 jobs', art: 'arcs', c: ['#5cc8e8', '#2a7fb8'] },
+];
+const TARGET = 4;
+const slotOf = (i: number) => ({ x: GRID_X + (i % 3) * (TILE.w + TILE.gap), y: GRID_Y + Math.floor(i / 3) * (TILE.h + TILE.gap) });
+
+// 三道波形（封面与窗内世界共用同一组曲线 = 语义闭环）
+const wavePath = (w: number, h: number, k: number, phase: number) => {
+  const pts: string[] = [];
+  for (let i = 0; i <= 48; i++) {
+    const x = (i / 48) * w;
+    const y = h * (0.62 - 0.1 * k) + Math.sin(i / 48 * Math.PI * 2.2 + phase + k * 0.9) * h * 0.11 - (i / 48) * h * 0.16;
+    pts.push(`${i ? 'L' : 'M'}${x.toFixed(1)} ${y.toFixed(1)}`);
+  }
+  return pts.join(' ');
+};
+
+const Cover: React.FC<{ s: Space; w: number; h: number }> = ({ s, w, h }) => {
+  const stroke = 'rgba(255,255,255,0.55)';
+  let art: React.ReactNode = null;
+  if (s.art === 'rings') art = [0, 1, 2, 3, 4].map((k) => <circle key={k} cx={w * 0.78} cy={h * 0.62} r={30 + k * 34} fill="none" stroke={stroke} strokeWidth={2} opacity={1 - k * 0.16} />);
+  if (s.art === 'bars') art = Array.from({ length: 9 }, (_, k) => { const bh = h * (0.25 + 0.5 * Math.abs(Math.sin(k * 1.3 + 0.6))); return <rect key={k} x={w * 0.42 + k * 30} y={h - bh} width={16} height={bh} rx={4} fill="rgba(255,255,255,0.42)" />; });
+  if (s.art === 'dots') art = Array.from({ length: 40 }, (_, k) => <circle key={k} cx={w * 0.46 + (k % 10) * 26} cy={h * 0.2 + Math.floor(k / 10) * 32} r={4 + ((k * 7) % 5)} fill="rgba(255,255,255,0.45)" />);
+  if (s.art === 'stripes') art = Array.from({ length: 12 }, (_, k) => <line key={k} x1={w * 0.3 + k * 34} y1={h + 10} x2={w * 0.3 + k * 34 + 120} y2={-10} stroke={stroke} strokeWidth={10} opacity={0.5} />);
+  if (s.art === 'arcs') art = [0, 1, 2, 3].map((k) => <path key={k} d={`M ${w * 0.35} ${h + 4} A ${90 + k * 46} ${90 + k * 46} 0 0 1 ${w * 0.35 + 2 * (90 + k * 46)} ${h + 4}`} fill="none" stroke={stroke} strokeWidth={2.5} />);
+  if (s.art === 'waves') art = [0, 1, 2].map((k) => <path key={k} d={wavePath(w, h, k, 0)} fill="none" stroke={k === 0 ? COBALT.mint : stroke} strokeWidth={k === 0 ? 4 : 2.5} />);
+  return (
+    <div style={{ position: 'absolute', left: 0, top: 0, width: w, height: h, background: `linear-gradient(135deg, ${s.c[0]} 0%, ${s.c[1]} 100%)`, overflow: 'hidden' }}>
+      <svg width={w} height={h} style={{ position: 'absolute', inset: 0 }}>{art}</svg>
+      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 40%)' }} />
+    </div>
+  );
+};
+
+const Tile: React.FC<{ s: Space }> = ({ s }) => (
+  <div style={{ position: 'absolute', inset: 0, borderRadius: 22, overflow: 'hidden', background: L.surface, border: `1px solid ${L.line}` }}>
+    <Cover s={s} w={TILE.w} h={TILE.cover} />
+    <div style={{ position: 'absolute', left: 26, top: TILE.cover + 22, ...type(40, 650), color: L.ink, whiteSpace: 'nowrap' }}>{s.name}</div>
+    <div style={{ position: 'absolute', left: 26, top: TILE.cover + 74, ...type(32, 450), color: L.ink3, whiteSpace: 'nowrap' }}>{s.meta}</div>
+  </div>
+);
+
+// ───────── 窗内世界：钴蓝预测空间 ─────────
+// 预测曲线：确定性序列（0–39 历史实线，39–59 预测虚线 + 区间带）
+const SERIES = Array.from({ length: 60 }, (_, i) => 0.28 + i * 0.007 + 0.065 * Math.sin(i * 0.55) + 0.02 * Math.sin(i * 1.7 + 1));
+const NOW = 39;
+const CH = { x: 64, y: 196, w: 1112, h: 360 };
+const px = (i: number) => CH.x + (i / 59) * CH.w;
+const py = (v: number) => CH.y + CH.h * (1 - v);
+const line = (a: number, b: number) => SERIES.slice(a, b + 1).map((v, k) => `${k ? 'L' : 'M'}${px(a + k).toFixed(1)} ${py(v).toFixed(1)}`).join(' ');
+const BAND = (() => {
+  const up = SERIES.slice(NOW).map((v, k) => `${k ? 'L' : 'M'}${px(NOW + k).toFixed(1)} ${py(v + 0.02 + k * 0.006).toFixed(1)}`).join(' ');
+  const dn = SERIES.slice(NOW).map((v, k) => [px(NOW + k), py(v - 0.02 - k * 0.006)] as const).reverse().map(([x, y]) => `L${x.toFixed(1)} ${y.toFixed(1)}`).join(' ');
+  return `${up} ${dn} Z`;
+})();
+const AREA = `${line(0, NOW)} L${px(NOW).toFixed(1)} ${CH.y + CH.h} L${px(0).toFixed(1)} ${CH.y + CH.h} Z`;
+
+const glass: React.CSSProperties = {
+  background: 'linear-gradient(180deg, rgba(160,185,255,0.13) 0%, rgba(120,150,255,0.05) 100%)',
+  border: '1px solid rgba(190,210,255,0.18)',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.16), 0 50px 120px -30px rgba(0,2,20,0.8), 0 14px 36px rgba(0,2,20,0.45)`,
+};
+
+const ForecastPanel: React.FC<{ draw: number }> = ({ draw }) => (
+  <div style={{ position: 'absolute', left: 340, top: 200, width: 1240, height: 660, borderRadius: 30, overflow: 'hidden', ...glass }}>
+    <div style={{ position: 'absolute', left: 64, top: 52, ...type(28, 600, { mono: true }), color: COBALT.glow, letterSpacing: '0.16em' }}>PROJECT · ANALYTICS</div>
+    <div style={{ position: 'absolute', left: 64, top: 96, ...type(64, 700), color: '#f2f5ff' }}>Premiere Forecast</div>
+    <div style={{ position: 'absolute', right: 64, top: 112, display: 'flex', gap: 34, ...type(32, 500), color: '#a9b8e8' }}>
+      <span><span style={{ display: 'inline-block', width: 28, height: 4, borderRadius: 2, background: COBALT.mint, verticalAlign: 'middle', marginRight: 12 }} />Views</span>
+      <span><span style={{ display: 'inline-block', width: 28, height: 4, borderRadius: 2, borderTop: `3px dashed ${COBALT.glow}`, verticalAlign: 'middle', marginRight: 12 }} />Next 90 days</span>
+    </div>
+    <svg width={1240} height={660} style={{ position: 'absolute', inset: 0 }}>
+      <defs>
+        <linearGradient id="pw-area" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor={COBALT.mint} stopOpacity={0.32} />
+          <stop offset="1" stopColor={COBALT.mint} stopOpacity={0} />
+        </linearGradient>
+        <clipPath id="pw-draw"><rect x={0} y={0} width={CH.x + CH.w * draw + 4} height={660} /></clipPath>
+      </defs>
+      {[0, 1, 2, 3].map((k) => <line key={k} x1={CH.x} x2={CH.x + CH.w} y1={CH.y + (CH.h / 3) * k} y2={CH.y + (CH.h / 3) * k} stroke="rgba(190,210,255,0.1)" strokeWidth={1.5} />)}
+      <g clipPath="url(#pw-draw)">
+        <path d={AREA} fill="url(#pw-area)" />
+        <path d={BAND} fill={alpha(COBALT.glow, 0.16)} />
+        <path d={line(0, NOW)} fill="none" stroke={COBALT.mint} strokeWidth={5} strokeLinejoin="round" strokeLinecap="round" />
+        <path d={line(NOW, 59)} fill="none" stroke={COBALT.glow} strokeWidth={4} strokeDasharray="12 10" strokeLinecap="round" />
+      </g>
+      {draw > 0.66 && (
+        <g opacity={Math.min(1, (draw - 0.66) * 6)}>
+          <line x1={px(NOW)} x2={px(NOW)} y1={CH.y - 16} y2={CH.y + CH.h} stroke="rgba(230,238,255,0.45)" strokeWidth={1.5} strokeDasharray="4 6" />
+          <circle cx={px(NOW)} cy={py(SERIES[NOW])} r={10} fill={COBALT.deep} stroke={COBALT.mint} strokeWidth={4} />
+          <text x={px(NOW) + 16} y={CH.y - 2} fontFamily={FONT.mono} fontSize={24} fill="#a9b8e8" letterSpacing="0.12em">TODAY</text>
+        </g>
+      )}
+    </svg>
+    <div style={{ position: 'absolute', left: 64, bottom: 46, right: 64, display: 'flex', justifyContent: 'space-between', ...type(28, 500, { mono: true }), color: '#6f7fae' }}>
+      <span /><span>MAY</span><span>JUN</span><span>JUL</span><span>AUG</span><span>SEP</span>
+    </div>
+  </div>
+);
+
+// 近景两枚浮卡的**终点**（散开 ×1.3 之后），按 960/540 中心反推散开前的位置
+const NEAR_K = 1.3;
+const nearPos = (x: number, y: number) => ({ x: 960 + (x - 960) / NEAR_K, y: 540 + (y - 540) / NEAR_K });
+const CHIP_A = nearPos(1380, 64); // 右上：压住面板右上角
+const CHIP_B = nearPos(104, 790); // 左下：压住面板左下角
+
+const World: React.FC<{ spread: number; draw: number }> = ({ spread, draw }) => (
+  <AbsoluteFill style={{ background: `radial-gradient(ellipse 80% 70% at 50% 30%, ${COBALT.mid} 0%, #071244 50%, ${COBALT.deep} 100%)` }}>
+    {/* 背景地貌：封面同款三道波形放大成世界的地平线 */}
+    <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
+      {[0, 1, 2].map((k) => <path key={k} d={wavePath(1920, 1080, k, 0)} transform="translate(0 210)" fill="none" stroke={k === 0 ? COBALT.mint : COBALT.glow} strokeOpacity={k === 0 ? 0.35 : 0.22} strokeWidth={k === 0 ? 3 : 2} />)}
+    </svg>
+    <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse 40% 34% at 50% 18%, ${alpha(COBALT.hi, 0.35)} 0%, ${alpha(COBALT.hi, 0)} 100%)` }} />
+    {/* 远景层（系数 0.08） */}
+    <div style={{ position: 'absolute', inset: 0, transform: `scale(${(1 + spread * 0.08).toFixed(4)})`, transformOrigin: '960px 540px' }}>
+      <ForecastPanel draw={draw} />
+    </div>
+    {/* 近景层（系数 0.3）：两枚浮卡 */}
+    <div style={{ position: 'absolute', inset: 0, transform: `scale(${(1 + spread * (NEAR_K - 1)).toFixed(4)})`, transformOrigin: '960px 540px' }}>
+      <div style={{ position: 'absolute', left: CHIP_A.x, top: CHIP_A.y, width: 400 / NEAR_K, height: 200 / NEAR_K, borderRadius: 22 / NEAR_K, ...glass, background: 'linear-gradient(180deg, rgba(30,55,160,0.92), rgba(14,30,110,0.92))' }}>
+        <div style={{ position: 'absolute', left: 30 / NEAR_K, top: 26 / NEAR_K, ...type(84 / NEAR_K, 750), color: COBALT.mint }}>+18.4%</div>
+        <div style={{ position: 'absolute', left: 32 / NEAR_K, top: 128 / NEAR_K, ...type(32 / NEAR_K, 500), color: '#c3cff5' }}>vs last launch</div>
+      </div>
+      <div style={{ position: 'absolute', left: CHIP_B.x, top: CHIP_B.y, width: 420 / NEAR_K, height: 180 / NEAR_K, borderRadius: 22 / NEAR_K, ...glass, background: 'linear-gradient(180deg, rgba(30,55,160,0.92), rgba(14,30,110,0.92))' }}>
+        <svg width={120 / NEAR_K} height={120 / NEAR_K} viewBox="0 0 120 120" style={{ position: 'absolute', left: 28 / NEAR_K, top: 30 / NEAR_K }}>
+          <circle cx={60} cy={60} r={48} fill="none" stroke="rgba(190,210,255,0.16)" strokeWidth={12} />
+          <circle cx={60} cy={60} r={48} fill="none" stroke={COBALT.glow} strokeWidth={12} strokeLinecap="round" strokeDasharray={`${(2 * Math.PI * 48 * 0.94).toFixed(1)} 400`} transform="rotate(-90 60 60)" />
+        </svg>
+        <div style={{ position: 'absolute', left: 172 / NEAR_K, top: 34 / NEAR_K, ...type(64 / NEAR_K, 750), color: '#f2f5ff' }}>94%</div>
+        <div style={{ position: 'absolute', left: 174 / NEAR_K, top: 108 / NEAR_K, ...type(32 / NEAR_K, 500), color: '#c3cff5' }}>confidence</div>
+      </div>
+    </div>
+  </AbsoluteFill>
+);
+
+export const PortalWipeV2: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 预备：目标卡悬浮抬起、邻卡退暗
+  const hover = ramp(frame, 14, 12, EASE.snappy);
+  const slot = slotOf(TARGET);
+  const s0 = 1 + 0.03 * hover;
+  const c0 = { x: slot.x - (TILE.w * (s0 - 1)) / 2, y: slot.y - 10 * hover - (TILE.h * (s0 - 1)) / 2, w: TILE.w * s0, h: TILE.h * s0, r: 22 };
+
+  // 窗放大：40f 先慢后快再缓收
+  const t = interpolate(frame, [26, 66], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.7, 0, 0.3, 1) });
+  const x = mix(c0.x, 0, t), y = mix(c0.y, 0, t), w = mix(c0.w, 1920, t), h = mix(c0.h, 1080, t), r = mix(c0.r, 0, t);
+  // 视差散开：穿窗完成（66f）后 8f 内速度归零（74f）
+  const spread = interpolate(frame, [42, 74], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic) });
+  const innerScale = mix(0.42, 1, t);
+  const draw = ramp(frame, 34, 32, EASE.swift); // 曲线与穿窗同时画完
+  const elev = (4 + 18 * hover) * (1 - t) + 56 * Math.sin(Math.PI * Math.min(1, t * 1.1)) * (1 - t);
+  const oldDim = 0.26 * ramp(frame, 26, 34, EASE.out);
+  const neighbours = 1 - 0.18 * hover;
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden' }}>
+      {/* 外景：Workspace 主页（穿窗完成后不再渲染） */}
+      {t < 1 && (
+        <>
+          <Stage look={L} keyLight={{ x: 0.35, y: 0.0 }} fill={{ x: 0.9, y: 0.95 }} />
+          <div style={{ position: 'absolute', left: GRID_X, top: 104, height: 52, display: 'flex', alignItems: 'center', gap: 24 }}>
+            <ShotcraftWordmark size={30} tone="light" color={L.ink} markScale={1.7} gap={14} />
+            <span style={{ width: 1.5, height: 30, background: L.line }} />
+            <span style={{ ...type(30, 600, { mono: true }), color: L.accent, letterSpacing: '0.18em' }}>WORKSPACE</span>
+          </div>
+          <div style={{ position: 'absolute', left: GRID_X - 4, top: 168, ...type(96, 720), color: L.ink }}>Good morning, Mara.</div>
+          <div style={{ position: 'absolute', right: GRID_X, top: 196, ...type(36, 500), color: L.ink2 }}>6 projects · 2 rendered today</div>
+          {SPACES.map((s, i) => {
+            if (i === TARGET) return null;
+            const p = slotOf(i);
+            return (
+              <div key={s.name} style={{ position: 'absolute', left: p.x, top: p.y, width: TILE.w, height: TILE.h, opacity: neighbours, borderRadius: 22, boxShadow: softShadow(6, { color: L.shadow, strength: 0.9 }) }}>
+                <Tile s={s} />
+              </div>
+            );
+          })}
+          {oldDim > 0.002 && <AbsoluteFill style={{ background: alpha(COBALT.deep, oldDim) }} />}
+        </>
+      )}
+
+      {/* 窗（放大的卡）——内藏新世界 */}
+      <div style={{
+        position: 'absolute', left: x, top: y, width: w, height: h, borderRadius: r, overflow: 'hidden',
+        boxShadow: t < 1 ? softShadow(elev, { color: L.shadow, strength: 1.6 }) : 'none',
+      }}>
+        {t > 0 && (
+          <div style={{
+            position: 'absolute', width: 1920, height: 1080, left: '50%', top: '50%',
+            transform: `translate(-50%, -50%) scale(${innerScale.toFixed(4)})`, overflow: 'hidden',
+          }}>
+            <World spread={spread} draw={draw} />
+          </div>
+        )}
+        {/* 卡正面：放大初期渐隐，露出窗内世界 */}
+        {t < 0.3 && (
+          <div style={{ position: 'absolute', inset: 0, opacity: Math.max(0, 1 - t * 3.6) }}>
+            <div style={{ position: 'absolute', left: 0, top: 0, width: TILE.w, height: TILE.h, transform: `scale(${(w / TILE.w).toFixed(4)}, ${(h / TILE.h).toFixed(4)})`, transformOrigin: '0 0' }}>
+              <Tile s={SPACES[TARGET]} />
+            </div>
+          </div>
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};