dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneOutroLive.tsx

@@ -0,0 +1,411 @@
+import { useVisualTheme, themePaint, themeAsset, sceneDefaults } from '../../themes/visual-theme';
+import { AbsoluteFill, Img, interpolate, useCurrentFrame, Easing } from 'remotion';
+import { PageCam, CamKey } from './PageCam';
+import { AIFL_SHOTS } from '../Main';
+import layout from '../live-layout.json';
+
+/** Context-level defaults (copy / sizes / palette), editable per clip in the workbench. */
+export const SCENE_OUTRO_DEFAULTS = {
+  wordmark: 'AI Foundation Lab',
+  wordmarkSize: 148,
+  tagline: 'Team Research Console',
+  taglineSize: 25,
+  ink: '#13110f',    // oklch(18% 0.006 82)
+  amber: '#955905',  // oklch(52% 0.115 65)
+  muted: '#65635f',  // oklch(50% 0.006 82)
+};
+type SceneOutroProps = Partial<typeof SCENE_OUTRO_DEFAULTS>;
+const PAGE_H = layout.projects.pageH;
+const WBR_PAGE_H = layout.wbr.pageH;
+
+// real overshoot on landing (the old bezier(0.25,0.9,0.3,1) never crossed 1)
+const FLY_EASE = Easing.bezier(0.34, 1.4, 0.44, 1);
+const CRANE_EASE = Easing.bezier(0.3, 0, 0.2, 1);
+
+/** One member of the group photo: a page element flying in from off-screen
+ * to its settled pose around the wordmark. Sizes are 1x CSS px (textures 2x). */
+type FlyEl = {
+  key: string;
+  file: string;
+  w: number;
+  h: number;
+  cx: number;
+  cy: number;
+  scale: number;
+  rot: number; // settled rotation, deg
+  dx: number; // fly-in start offset
+  dy: number;
+  radius: number;
+  cue: number; // scene frame the 12f flight starts
+  wbrCrop?: boolean; // element I: crop out of wbr-full.png as a background
+};
+
+// render order = cue order, so later arrivals stack on top
+const ELS: FlyEl[] = [
+  { key: 'nav', file: 'nav.png', w: 1920, h: 61, cx: 960, cy: 84, scale: 0.62, rot: 0, dx: 0, dy: -120, radius: 10, cue: 4 },
+  { key: 'card4', file: 'card4-hires.png', w: 358, h: 312, cx: 300, cy: 400, scale: 0.72, rot: -5, dx: -500, dy: 0, radius: 16, cue: 7 },
+  { key: 'card1', file: 'card1.png', w: 358, h: 288, cx: 1630, cy: 380, scale: 0.68, rot: 4, dx: 500, dy: 0, radius: 16, cue: 10 },
+  { key: 'paper1', file: 'paper1.png', w: 1104, h: 225, cx: 1460, cy: 730, scale: 0.5, rot: -3, dx: 450, dy: 260, radius: 12, cue: 13 },
+  { key: 'card7', file: 'card7.png', w: 358, h: 312, cx: 260, cy: 800, scale: 0.6, rot: 3, dx: -400, dy: 300, radius: 16, cue: 16 },
+  { key: 'paper3', file: 'paper3.png', w: 1104, h: 225, cx: 620, cy: 930, scale: 0.48, rot: 2, dx: 0, dy: 320, radius: 12, cue: 19 },
+  { key: 'search', file: 'float-search.png', w: 1016, h: 44, cx: 760, cy: 180, scale: 0.55, rot: -1.5, dx: 0, dy: -240, radius: 10, cue: 22 },
+  { key: 'stats', file: 'float-stats.png', w: 315, h: 56, cx: 1560, cy: 950, scale: 0.9, rot: -2, dx: 380, dy: 0, radius: 10, cue: 25 },
+  { key: 'wbr', file: 'wbr-full.png', w: 688, h: 54, cx: 1620, cy: 170, scale: 0.8, rot: 2.5, dx: 360, dy: -200, radius: 8, cue: 28, wbrCrop: true },
+];
+
+// 20 gold dust motes, all parameters index-derived (deterministic)
+const DUST = Array.from({ length: 20 }, (_, i) => ({
+  x: (i * 439 + 137) % 1920,
+  y0: (i * 613 + 271) % 1080,
+  rise: 0.3 + (i % 5) * 0.11, // px/frame upward
+  swayAmp: 9 + (i % 4) * 5,
+  swayFreq: 0.022 + (i % 3) * 0.008,
+  phase: (i * 0.83) % (Math.PI * 2),
+  size: 2 + (i % 3) * 0.5, // 2–3px
+  opacity: 0.15 + ((i * 7) % 5) * 0.05, // 0.15–0.35
+}));
+
+/** Sign-off reworked as a "group photo": core elements from every page fly in
+ * from off-screen in staggered beats and settle in an arc around the center;
+ * then the letterpressed "AI Foundation Lab" wordmark appears while the assembled
+ * elements recede slightly into the background — teammates in the back row.
+ * Launch-event treatment: a crane-in camera on the whole photo layer, ghost
+ * trails + landing glows on the fly-ins, a stage light behind the wordmark,
+ * gold dust and a single opening light sweep for atmosphere. */
+export const SceneOutroLive: React.FC<SceneOutroProps> = (props) => {
+  const theme = useVisualTheme();
+  const paperStyle = theme.id === 'ink-press';
+  const paint = (css: string) => themePaint(theme, css);
+  const asset = (src: string) => themeAsset(theme, src);
+  const SERIF = (paperStyle ? 'ui-serif, Georgia, "Times New Roman", serif' : theme.font);
+  const MONO = (paperStyle ? 'ui-monospace, SFMono-Regular, Menlo, monospace' : theme.font);
+  const { wordmark, wordmarkSize, tagline, taglineSize, ink, amber, muted } = { ...sceneDefaults(theme, 'outro', SCENE_OUTRO_DEFAULTS), ...props };
+  const LETTERS = wordmark.split('');
+  const frame = useCurrentFrame();
+  const duration = AIFL_SHOTS.outro.duration; // 115
+
+  const blur = interpolate(frame, [0, 24], [0, 14], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.4, 0, 0.4, 1),
+  });
+  const rule = interpolate(frame, [58, 70], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.3, 0, 0.2, 1),
+  });
+  const tag = interpolate(frame, paperStyle ? [68, 80] : [62, 72], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const fadeOut = interpolate(frame, [duration - 12, duration], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // as the wordmark takes the stage (42–50) the assembled elements step back
+  const recede = interpolate(frame, [42, 50], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // ---- camera crane on the whole group-photo layer (wordmark stays outside) ----
+  // 0–40: crane down from a slight top angle onto the stage; 40–end: keep breathing in
+  const craneT = interpolate(frame, [0, 40], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: CRANE_EASE,
+  });
+  const pushT = interpolate(frame, [40, duration], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const camScale = 1.06 - 0.06 * craneT + 0.035 * pushT;
+  const camTilt = 4 * (1 - craneT); // rotateX deg
+
+  // opening light sweep: one wide, faint warm band crossing the screen, 2–14
+  const sweepX = interpolate(frame, [2, 14], [-700, 2020], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.4, 0, 0.6, 1),
+  });
+  const sweepOpacity = interpolate(frame, [2, 5, 11, 14], [0, 0.12, 0.12, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // stage light behind the wordmark: 0 → 0.5 → 0.25 across 42–58
+  const stageLight = interpolate(frame, [42, 50, 58], [0, 0.5, 0.25], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // closing vignette focuses the center from the wordmark beat on
+  const vignette = interpolate(frame, [42, 54], [0, 0.1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // rule extension lines: shoot out to ±320px (58–66), then fade over 6 frames
+  const ruleExt = interpolate(frame, [58, 66], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.3, 0, 0.2, 1),
+  });
+  const ruleExtFade = interpolate(frame, [66, 72], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // one breath of letter-spacing once the wordmark is fully set (62–66)
+  const wordSpacing = interpolate(frame, [62, 66], [-0.01, 0.005], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.3, 0, 0.2, 1),
+  });
+
+  const CAM: CamKey[] = [{ frame: 0, cx: 960, cy: 700, zoom: 0.75 }];
+
+  return (
+    <AbsoluteFill style={{ opacity: fadeOut }}>
+      {/* ---- group-photo layer under a slow crane-in camera ---- */}
+      <AbsoluteFill
+        style={{
+          transform: `perspective(1400px) rotateX(${camTilt}deg) scale(${camScale})`,
+          transformOrigin: '50% 45%',
+        }}
+      >
+        <PageCam src="textures/live/projects-full.png" pageH={PAGE_H} keys={CAM} blur={blur} saturate={0.9} />
+        {/* warm scrim under the flying elements: keeps the center legible without washing them */}
+        <AbsoluteFill style={{ background: paint('radial-gradient(1200px 800px at 50% 48%, rgba(250,247,242,0.82), rgba(250,247,242,0.55) 60%, rgba(250,247,242,0.35))'), pointerEvents: 'none' }} />
+
+        {/* group photo: elements fly in from all sides and settle around the wordmark */}
+        <AbsoluteFill style={{ pointerEvents: 'none' }}>
+          {ELS.map((el) => {
+            if (frame < el.cue) return null;
+
+            const t = interpolate(frame, [el.cue, el.cue + 12], [0, 1], {
+              extrapolateLeft: 'clamp',
+              extrapolateRight: 'clamp',
+              easing: FLY_EASE,
+            });
+            const opacity = interpolate(frame, [el.cue, el.cue + 3], [0, 1], {
+              extrapolateLeft: 'clamp',
+              extrapolateRight: 'clamp',
+            });
+
+            const x = el.dx * (1 - t);
+            const y = el.dy * (1 - t);
+            const rot = el.rot * (2 - t); // rot×2 in flight → rot settled
+            const scale = el.scale * (1.12 - 0.12 * t);
+
+            // shadow: big and soft while airborne, tightening to a dual layer at rest
+            const air = Math.max(0, 1 - t);
+            const shadow =
+              air > 0.01
+                ? paint(`0 ${10 + 26 * air}px ${24 + 46 * air}px rgba(30,25,18,${0.16 + 0.1 * air}), 0 2px 6px rgba(30,25,18,.08)`)
+                : paint('0 10px 24px rgba(30,25,18,.16), 0 2px 6px rgba(30,25,18,.08)');
+
+            const settledOpacity = opacity * (1 - 0.12 * recede);
+            const saturate = 1 - 0.08 * recede;
+
+            const texture = el.wbrCrop
+              ? {
+                  background: paint(`#fff url(${asset(`textures/live/${el.file}`)}) -576px -173px / 1920px ${WBR_PAGE_H}px no-repeat`),
+                  border: paint('1px solid oklch(90% .008 82)'),
+                }
+              : null;
+
+            // ghost trail while airborne: a blurred faint copy lagging 8% along the path
+            const linT = interpolate(frame, [el.cue, el.cue + 12], [0, 1], {
+              extrapolateLeft: 'clamp',
+              extrapolateRight: 'clamp',
+            });
+            const showGhost = linT > 0.05 && linT < 0.95;
+
+            // landing glow: an amber spot blooming at the bbox center as the element sets
+            const glow = interpolate(frame, [el.cue + 12, el.cue + 18], [0.35, 0], {
+              extrapolateLeft: 'clamp',
+              extrapolateRight: 'clamp',
+            });
+            const showGlow = frame >= el.cue + 12 && frame < el.cue + 18;
+            const glowR = el.w * el.scale * 0.5;
+
+            return (
+              <div key={el.key}>
+                {showGhost ? (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      left: el.cx - el.w / 2,
+                      top: el.cy - el.h / 2,
+                      width: el.w,
+                      height: el.h,
+                      transform: `translate(${x + el.dx * 0.08}px, ${y + el.dy * 0.08}px) rotate(${rot}deg) scale(${scale})`,
+                      transformOrigin: 'center center',
+                      borderRadius: el.radius,
+                      overflow: 'hidden',
+                      opacity: 0.2 * Math.max(0, 1 - linT),
+                      filter: 'blur(8px)',
+                      ...texture,
+                    }}
+                  >
+                    {el.wbrCrop ? null : (
+                      <Img
+                        src={asset(`textures/live/${el.file}`)}
+                        style={{ position: 'absolute', inset: 0, width: el.w, height: el.h, display: 'block' }}
+                      />
+                    )}
+                  </div>
+                ) : null}
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: el.cx - el.w / 2,
+                    top: el.cy - el.h / 2,
+                    width: el.w,
+                    height: el.h,
+                    transform: `translate(${x}px, ${y}px) rotate(${rot}deg) scale(${scale})`,
+                    transformOrigin: 'center center',
+                    borderRadius: el.radius,
+                    overflow: 'hidden',
+                    boxShadow: shadow,
+                    opacity: settledOpacity,
+                    filter: `saturate(${saturate})`,
+                    ...texture,
+                  }}
+                >
+                  {el.wbrCrop ? null : (
+                    <Img
+                      src={asset(`textures/live/${el.file}`)}
+                      style={{ position: 'absolute', inset: 0, width: el.w, height: el.h, display: 'block' }}
+                    />
+                  )}
+                </div>
+                {paperStyle && showGlow ? (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      left: el.cx - glowR,
+                      top: el.cy - glowR,
+                      width: glowR * 2,
+                      height: glowR * 2,
+                      borderRadius: '50%',
+                      background: paint('radial-gradient(circle, oklch(78% 0.13 70 / 0.9), oklch(78% 0.13 70 / 0) 70%)'),
+                      opacity: glow,
+                      mixBlendMode: 'multiply',
+                    }}
+                  />
+                ) : null}
+              </div>
+            );
+          })}
+        </AbsoluteFill>
+      </AbsoluteFill>
+
+      {/* ---- atmosphere: gold dust drifting up in front of the group photo ---- */}
+      <AbsoluteFill style={{ pointerEvents: 'none' }}>
+        {paperStyle && DUST.map((d, i) => {
+          const y = (((d.y0 - frame * d.rise) % 1080) + 1080) % 1080;
+          const x = d.x + Math.sin(frame * d.swayFreq + d.phase) * d.swayAmp;
+          return (
+            <div
+              key={i}
+              style={{
+                position: 'absolute',
+                left: x,
+                top: y,
+                width: d.size,
+                height: d.size,
+                borderRadius: '50%',
+                background: paint('oklch(75% 0.08 85)'),
+                opacity: d.opacity,
+              }}
+            />
+          );
+        })}
+      </AbsoluteFill>
+
+      {/* opening light sweep: one wide, faint warm band left → right (2–14) */}
+      {sweepOpacity > 0 ? (
+        <AbsoluteFill style={{ pointerEvents: 'none', mixBlendMode: 'overlay' }}>
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              bottom: 0,
+              left: sweepX - 300,
+              width: 600,
+              background: paint('linear-gradient(90deg, rgba(255,244,224,0), rgba(255,244,224,1) 50%, rgba(255,244,224,0))'),
+              opacity: paperStyle ? sweepOpacity : 0,
+            }}
+          />
+        </AbsoluteFill>
+      ) : null}
+
+      {/* stage light behind the wordmark: warm top-light pooling where the logo lands */}
+      {stageLight > 0 ? (
+        <AbsoluteFill
+          style={{
+            pointerEvents: 'none',
+            background: paint('radial-gradient(700px 360px at 960px 470px, rgba(255,246,228,0.95), rgba(255,246,228,0.35) 55%, rgba(255,246,228,0) 75%)'),
+            opacity: paperStyle ? stageLight : 0,
+          }}
+        />
+      ) : null}
+
+      {/* closing vignette: faint warm-brown corners focus the center */}
+      {vignette > 0 ? (
+        <AbsoluteFill
+          style={{
+            pointerEvents: 'none',
+            background: paint('radial-gradient(1400px 900px at 50% 50%, rgba(62,48,32,0) 55%, rgba(62,48,32,0.7) 100%)'),
+            opacity: vignette,
+          }}
+        />
+      ) : null}
+
+      <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', pointerEvents: 'none' }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ fontFamily: SERIF, fontSize: wordmarkSize, fontWeight: 600, color: ink, letterSpacing: `${wordSpacing}em`, display: 'flex' }}>
+            {LETTERS.map((ch, i) => {
+              const delay = Math.round(42 + i * (paperStyle ? 1.8 : 1.3));
+              const t = interpolate(frame, [delay, delay + 8], [0, 1], {
+                extrapolateLeft: 'clamp',
+                extrapolateRight: 'clamp',
+                easing: Easing.bezier(0.2, 0.75, 0.3, 1),
+              });
+              return (
+                <span
+                  key={i}
+                  style={{
+                    opacity: t,
+                    transform: `translateY(${(1 - t) * 28}px) scale(${1.35 - 0.35 * t})`,
+                    filter: `blur(${(1 - t) * 8}px)`,
+                    display: 'inline-block',
+                    whiteSpace: 'pre',
+                  }}
+                >
+                  {ch}
+                </span>
+              );
+            })}
+          </div>
+          <div style={{ position: 'relative', height: 6, width: 260, margin: '34px auto 0' }}>
+            <div style={{ position: 'absolute', inset: 0, borderRadius: 3, background: amber, transform: `scaleX(${rule})` }} />
+            {/* launch lower-third: 1px amber lines shooting out from the rule ends, then fading */}
+            {ruleExt > 0 && ruleExtFade > 0 ? (
+              <>
+                <div style={{ position: 'absolute', top: 2.5, height: 1, right: '100%', width: 190 * ruleExt, background: amber, opacity: ruleExtFade }} />
+                <div style={{ position: 'absolute', top: 2.5, height: 1, left: '100%', width: 190 * ruleExt, background: amber, opacity: ruleExtFade }} />
+              </>
+            ) : null}
+          </div>
+          <div style={{ fontFamily: MONO, fontSize: taglineSize, letterSpacing: '0.14em', color: muted, marginTop: 30, opacity: tag, textTransform: 'uppercase' }}>
+            {tagline}
+          </div>
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/template/src/aifl/live/ScenePapers.tsx

@@ -0,0 +1,200 @@
+import { useVisualTheme, themePaint, themeAsset, sceneDefaults } from '../../themes/visual-theme';
+import { AbsoluteFill, Img, interpolate, useCurrentFrame, Easing } from 'remotion';
+import { PageCam, CamKey } from './PageCam';
+import { AIFL_SHOTS } from '../Main';
+import layout from '../live-layout.json';
+import { DigitRoll } from '../DigitRoll';
+
+const cards = layout.papers.cards;
+const PAGE_H = layout.papers.pageH;
+
+
+/** Context-level defaults (screen-space counter copy / palette), editable per clip in the workbench. */
+export const SCENE_PAPERS_DEFAULTS = {
+  title: 'Paper Radar',
+  subtitle: 'Of 31 Fetched Today',
+  counterSize: 96,
+  amber: '#955905',  // oklch(52% 0.115 65)
+  muted: '#65635f',  // oklch(50% 0.006 82)
+};
+type ScenePapersProps = Partial<typeof SCENE_PAPERS_DEFAULTS>;
+
+// paperN.png files, one per card
+const FILES = ['paper1.png', 'paper2.png', 'paper3.png', 'paper4.png', 'paper5.png'];
+
+// each card enters at cue, staggered 12 frames, over dur=22 with overshoot ease
+const CUES = [18, 30, 42, 54, 66];
+const DUR = 22;
+const FLY_EASE = Easing.bezier(0.45, 0.05, 0.25, 1.12);
+// alternating slight tilt on entry
+const TILTS = [2, -2, 2, -2, 2];
+
+// camera reveals the header first, then follows the growing stack downward
+const CAM_KEYS: CamKey[] = [
+  { frame: 0, cx: 960, cy: 270, zoom: 1.35 },
+  { frame: 30, cx: 960, cy: 330, zoom: 1.15 },
+  { frame: 36, cx: 960, cy: 520, zoom: 1.02 },
+  { frame: 74, cx: 960, cy: 820, zoom: 0.95 },
+  { frame: 100, cx: 960, cy: 860, zoom: 0.9 }, // settle ≤105
+];
+
+/** Paper radar: daily paper cards stack up into place one by one (the list-stack
+ * motif), each landing pressing the settled stack down and bouncing back, with
+ * an amber highlight sweeping the linked-project name and a screen-space counter. */
+export const ScenePapers: React.FC<ScenePapersProps> = (props) => {
+  const theme = useVisualTheme();
+  const paperStyle = theme.id === 'ink-press';
+  const paint = (css: string) => themePaint(theme, css);
+  const asset = (src: string) => themeAsset(theme, src);
+  const MONO = (paperStyle ? 'ui-monospace, SFMono-Regular, Menlo, monospace' : theme.font);
+  const { title, subtitle, counterSize, amber: AMBER, muted } = { ...sceneDefaults(theme, 'chart', SCENE_PAPERS_DEFAULTS), ...props };
+  const frame = useCurrentFrame();
+
+  // how many cards have already landed (t reached 1) — drives the counter
+  const landedCount = CUES.filter((c) => frame >= c + DUR).length;
+
+  // when a *later* card enters, the already-settled stack gets pressed down 6px
+  // then springs back over ~8 frames. Compute cumulative press for settled cards.
+  const stackPress = (settledIndex: number) => {
+    let press = 0;
+    for (let j = settledIndex + 1; j < CUES.length; j++) {
+      const cue = CUES[j];
+      // press pulse centered a touch after the later card starts arriving
+      const p = interpolate(
+        frame,
+        [cue, cue + 4, cue + 8],
+        [0, 6, 0],
+        { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' },
+      );
+      press = Math.max(press, p);
+    }
+    return press;
+  };
+
+  // page-space glaze sweep once everything has landed (~frame 96)
+  const glazeX = interpolate(frame, [82, 96], [-700, 2600], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.45, 0, 0.35, 1),
+  });
+  const glazeVis = interpolate(frame, [81, 86, 92, 95], [0, 1, 1, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  return (
+    <>
+      <PageCam src="textures/live/papers-full.png" pageH={PAGE_H} keys={CAM_KEYS} ease={Easing.bezier(0.33, 0, 0.15, 1)}>
+        {/* cover the printed cards on the base page so blank slots stack in.
+            The base texture already shows the cards; we lay opaque paper
+            patches over their positions so the fly-in reads as "stacking". */}
+        {cards.map((c, i) => (
+          <div
+            key={`slot-${i}`}
+            style={{
+              position: 'absolute',
+              left: c.x - 12,
+              top: c.y - 10,
+              width: c.w + 24,
+              height: c.h + 20,
+              background: paint('#faf7f2'),
+              opacity: frame >= CUES[i] + DUR - 2 ? 0 : 1,
+            }}
+          />
+        ))}
+
+        {cards.map((c, i) => {
+          const cue = CUES[i];
+          const t = interpolate(frame, [cue, cue + DUR], [0, 1], {
+            extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: FLY_EASE,
+          });
+          if (t <= 0) return null;
+          const settled = t >= 0.999;
+          const dy = 600 * (1 - t) + (settled ? stackPress(i) : 0);
+          const rot = TILTS[i] * (1 - t);
+          const scale = 1.06 - 0.06 * t;
+          const shadow = settled
+            ? paint('0 2px 8px rgba(60,45,30,.10)')
+            : paint(`0 32px 64px rgba(60,45,30,${0.22 * (1 - t) + 0.06})`);
+
+          // amber highlight over the linked-project name, 6 frames after landing.
+          // card-relative: x ~20px in, y ~72% of card height, ~40% wide.
+          // fires right on landing; the last card only has ~12f before the cut,
+          // so grow+fade is compressed to fit (7f grow + 5f fade).
+          const hlStart = cue + DUR;
+          const hlGrow = interpolate(frame, [hlStart, hlStart + 7], [0, 1], {
+            extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.3, 0, 0.2, 1),
+          });
+          const hlFade = interpolate(frame, [hlStart + 7, hlStart + 12], [1, 0], {
+            extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+          });
+
+          return (
+            <div
+              key={FILES[i]}
+              style={{
+                position: 'absolute',
+                left: c.x,
+                top: c.y,
+                width: c.w,
+                height: c.h,
+                transform: `translateY(${dy}px) rotate(${rot}deg) scale(${scale})`,
+                transformOrigin: 'center center',
+                boxShadow: shadow,
+                borderRadius: 12,
+              }}
+            >
+              <Img
+                src={asset(`textures/live/${FILES[i]}`)}
+                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}
+              />
+              {/* amber highlight sweep on the linked-project name */}
+              {hlGrow > 0 && hlFade > 0 ? (
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: 20,
+                    top: c.h * 0.72,
+                    width: `${hlGrow * 40}%`,
+                    height: 30,
+                    background: paint('oklch(97% 0.028 85)'),
+                    opacity: 0.6 * hlFade,
+                    borderRight: `2px solid ${AMBER}`,
+                    pointerEvents: 'none',
+                  }}
+                />
+              ) : null}
+            </div>
+          );
+        })}
+
+        {/* page-space glaze sweep at the end */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 40,
+            height: PAGE_H - 80,
+            left: glazeX,
+            width: 420,
+            transform: 'rotate(14deg)',
+            opacity: paperStyle ? glazeVis * 0.5 : 0,
+            mixBlendMode: 'overlay',
+            background:
+              paint('linear-gradient(90deg, transparent, rgba(255,240,214,0.9) 45%, rgba(255,240,214,0.9) 55%, transparent)'),
+            pointerEvents: 'none',
+          }}
+        />
+      </PageCam>
+
+      {/* screen-space counter, top-right */}
+      <div style={{ position: 'absolute', top: 70, right: 96, textAlign: 'right', pointerEvents: 'none', ...(!paperStyle ? {width: 310} : {}) }}>
+        <div style={{ fontFamily: MONO, fontSize: paperStyle ? 24 : 44, letterSpacing: '0.16em', color: muted, textTransform: 'uppercase' }}>
+          {title}
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 6 }}>
+          <DigitRoll key={landedCount} value={String(landedCount)} fontSize={counterSize} color={AMBER} />
+        </div>
+        <div style={{ fontFamily: MONO, fontSize: paperStyle ? 20 : 44, letterSpacing: '0.12em', color: muted, marginTop: 4, textTransform: 'uppercase' }}>
+          {subtitle}
+        </div>
+      </div>
+    </>
+  );
+};