dsh-drawai 0.4.1 → 0.4.3

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

@@ -1,150 +1,150 @@
-import { useVisualTheme, themePaint, themeAsset } from '../../themes/visual-theme';
-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 theme = useVisualTheme();
-  const paint = (css: string) => themePaint(theme, css);
-  const asset = (src: string) => themeAsset(theme, src);
-
-  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: paint('#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={asset(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: paint('#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={asset(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: paint('linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%)'),
-            WebkitMaskImage: paint('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>
-  );
-};
+import { useVisualTheme, themePaint, themeAsset } from '../../themes/visual-theme';
+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 theme = useVisualTheme();
+  const paint = (css: string) => themePaint(theme, css);
+  const asset = (src: string) => themeAsset(theme, src);
+
+  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: paint('#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={asset(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: paint('#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={asset(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: paint('linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%)'),
+            WebkitMaskImage: paint('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/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneDetail.tsx

@@ -1,158 +1,158 @@
-import { useVisualTheme, themePaint, themeAsset, sceneDefaults } from '../../themes/visual-theme';
-import React from 'react';
-import { interpolate, 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);
-
-/** Context-level defaults, editable per clip in the workbench. */
-export const SCENE_DETAIL_DEFAULTS = {
-  accent: '#ae6700', // oklch(58% 0.13 65) — embed seam colour
-};
-type SceneDetailProps = Partial<typeof SCENE_DETAIL_DEFAULTS>;
-
-/** 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<SceneDetailProps> = (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 detailSrc = asset('textures/live/detail-full.png');
-  const { accent } = { ...sceneDefaults(theme, 'macro', SCENE_DETAIL_DEFAULTS), ...props };
-  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: paperStyle ? '#fdfcfa' : theme.surface,
-                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: paint('#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: paint(`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: accent,
-                boxShadow: paint('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>
-  );
-};
+import { useVisualTheme, themePaint, themeAsset, sceneDefaults } from '../../themes/visual-theme';
+import React from 'react';
+import { interpolate, 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);
+
+/** Context-level defaults, editable per clip in the workbench. */
+export const SCENE_DETAIL_DEFAULTS = {
+  accent: '#ae6700', // oklch(58% 0.13 65) — embed seam colour
+};
+type SceneDetailProps = Partial<typeof SCENE_DETAIL_DEFAULTS>;
+
+/** 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<SceneDetailProps> = (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 detailSrc = asset('textures/live/detail-full.png');
+  const { accent } = { ...sceneDefaults(theme, 'macro', SCENE_DETAIL_DEFAULTS), ...props };
+  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: paperStyle ? '#fdfcfa' : theme.surface,
+                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: paint('#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: paint(`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: accent,
+                boxShadow: paint('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>
+  );
+};