hyper-animator-codex 0.7.0 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/template/src/aifl/Main.tsx

@@ -0,0 +1,163 @@
+import { AbsoluteFill, Audio, Sequence, staticFile } from 'remotion';
+import { SceneOpen } from './live/SceneOpen';
+import { SceneFlyIn } from './live/SceneFlyIn';
+import { SceneDetail } from './live/SceneDetail';
+import { ScenePapers } from './live/ScenePapers';
+import { SceneWbr } from './live/SceneWbr';
+import { PaperTitleCard } from './PaperTitleCard';
+import { SceneOutroLive } from './live/SceneOutroLive';
+import { FlashCut } from './FlashCut';
+import { Caption } from './Caption';
+
+// ~36.2s @ 30fps — paper-and-ink morning reading room (10 shots). Both wordmark
+// moments (brand open, outro sign-off) hold a full second once fully on.
+export const AIFL_SHOTS = {
+  morning: { from: 0, duration: 220 },  // 0–7.3s  brand ~46f + 30f hold + 138f macro
+  card1: { from: 220, duration: 55 },   // 7.3–9.2s "All your team's research, one place to go."
+  table: { from: 275, duration: 190 },  // 9.2–15.5s pile close-up → deal → scroll → search → filter → click
+  macro: { from: 465, duration: 100 },  // 15.5–18.8s macro card detail, rows reveal
+  card2: { from: 565, duration: 55 },   // 18.8–20.7s "Paper Radar, tailored for your morning reading."
+  chart: { from: 620, duration: 105 },  // 20.7–24.2s papers stack radar
+  cardWbr: { from: 725, duration: 50 }, // 24.2–25.8s "Every project, linked to your weekly report."
+  wbr: { from: 775, duration: 110 },    // 25.8–29.5s weekly report / collaborative write
+  card3: { from: 885, duration: 55 },   // 29.5–31.3s "The whole team, on the same page."
+  outro: { from: 940, duration: 145 },  // 31.3–36.2s defocus + letterpress sign-off (+1s hold)
+} as const; // sum = 1085
+
+export const AIFL_TOTAL = 1085;
+
+// bottom-strip narration over the live shots (absolute frames; outro stays clean)
+const CAPTIONS = [
+  { from: 90, duration: 40, text: 'TEN LIVE PROJECTS · FOUR RESEARCHERS' },
+  // (the hero-card hover annotation lives inside SceneOpen as a 3D floating note)
+  { from: 318, duration: 44, text: 'NEW WORK LANDS ALL WEEK' },
+  { from: 395, duration: 55, text: 'SEARCH · FILTER · OPEN' },
+  { from: 477, duration: 68, text: 'EVERY QUESTION, TRACKED TO ITS EXPERIMENTS' },
+  { from: 633, duration: 72, text: 'THE DAILY PAPER RADAR' },
+  { from: 789, duration: 78, text: 'FOUR VOICES, ONE WEEKLY BRIEF' },
+] as const;
+
+// sound design pinned to animation beats (absolute frames, Mixkit license).
+// Classic product-promo vocabulary: whooshes on camera moves, cinematic
+// impacts on landings, a riser into the finale, sparkle on the reveal.
+const SFX: { from: number; src: string; volume: number }[] = [
+  // brand open: soft transition as the lockup lands, whoosh into the console
+  { from: 12, src: 'transition-soft.mp3', volume: 0.4 },
+  { from: 78, src: 'whoosh-fast.mp3', volume: 0.45 }, // brand → dashboard
+  // hero card: whoosh up on the pop, sparkle on the beam scan, impact reseat
+  { from: 127, src: 'whoosh-big.mp3', volume: 0.5 },
+  { from: 141, src: 'sparkle.mp3', volume: 0.35 },
+  { from: 204, src: 'transition-snap.mp3', volume: 0.5 },
+  // title cards ride a quick swoosh
+  { from: 220, src: 'swoosh-quick.mp3', volume: 0.4 },
+  // deck shot: soft transition into the pile close-up, whoosh as the orbit
+  // pulls back and dealing starts, fast whooshes as the deal accelerates,
+  // then the scroll rest → big whoosh back up to the search bar
+  { from: 277, src: 'transition-soft.mp3', volume: 0.4 }, // pile close-up
+  { from: 308, src: 'whoosh-big.mp3', volume: 0.5 }, // pull-back + first deals
+  { from: 340, src: 'whoosh-fast.mp3', volume: 0.4 }, // dealing accelerates
+  { from: 356, src: 'whoosh-fast.mp3', volume: 0.32 }, // full flurry
+  { from: 388, src: 'whoosh-big.mp3', volume: 0.5 }, // swoosh back to header
+  // typing (slower now, 3f/char) + a breath + filter + click
+  { from: 401, src: 'keyboard.mp3', volume: 0.4 }, // trimmed by sequence length
+  { from: 435, src: 'whoosh-fast.mp3', volume: 0.4 }, // grid filters away
+  { from: 451, src: 'click-camera.mp3', volume: 0.6 }, // click on the result card
+  { from: 455, src: 'swoosh-quick.mp3', volume: 0.35 }, // push-in
+  // detail rows embed with one cinematic transition sweep
+  { from: 475, src: 'transition-soft.mp3', volume: 0.45 },
+  { from: 565, src: 'swoosh-quick.mp3', volume: 0.4 }, // title card 2
+  // papers stack: soft transition, camera-click as the counter settles
+  { from: 623, src: 'transition-soft.mp3', volume: 0.45 },
+  { from: 648, src: 'click-camera.mp3', volume: 0.45 },
+  { from: 725, src: 'swoosh-quick.mp3', volume: 0.4 }, // wbr title card
+  // wbr: the page "writes itself" over live keyboard typing, then past weeks
+  // pop into the left rail one by one (a pop per landing)
+  { from: 779, src: 'transition-soft.mp3', volume: 0.4 },
+  { from: 781, src: 'keyboard.mp3', volume: 0.34 }, // trimmed to the writing reveals
+  { from: 840, src: 'pop.mp3', volume: 0.4 },
+  { from: 845, src: 'pop.mp3', volume: 0.37 },
+  { from: 850, src: 'pop.mp3', volume: 0.34 },
+  { from: 855, src: 'pop.mp3', volume: 0.31 },
+  { from: 860, src: 'pop.mp3', volume: 0.28 },
+  { from: 865, src: 'pop.mp3', volume: 0.25 },
+  { from: 885, src: 'swoosh-quick.mp3', volume: 0.4 }, // title card 3
+  // outro: riser under the assembly, big impact when the wordmark stamps
+  { from: 945, src: 'riser-cine.mp3', volume: 0.5 },
+  { from: 980, src: 'impact-cine.mp3', volume: 0.55 },
+  { from: 1005, src: 'sparkle.mp3', volume: 0.3 }, // rule + tagline glint
+];
+
+export const AiflMain: React.FC = () => {
+  return (
+    <AbsoluteFill style={{ backgroundColor: '#f2eee6' }}>
+      {/* beat-pinned promo sound effects (no music bed — SFX only) */}
+      {SFX.map((s, i) => (
+        <Sequence
+          key={`sfx-${i}`}
+          from={s.from}
+          // keyboard: 24f for the short search-box typing, 44f under the wbr
+          // writing reveals; everything else plays out (≤3s assets)
+          durationInFrames={s.src === 'keyboard.mp3' ? (s.from > 700 ? 44 : 24) : 90}
+        >
+          <Audio src={staticFile(`audio/${s.src}`)} volume={s.volume} />
+        </Sequence>
+      ))}
+      <Sequence from={AIFL_SHOTS.morning.from} durationInFrames={AIFL_SHOTS.morning.duration}>
+        <SceneOpen />
+      </Sequence>
+      <Sequence from={AIFL_SHOTS.card1.from} durationInFrames={AIFL_SHOTS.card1.duration}>
+        <PaperTitleCard
+          duration={AIFL_SHOTS.card1.duration}
+          words={[{ text: 'All' }, { text: 'your' }, { text: 'team’s' }, { text: 'research,' }, { text: 'one', accent: true }, { text: 'place' }, { text: 'to' }, { text: 'go.' }]}
+        />
+      </Sequence>
+      <Sequence from={AIFL_SHOTS.table.from} durationInFrames={AIFL_SHOTS.table.duration}>
+        <SceneFlyIn />
+      </Sequence>
+      <Sequence from={AIFL_SHOTS.macro.from} durationInFrames={AIFL_SHOTS.macro.duration}>
+        <SceneDetail />
+      </Sequence>
+      <Sequence from={AIFL_SHOTS.card2.from} durationInFrames={AIFL_SHOTS.card2.duration}>
+        <PaperTitleCard
+          duration={AIFL_SHOTS.card2.duration}
+          words={[{ text: 'Paper' }, { text: 'Radar,', accent: true }, { text: 'tailored' }, { text: 'for' }, { text: 'your' }, { text: 'morning' }, { text: 'reading.' }]}
+          sub="of 31 fetched today"
+          subDigits="5"
+        />
+      </Sequence>
+      <Sequence from={AIFL_SHOTS.chart.from} durationInFrames={AIFL_SHOTS.chart.duration}>
+        <ScenePapers />
+      </Sequence>
+      <Sequence from={AIFL_SHOTS.cardWbr.from} durationInFrames={AIFL_SHOTS.cardWbr.duration}>
+        <PaperTitleCard
+          duration={AIFL_SHOTS.cardWbr.duration}
+          words={[{ text: 'Every' }, { text: 'project,' }, { text: 'linked', accent: true }, { text: 'to' }, { text: 'your' }, { text: 'weekly' }, { text: 'report.' }]}
+        />
+      </Sequence>
+      <Sequence from={AIFL_SHOTS.wbr.from} durationInFrames={AIFL_SHOTS.wbr.duration}>
+        <SceneWbr />
+      </Sequence>
+      <Sequence from={AIFL_SHOTS.card3.from} durationInFrames={AIFL_SHOTS.card3.duration}>
+        <PaperTitleCard
+          duration={AIFL_SHOTS.card3.duration}
+          words={[{ text: 'The' }, { text: 'whole' }, { text: 'team,' }, { text: 'on' }, { text: 'the' }, { text: 'same', accent: true }, { text: 'page.' }]}
+        />
+      </Sequence>
+      <Sequence from={AIFL_SHOTS.outro.from} durationInFrames={AIFL_SHOTS.outro.duration}>
+        <SceneOutroLive />
+      </Sequence>
+      {/* narration captions over the live shots (under the flash cuts) */}
+      {CAPTIONS.map((c) => (
+        <Sequence key={c.from} from={c.from} durationInFrames={c.duration}>
+          <Caption text={c.text} duration={c.duration} />
+        </Sequence>
+      ))}
+      {/* warm flash cuts straddling scene changes */}
+      {[AIFL_SHOTS.table.from, AIFL_SHOTS.macro.from, AIFL_SHOTS.chart.from, AIFL_SHOTS.wbr.from].map((cut) => (
+        <Sequence key={cut} from={cut - 5} durationInFrames={10}>
+          <FlashCut duration={10} />
+        </Sequence>
+      ))}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/template/src/aifl/PaperTitleCard.tsx

@@ -0,0 +1,89 @@
+import { AbsoluteFill, interpolate, useCurrentFrame, Easing } from 'remotion';
+import { DigitRoll } from './DigitRoll';
+
+const SERIF = 'ui-serif, Georgia, "Times New Roman", serif';
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace';
+
+/**
+ * Paper title card: warm paper field, serif statement letterpressed word by
+ * word, amber italic accent word, amber underline growing beneath.
+ */
+export const PaperTitleCard: React.FC<{
+  duration: number;
+  words: { text: string; accent?: boolean }[];
+  sub?: string;
+  subDigits?: string;
+}> = ({ duration, words, sub, subDigits }) => {
+  const frame = useCurrentFrame();
+  const fadeOut = interpolate(frame, [duration - 8, duration], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const underline = interpolate(frame, [16, 34], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.3, 0, 0.2, 1),
+  });
+  const subT = interpolate(frame, [10, 22], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: 'oklch(97.5% 0.008 82)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        opacity: fadeOut,
+        backgroundImage: 'radial-gradient(1100px 750px at 50% 42%, oklch(99.3% 0.014 88 / 0.85), transparent 65%)',
+      }}
+    >
+      <div style={{ textAlign: 'center', maxWidth: 1500 }}>
+        <div
+          style={{
+            fontFamily: SERIF, fontSize: 116, fontWeight: 600, lineHeight: 1.14,
+            color: 'oklch(18% 0.006 82)', letterSpacing: '-0.012em',
+            display: 'flex', flexWrap: 'wrap', justifyContent: 'center', columnGap: '0.26em',
+          }}
+        >
+          {words.map((w, i) => {
+            const delay = 4 + i * 4;
+            const t = interpolate(frame, [delay, delay + 9], [0, 1], {
+              extrapolateLeft: 'clamp',
+              extrapolateRight: 'clamp',
+              easing: Easing.bezier(0.2, 0.75, 0.3, 1),
+            });
+            return (
+              <span
+                key={i}
+                style={{
+                  opacity: t,
+                  transform: `scale(${1.28 - 0.28 * t})`,
+                  filter: `blur(${(1 - t) * 7}px)`,
+                  display: 'inline-block',
+                  fontStyle: w.accent ? 'italic' : 'normal',
+                  color: w.accent ? 'oklch(52% 0.115 65)' : undefined,
+                }}
+              >
+                {w.text}
+              </span>
+            );
+          })}
+        </div>
+        <div
+          style={{
+            height: 6, width: 220, margin: '38px auto 0', borderRadius: 3,
+            background: 'oklch(52% 0.115 65)', transform: `scaleX(${underline})`,
+          }}
+        />
+        {sub ? (
+          <div style={{ fontFamily: MONO, fontSize: 26, letterSpacing: '0.12em', color: 'oklch(50% 0.006 82)', marginTop: 34, opacity: subT, textTransform: 'uppercase', display: 'flex', justifyContent: 'center', alignItems: 'baseline', gap: '0.5em' }}>
+            {subDigits ? <DigitRoll value={subDigits} delay={12} fontSize={26} /> : null}
+            <span>{sub}</span>
+          </div>
+        ) : null}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/template/src/aifl/live/PageCam.tsx

@@ -0,0 +1,145 @@
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+
+export type CamKey = {
+  frame: number;
+  cx: number;
+  cy: number;
+  zoom: number;
+  rotX?: number; // deg, tilt about the horizontal axis (positive = top leans away, like looking at a table)
+  rotY?: number; // deg, tilt about the vertical axis (positive = right edge recedes, i.e. seen from the LEFT)
+  rotZ?: number; // deg, in-plane roll
+  persp?: number; // px, perspective strength (default 1400; smaller = stronger)
+};
+
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+/**
+ * 2.5D camera over a full-page screenshot. (cx, cy) is the page-space CSS
+ * point centered in the 1920x1080 viewport; zoom is scale (1 = 1 CSS px
+ * -> 1 output px). Page textures are 2x, rendered at CSS size via width.
+ *
+ * Optional 3D: keys may carry rotX/rotZ/persp to tilt the page like a plane
+ * seen from an oblique camera. When NO key declares any 3D field, the markup
+ * degrades to the original flat pan/zoom and renders pixel-identical.
+ *
+ * Optional DOF: a screen-space gradient-blur band approximating a focal plane
+ * near `focusY` (blurring the far/top part of a tilted page).
+ */
+export const PageCam: React.FC<{
+  src: string; // staticFile path under textures/live/
+  pageH: number; // CSS page height
+  keys: CamKey[];
+  children?: React.ReactNode; // page-space overlays (positioned in CSS px)
+  blur?: number;
+  saturate?: number;
+  ease?: (t: number) => number;
+  dof?: { focusY: number; strength: number };
+}> = ({ src, pageH, keys, children, blur = 0, saturate = 1, ease = Easing.bezier(0.33, 0, 0.15, 1), dof }) => {
+  const frame = useCurrentFrame();
+  // find segment
+  let a = keys[0], b = keys[keys.length - 1];
+  for (let i = 0; i < keys.length - 1; i++) {
+    if (frame >= keys[i].frame && frame <= keys[i + 1].frame) { a = keys[i]; b = keys[i + 1]; break; }
+  }
+  const t = a.frame === b.frame ? 1 : interpolate(frame, [a.frame, b.frame], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: ease,
+  });
+  const cx = lerp(a.cx, b.cx, t);
+  const cy = lerp(a.cy, b.cy, t);
+  const zoom = lerp(a.zoom, b.zoom, t);
+
+  const filters: string[] = [];
+  if (blur > 0) filters.push(`blur(${blur}px)`);
+  if (saturate !== 1) filters.push(`saturate(${saturate})`);
+
+  // Does any key request 3D? If not, keep the original flat markup exactly.
+  const has3D = keys.some((k) => k.rotX !== undefined || k.rotY !== undefined || k.rotZ !== undefined || k.persp !== undefined);
+
+  if (!has3D) {
+    return (
+      <AbsoluteFill style={{ overflow: 'hidden', backgroundColor: '#faf7f2' }}>
+        <div
+          style={{
+            position: 'absolute', width: 1920, height: pageH,
+            transform: `translate(${960 - cx * zoom}px, ${540 - cy * zoom}px) scale(${zoom})`,
+            transformOrigin: '0 0',
+            filter: filters.length ? filters.join(' ') : undefined,
+          }}
+        >
+          <Img src={staticFile(src)} style={{ position: 'absolute', width: 1920, height: pageH }} />
+          {children}
+        </div>
+      </AbsoluteFill>
+    );
+  }
+
+  // 3D mode: pivot rotation/scale about the focal page-point (cx, cy) so it
+  // stays centered in the viewport. With rotX=rotZ=0 this reduces to the flat
+  // transform (proven identical: (960,540) + zoom*(p - (cx,cy))).
+  const rotX = lerp(a.rotX ?? 0, b.rotX ?? 0, t);
+  const rotY = lerp(a.rotY ?? 0, b.rotY ?? 0, t);
+  const rotZ = lerp(a.rotZ ?? 0, b.rotZ ?? 0, t);
+  const persp = lerp(a.persp ?? 1400, b.persp ?? 1400, t);
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden', backgroundColor: '#faf7f2' }}>
+      <div
+        style={{
+          position: 'absolute', inset: 0,
+          perspective: `${persp * zoom}px`,
+          perspectiveOrigin: '960px 540px',
+        }}
+      >
+        {/* LAYOUT-SCALE zoom: instead of scale(zoom) in the transform chain (which
+            makes Chromium rasterize the 3D-composited layer at 1920-wide LAYOUT
+            size and then GPU-upscale by zoom — everything inside gets downsampled
+            before magnification, hence blurry text), we apply the magnification as
+            the CSS `zoom` property. `zoom` enlarges the layout box itself, so the
+            page + card textures rasterize at the ENLARGED device size and sample
+            down from their hi-res sources → sharp glyph edges under perspective.
+
+            Coordinate math: `zoom` scales this element's local coordinate space by
+            `zoom`, so a page point (cx,cy) renders at (cx*zoom, cy*zoom) device px
+            from the box origin, and a `translate(Tx px)` renders as Tx*zoom device
+            px. To land the focal point (cx,cy) at viewport centre (960,540):
+              cx*zoom + Tx*zoom = 960  ⟹  Tx = 960/zoom - cx  (likewise Ty).
+            Rotations pivot about transform-origin (cx,cy) = the focal point, so
+            they leave its screen position unchanged. With rot=0 this reduces to
+            translate(960/zoom - cx, 540/zoom - cy) under zoom — identical framing
+            to the old scale-based transform, just rasterized at layout scale. */}
+        <div
+          style={{
+            position: 'absolute', width: 1920, height: pageH,
+            zoom,
+            transform: `translate(${960 / zoom - cx}px, ${540 / zoom - cy}px) rotateY(${rotY}deg) rotateX(${rotX}deg) rotateZ(${rotZ}deg)`,
+            transformOrigin: `${cx}px ${cy}px`,
+            transformStyle: 'preserve-3d',
+            filter: filters.length ? filters.join(' ') : undefined,
+          }}
+        >
+          <Img src={staticFile(src)} style={{ position: 'absolute', width: 1920, height: pageH }} />
+          {children}
+        </div>
+      </div>
+
+      {/* Depth-of-field approximation: a top-band gradient blur (far part of a
+          tilted page reads soft). Screen-space, over the page. */}
+      {dof ? (
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            height: Math.max(0, dof.focusY),
+            backdropFilter: `blur(${dof.strength}px)`,
+            WebkitBackdropFilter: `blur(${dof.strength}px)`,
+            maskImage: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%)',
+            WebkitMaskImage: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%)',
+            pointerEvents: 'none',
+          }}
+        />
+      ) : null}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/template/src/aifl/live/SceneDetail.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+import { PageCam, CamKey } from './PageCam';
+import layout from '../live-layout.json';
+
+const DETAIL_H = layout.detail.pageH;
+const rows = layout.detail.rows;
+
+// the fly-in shot ends on the click into the nano-lab card; this shot opens
+// directly on its detail page (the FlashCut transition covers the cut).
+const DETAIL_CAM: CamKey[] = [
+  { frame: 0, cx: 960, cy: 300, zoom: 1.1 },
+  { frame: 75, cx: 960, cy: 760, zoom: 1.0 }, // 75 ≤ duration 100
+];
+
+const FLY_EASE = Easing.bezier(0.3, 0, 0.25, 1);
+const detailSrc = staticFile('textures/live/detail-full.png');
+
+/** Open on the nano-lab detail page, then pan down while the
+ * research-question rows fly in from the air and embed into their slots. */
+export const SceneDetail: React.FC = () => {
+  const frame = useCurrentFrame();
+  const df = frame;
+
+  return (
+    <PageCam src="textures/live/detail-full.png" pageH={DETAIL_H} keys={DETAIL_CAM} ease={Easing.bezier(0.33, 0, 0.15, 1)}>
+      {/* research-question rows fly in from the air and embed into their slots.
+          Cue table 12+i*9: last row lands 12+36+12=60, amber seam done 68 ≤ 70. */}
+      {rows.map((r, i) => {
+        const cue = 12 + i * 9;
+        const land = cue + 12;
+
+        // empty-slot paper patch (under the flying row), gone 2f after landing
+        const patchOpacity = interpolate(df, [land, land + 2], [1, 0], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+        });
+        const patch =
+          patchOpacity > 0 ? (
+            <div
+              key={`patch-${i}`}
+              style={{
+                position: 'absolute',
+                left: r.x - 8,
+                top: r.y - 4,
+                width: r.w + 24,
+                height: r.h + 8,
+                background: '#fdfcfa',
+                opacity: patchOpacity,
+                zIndex: 1,
+                pointerEvents: 'none',
+              }}
+            />
+          ) : null;
+
+        // flying row: texture-crop of the row, dropping in from the air.
+        // Removed once fully embedded (press bounce done) — texture shows through.
+        let flyer: React.ReactNode = null;
+        if (df >= cue && df < cue + 16) {
+          const p = interpolate(df, [cue, cue + 12], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+            easing: FLY_EASE,
+          });
+          const appear = interpolate(df, [cue, cue + 3], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          });
+          // 1.06 -> 0.995 during flight, then press-bounce back to 1
+          const scale =
+            df < land
+              ? 1.06 - 0.065 * p
+              : interpolate(df, [land, land + 4], [0.995, 1], {
+                  extrapolateLeft: 'clamp',
+                  extrapolateRight: 'clamp',
+                  easing: Easing.out(Easing.quad),
+                });
+          const air = 1 - p; // shadow / tilt fade with flight progress
+          flyer = (
+            <div
+              key={`row-${i}`}
+              style={{
+                position: 'absolute',
+                left: r.x,
+                top: r.y,
+                width: r.w,
+                height: r.h,
+                borderRadius: 8,
+                backgroundColor: '#fff',
+                backgroundImage: `url(${detailSrc})`,
+                backgroundSize: `1920px ${DETAIL_H}px`,
+                backgroundPosition: `-${r.x}px -${r.y}px`,
+                opacity: appear,
+                transform: `perspective(900px) translateY(${-120 * air}px) rotateX(${16 * air}deg) scale(${scale})`,
+                boxShadow: `0 ${30 * air}px ${60 * air}px rgba(30,25,18,${0.22 * air}), 0 ${8 * air}px ${16 * air}px rgba(30,25,18,${0.12 * air})`,
+                zIndex: 3,
+                pointerEvents: 'none',
+              }}
+            />
+          );
+        }
+
+        // embed flash: 2px amber seam at the row's bottom edge, expanding from
+        // the center on touchdown, then fading out
+        let seam: React.ReactNode = null;
+        if (df >= land && df < land + 8) {
+          const spread = interpolate(df, [land, land + 5], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+            easing: Easing.out(Easing.cubic),
+          });
+          const seamOpacity = interpolate(df, [land, land + 2, land + 8], [1, 1, 0], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          });
+          const seamW = r.w * spread;
+          seam = (
+            <div
+              key={`seam-${i}`}
+              style={{
+                position: 'absolute',
+                left: r.x + (r.w - seamW) / 2,
+                top: r.y + r.h - 2,
+                width: seamW,
+                height: 2,
+                background: 'oklch(58% 0.13 65)',
+                boxShadow: '0 0 6px rgba(180,120,50,0.35)',
+                opacity: seamOpacity,
+                zIndex: 4,
+                pointerEvents: 'none',
+              }}
+            />
+          );
+        }
+
+        return (
+          <React.Fragment key={i}>
+            {patch}
+            {flyer}
+            {seam}
+          </React.Fragment>
+        );
+      })}
+    </PageCam>
+  );
+};