reelme 0.3.0 → 0.5.0

package/template/src/Root.tsx

@@ -3,13 +3,15 @@ import { AbsoluteFill, Audio, Sequence, staticFile, useVideoConfig } from "remot
 import { Brief, ProjectMeta, Scene } from "./brief";
 import { PlatformPreset } from "./platforms";
 import { buildTheme } from "./theme";
-import { sceneDuration } from "./duration";
+import { sceneDurationsOnGrid } from "./duration";
 import { audioVolume } from "./audio";
-import { resolveLook } from "./cinematic/look";
+import { resolveLook, TransitionStyle } from "./cinematic/look";
 import { Atmosphere, Grain } from "./cinematic/Atmosphere";
 import { Camera } from "./cinematic/Camera";
 import { Enter, transitionFor } from "./cinematic/transitions";
 import "./fonts";
+import { CUSTOM_SCENES } from "./custom-scenes";
+import { Caption } from "./components/primitives/Caption";
 import { Problem } from "./components/scenes/Problem";
 import { CodeReveal } from "./components/scenes/CodeReveal";
 import { TerminalScene } from "./components/scenes/TerminalScene";
@@ -36,11 +38,17 @@ interface ReelProps {
 }
 
 export const Reel: React.FC<ReelProps> = ({ brief, platform, cut }) => {
-  const { durationInFrames } = useVideoConfig();
-  const theme = buildTheme(brief.project.primaryColor || "#6366f1", brief.project.font, brief.project.monoFont, brief.project.tone, brief.project.bgStyle);
+  const { durationInFrames, fps } = useVideoConfig();
   const look = resolveLook(brief.project.look, brief.project.tone);
+  // The look owns motion personality: override the tone-derived default so every
+  // scene's springs (which read theme.motion) inherit the look's physics.
+  const theme = {
+    ...buildTheme(brief.project.primaryColor || "#6366f1", brief.project.font, brief.project.monoFont, brief.project.tone, brief.project.bgStyle, brief.project.secondaryColor),
+    motion: look.motion,
+  };
   const isGif = platform.output.codec === "gif";
   const shouldRenderAudio = !isGif && Boolean(brief.project.audio);
+  const bpm = brief.project.audio ? brief.project.audio.bpm : undefined;
 
   // Cut selection: teaser when requested, otherwise the cut named by the
   // platform preset, falling back to main when vertical is absent.
@@ -48,17 +56,26 @@ export const Reel: React.FC<ReelProps> = ({ brief, platform, cut }) => {
     cut === "teaser"
       ? brief.cuts.teaser ?? []
       : platform.cut === "vertical"
-        ? brief.cuts.vertical ?? brief.cuts.main
+        ? (brief.cuts.vertical?.length ? brief.cuts.vertical : brief.cuts.main)
         : brief.cuts.main;
 
+  // Cut timing on the music's beat grid (falls back to natural durations when
+  // no track/bpm) — the same grid index.ts used for the composition length.
+  const durations = sceneDurationsOnGrid(scenes, fps, bpm);
   let cursor = 0;
-  const sequenced = scenes.map((scene) => {
+  const sequenced = scenes.map((scene, i) => {
     const from = cursor;
-    const duration = sceneDuration(scene);
+    const duration = durations[i];
     cursor += duration;
     return { scene, from, duration };
   });
 
+  // Keep scene content out of the platform's top UI overlay zone (F10). The
+  // Atmosphere still fills the whole frame; only the content band starts below
+  // safeArea.top. The bottom is left at the frame edge because captions manage
+  // their own bottom inset, so this never double-counts.
+  const topInset = platform.safeArea?.top ?? 0;
+
   return (
     <AbsoluteFill style={{ background: theme.bg }}>
       <Atmosphere theme={theme} look={look} quality={isGif ? "lite" : "full"} />
@@ -73,21 +90,69 @@ export const Reel: React.FC<ReelProps> = ({ brief, platform, cut }) => {
         />
       ) : null}
 
-      {sequenced.map(({ scene, from, duration }, i) => (
-        <Sequence key={i} from={from} durationInFrames={duration}>
-          <Enter style={transitionFor(look, i, sequenced.length)} look={look} fromBlack={i === 0} seed={i}>
-            <Camera look={look} durationInFrames={duration} seed={i} disabled={isGif}>
-              <SceneRenderer scene={scene} theme={theme} project={brief.project} platform={platform} />
-            </Camera>
-          </Enter>
-        </Sequence>
-      ))}
+      <div style={{ position: "absolute", top: topInset, left: 0, right: 0, bottom: 0 }}>
+        {sequenced.map(({ scene, from, duration }, i) => (
+          <Sequence key={i} from={from} durationInFrames={duration} premountFor={fps}>
+            <Enter style={transitionFor(look, i, sequenced.length)} look={look} fromBlack={i === 0} seed={i}>
+              <Camera look={look} durationInFrames={duration} seed={i} disabled={isGif}>
+                <SceneRenderer scene={scene} theme={theme} project={brief.project} platform={platform} />
+              </Camera>
+            </Enter>
+          </Sequence>
+        ))}
+      </div>
+
+      {/* Cut SFX: a subtle cue under each transition makes the edit tactile.
+          The end-card gets a rise that starts BEFORE its cut so the swell
+          lands on the arrival, not after it. */}
+      {shouldRenderAudio &&
+        sequenced.map(({ from }, i) => {
+          if (i === 0) return null;
+          const isLast = i === sequenced.length - 1;
+          const style = transitionFor(look, i, sequenced.length);
+          const sfx = isLast ? null : cutSfx(style);
+          if (isLast) {
+            return (
+              <Sequence key={`sfx-${i}`} from={Math.max(0, from - 18)} durationInFrames={40}>
+                <Audio src={staticFile("audio/sfx/rise.mp3")} volume={0.5} />
+              </Sequence>
+            );
+          }
+          if (!sfx) return null;
+          return (
+            <Sequence key={`sfx-${i}`} from={from} durationInFrames={20}>
+              <Audio src={staticFile(`audio/sfx/${sfx.file}`)} volume={sfx.volume} />
+            </Sequence>
+          );
+        })}
 
       {!isGif && <Grain look={look} />}
     </AbsoluteFill>
   );
 };
 
+/**
+ * Which cue a transition earns. Fast lateral cuts get air (whoosh); settle
+ * cuts get a soft knock; hard cuts stay silent — silence is also a cue.
+ */
+function cutSfx(style: TransitionStyle): { file: string; volume: number } | null {
+  switch (style) {
+    case "whip":
+    case "wipe":
+    case "flip":
+      return { file: "whoosh.mp3", volume: 0.4 };
+    case "punch":
+    case "zoom":
+      return { file: "pop.mp3", volume: 0.45 };
+    case "rise":
+    case "fade":
+    case "dip":
+      return { file: "pop.mp3", volume: 0.25 };
+    default:
+      return null;
+  }
+}
+
 interface SceneRendererProps {
   scene: Scene;
   theme: ReturnType<typeof buildTheme>;
@@ -97,7 +162,6 @@ interface SceneRendererProps {
 
 const SceneRenderer: React.FC<SceneRendererProps> = ({ scene, theme, project, platform }) => {
   const bottomInset = platform.safeArea?.bottom ?? 0;
-  const lite = platform.output.codec === "gif";
   switch (scene.type) {
     case "problem":
       return <Problem scene={scene} theme={theme} project={project} platform={platform} bottomInset={bottomInset} />;
@@ -108,9 +172,9 @@ const SceneRenderer: React.FC<SceneRendererProps> = ({ scene, theme, project, pl
     case "data-flow":
       return <DataFlow scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "cta":
-      return <CTA scene={scene} theme={theme} project={project} platform={platform} bottomInset={bottomInset} lite={lite} />;
+      return <CTA scene={scene} theme={theme} project={project} platform={platform} bottomInset={bottomInset} />;
     case "browser":
-      return <BrowserFrame scene={scene} theme={theme} bottomInset={bottomInset} />;
+      return <BrowserFrame scene={scene} theme={theme} platform={platform} bottomInset={bottomInset} />;
     case "split":
       return <SplitComparison scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "feature-list":
@@ -120,7 +184,7 @@ const SceneRenderer: React.FC<SceneRendererProps> = ({ scene, theme, project, pl
     case "file-tree":
       return <FileTree scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "mobile":
-      return <MobileScreen scene={scene} theme={theme} bottomInset={bottomInset} />;
+      return <MobileScreen scene={scene} theme={theme} platform={platform} bottomInset={bottomInset} />;
     case "os-window":
       return <OSWindow scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "hotkey":
@@ -128,9 +192,25 @@ const SceneRenderer: React.FC<SceneRendererProps> = ({ scene, theme, project, pl
     case "hook":
       return <Hook scene={scene} theme={theme} platform={platform} />;
     case "clip":
-      return <Clip scene={scene} theme={theme} />;
+      return <Clip scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "benchmark":
       return <Benchmark scene={scene} theme={theme} bottomInset={bottomInset} />;
+    case "custom": {
+      const Custom = CUSTOM_SCENES[scene.component];
+      if (!Custom) {
+        // The CLI stages and registers referenced components; reaching this
+        // means a direct-render path skipped staging. Fail soft on one scene
+        // rather than killing the whole reel.
+        console.warn(`reelme: custom scene component not registered: ${scene.component}`);
+        return null;
+      }
+      return (
+        <>
+          <Custom theme={theme} project={project} platform={platform} bottomInset={bottomInset} caption={scene.caption} />
+          {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={40} bottomInset={bottomInset} />}
+        </>
+      );
+    }
     default:
       return null;
   }

package/template/src/brief.json

@@ -61,11 +61,11 @@
         "title": "Sprout Commands",
         "searchQuery": "sprout",
         "items": [
-          { "icon": "play", "label": "sprout dev", "value": "Start dev server + Prisma Studio", "highlighted": true },
+          { "icon": "terminal", "label": "sprout dev", "value": "Start dev server + Prisma Studio", "highlighted": true },
           { "icon": "database", "label": "sprout db:push", "value": "Sync schema to database" },
-          { "icon": "user-check", "label": "sprout auth:setup", "value": "Configure OAuth providers" },
+          { "icon": "key", "label": "sprout auth:setup", "value": "Configure OAuth providers" },
           { "icon": "package", "label": "sprout add", "value": "Add a feature module" },
-          { "icon": "rocket", "label": "sprout deploy", "value": "Deploy to Vercel, Railway, or Fly" }
+          { "icon": "cloud", "label": "sprout deploy", "value": "Deploy to Vercel, Railway, or Fly" }
         ],
         "caption": "Every task is one command away."
       },
@@ -82,8 +82,8 @@
           { "text": "Type-safe API layer with tRPC out of the box", "icon": "shield" },
           { "text": "Auth in one command — email, GitHub, Google", "icon": "lock" },
           { "text": "Database ORM with auto-generated migrations", "icon": "database" },
-          { "text": "CI/CD templates for GitHub Actions baked in", "icon": "git-branch" },
-          { "text": "One-click deploy to Vercel, Fly, or Railway", "icon": "rocket" }
+          { "text": "CI/CD templates for GitHub Actions baked in", "icon": "settings" },
+          { "text": "One-click deploy to Vercel, Fly, or Railway", "icon": "cloud" }
         ],
         "caption": "Start building features on day one."
       },
@@ -117,7 +117,7 @@
         "items": [
           { "text": "Type-safe API layer out of the box", "icon": "shield" },
           { "text": "Auth in one command", "icon": "lock" },
-          { "text": "One-click deploy", "icon": "rocket" }
+          { "text": "One-click deploy", "icon": "cloud" }
         ],
         "caption": "Start building on day one."
       },

package/template/src/brief.ts

@@ -5,6 +5,12 @@ import { LookId } from "./cinematic/look";
 // the CLI refuses briefs whose schemaVersion doesn't match.
 export const BRIEF_SCHEMA_VERSION = 2;
 
+// The CTA footer credit shows unless the brief explicitly opts out. Exported so
+// the component and its test share one definition instead of drifting (F22).
+export function showWatermark(watermark: boolean | undefined): boolean {
+  return watermark !== false;
+}
+
 export interface ProjectMeta {
   name: string;
   tagline: string;
@@ -12,20 +18,28 @@ export interface ProjectMeta {
   installCommand: string;
   repoUrl: string;
   primaryColor: string;
+  /**
+   * Second brand hue for backdrops and gradients (taken from the project's
+   * logo or site). Without it one is derived from primaryColor — a real brand
+   * pair reads noticeably less generic than a derived one.
+   */
+  secondaryColor?: string;
   tone: "professional" | "playful" | "technical";
   /** Publishing targets; required, at least one. Presets derive dimensions. */
   platforms: PlatformId[];
-  /** Bundled CC0 track selection; false disables audio. */
-  audio?: { track: string; volume?: number } | false;
-  /** "made with reelme" credit in the CTA footer; default true. (Rendering lands in Phase 2.) */
+  /**
+   * Bundled CC0 track selection; false disables audio (music, SFX, and beat
+   * quantization together). `bpm` is injected by the CLI from the audio
+   * manifest at stage time — briefs don't set it by hand.
+   */
+  audio?: { track: string; volume?: number; bpm?: number } | false;
+  /** "made with reelme" credit in the CTA footer; default true. */
   watermark?: boolean;
   mode?: "intro" | "announcement";
   version?: string;
   logo?: string;
   font?: string;
   monoFont?: string;
-  /** Legacy per-scene transition; superseded by the look's edit rhythm. */
-  transition?: "fade" | "slide" | "zoom";
   bgStyle?: "deep" | "branded" | "light";
   /**
    * Art-direction preset: lighting, camera, grade, grain, and cut rhythm.
@@ -155,6 +169,12 @@ export interface MobileScene {
   title?: string;
   screenshot?: string;
   caption?: string;
+  /** Value-prop shown beside the device (landscape) or above it (vertical).
+   *  With a headline/points the scene composes as device + copy; without, the
+   *  device sits centered on its own. */
+  headline?: string;
+  /** Short supporting bullets next to the device, rendered with accent checks. */
+  points?: string[];
 }
 
 export interface ClipScene {
@@ -188,6 +208,18 @@ export interface HotkeyScene {
   caption?: string;
 }
 
+export interface CustomScene {
+  type: "custom";
+  /**
+   * Repo-relative path to a bespoke scene component (a .tsx default export),
+   * usually authored by the skill for THIS project's one differentiating
+   * moment. The CLI stages the file and registers it (custom-scenes.ts).
+   */
+  component: string;
+  durationInFrames: number;
+  caption?: string;
+}
+
 export interface HookScene {
   type: "hook";
   text: string;
@@ -235,7 +267,8 @@ export type Scene =
   | HotkeyScene
   | HookScene
   | BenchmarkScene
-  | ClipScene;
+  | ClipScene
+  | CustomScene;
 
 export interface Cuts {
   /** The full narrative arc. Always required. */

package/template/src/cinematic/Atmosphere.tsx

@@ -19,50 +19,31 @@ function drift(frame: number, period: number, phase: number) {
 /**
  * The continuous stage the reel is shot on. Rendered once, behind every scene,
  * so the background never resets between cuts — that single fact is what turns
- * a deck of slides into one film. Lights drift slowly over the whole runtime.
+ * a deck of slides into one film.
+ *
+ * Each look stages the film on a distinct backdrop SYSTEM (look.backdrop)
+ * instead of one shared orb recipe. The system covers the frame with intent —
+ * a full gradient field, a structural grid, an aimed light — so no region is
+ * ever a flat void with a detached glow floating in it.
  */
 export const Atmosphere: React.FC<Props> = ({ theme, look, quality }) => {
   const liveFrame = useCurrentFrame();
   const lite = quality === "lite";
-  // Gif output freezes the lights: a frame that changes every tick defeats gif
+  // Gif output freezes the motion: a frame that changes every tick defeats gif
   // compression and balloons file size. The graded look stays; only motion goes.
   const frame = lite ? 0 : liveFrame;
 
-  const accent = chroma(theme.accent);
-  const cool = accent.set("hsl.h", "+150").desaturate(0.8).hex();
-
-  // Primary key light drifts across the upper third.
-  const keyX = 50 + drift(frame, 520, 0) * 14;
-  const keyY = 32 + drift(frame, 680, 1.3) * 8;
-  // Secondary fill light (only on two-tone looks) sweeps the opposite corner.
-  const fillX = 24 + drift(frame, 600, 2.1) * 12;
-  const fillY = 74 + drift(frame, 740, 0.6) * 10;
-
-  const glowAlpha = look.glow * (lite ? 0.6 : 1);
   // Patterned overlays (1px grid/scanlines) are GIF-compression poison — every
   // frame becomes high-frequency detail. Drop them on the lite path.
   const showOverlay = !lite;
-  // Gif compresses flat areas; smooth wide gradients (worst with bright accents)
-  // explode its 256-color palette. On lite, the key light is a smaller, tighter
-  // pool and the fill light is dropped, leaving most of the frame the flat base.
-  const keyGradient = lite
-    ? `radial-gradient(42% 38% at ${keyX}% ${keyY}%, ${accent.alpha(0.34 * glowAlpha).css()} 0%, transparent 62%)`
-    : `radial-gradient(60% 55% at ${keyX}% ${keyY}%, ${accent.alpha(0.55 * glowAlpha).css()} 0%, ${accent.alpha(0.12 * glowAlpha).css()} 38%, transparent 70%)`;
 
   return (
     <AbsoluteFill style={{ background: theme.bg }}>
-      {/* Key light */}
-      <AbsoluteFill style={{ background: keyGradient }} />
-      {/* Fill light */}
-      {look.twoTone && !lite && (
-        <AbsoluteFill
-          style={{
-            background: `radial-gradient(55% 50% at ${fillX}% ${fillY}%, ${chroma(cool).alpha(0.4 * glowAlpha).css()} 0%, transparent 68%)`,
-          }}
-        />
-      )}
+      <Backdrop theme={theme} look={look} frame={frame} lite={lite} />
 
-      {showOverlay && look.overlay === "grid" && <GridOverlay color={theme.border} lite={lite} />}
+      {showOverlay && look.overlay === "grid" && look.backdrop !== "grid" && (
+        <GridOverlay color={theme.border} lite={lite} />
+      )}
       {showOverlay && look.overlay === "scanlines" && <Scanlines lite={lite} />}
 
       {/* Grade pass: a subtle full-frame tint that unifies the palette. */}
@@ -85,6 +66,171 @@ export const Atmosphere: React.FC<Props> = ({ theme, look, quality }) => {
   );
 };
 
+/** Dispatch to the look's backdrop system. */
+const Backdrop: React.FC<{ theme: Theme; look: CinematicLook; frame: number; lite: boolean }> = ({
+  theme,
+  look,
+  frame,
+  lite,
+}) => {
+  const accent = chroma(theme.accent);
+  const accent2 = chroma(theme.accent2);
+  // On light stages the color has to stay pastel or text contrast dies.
+  const lightBg = chroma(theme.bg).luminance() > 0.5;
+  // Lite keeps most of the backdrop's identity: at half strength the gif's
+  // stage read as a flat dark void, which is exactly the look this system
+  // replaced. Slightly larger gif files are the accepted price.
+  const k = look.glow * (lite ? 0.75 : 1) * (lightBg ? 0.5 : 1);
+
+  switch (look.backdrop) {
+    case "mesh": {
+      // Full-bleed gradient field: three large soft color poles (brand hue,
+      // second hue, and a deep counter-tone) drifting very slowly. The whole
+      // frame carries color variation — no dead flat region, no orb smudge.
+      const ax = 22 + drift(frame, 620, 0) * 10;
+      const ay = 24 + drift(frame, 760, 1.1) * 8;
+      const bx = 80 + drift(frame, 680, 2.3) * 10;
+      const by = 30 + drift(frame, 820, 0.5) * 10;
+      const cx = 55 + drift(frame, 720, 3.4) * 12;
+      const cy = 92 + drift(frame, 900, 1.9) * 6;
+      const deep = accent.set("hsl.h", "-30").darken(1.2);
+      return (
+        <>
+          <AbsoluteFill
+            style={{
+              background: `radial-gradient(70% 65% at ${ax}% ${ay}%, ${accent.alpha(0.5 * k).css()} 0%, transparent 72%)`,
+            }}
+          />
+          <AbsoluteFill
+            style={{
+              background: `radial-gradient(65% 60% at ${bx}% ${by}%, ${accent2.alpha(0.38 * k).css()} 0%, transparent 70%)`,
+            }}
+          />
+          <AbsoluteFill
+            style={{
+              background: `radial-gradient(80% 55% at ${cx}% ${cy}%, ${deep.alpha(0.4 * k).css()} 0%, transparent 75%)`,
+            }}
+          />
+        </>
+      );
+    }
+
+    case "spotlight": {
+      // One aimed light: an elliptical pool centered on the content zone
+      // (slightly above frame center), like a subject lit on a dark stage.
+      // The light falls ON the content instead of drifting in empty space.
+      const sway = drift(frame, 780, 0.4) * 3;
+      const warm = accent.brighten(0.4);
+      return (
+        <>
+          <AbsoluteFill
+            style={{
+              background: `radial-gradient(52% 44% at ${50 + sway}% 42%, ${warm.alpha(0.34 * k).css()} 0%, ${warm.alpha(0.08 * k).css()} 55%, transparent 74%)`,
+            }}
+          />
+          {/* Faint floor bounce so the lower frame isn't pure void. */}
+          <AbsoluteFill
+            style={{
+              background: `radial-gradient(90% 30% at 50% 104%, ${accent2.alpha(0.14 * k).css()} 0%, transparent 70%)`,
+            }}
+          />
+        </>
+      );
+    }
+
+    case "sweep": {
+      // Saturated full-frame diagonal wash between the two brand hues, with a
+      // slow-moving highlight band. Vibrant edge to edge — arcade energy comes
+      // from color, not from floating lights.
+      const shiftA = 12 + drift(frame, 560, 0.8) * 8;
+      const shiftB = 88 + drift(frame, 640, 2.6) * 8;
+      const bandY = 50 + drift(frame, 700, 1.5) * 16;
+      return (
+        <>
+          <AbsoluteFill
+            style={{
+              background: `linear-gradient(128deg, ${accent.alpha(0.42 * k).css()} 0%, transparent ${shiftA + 34}%), linear-gradient(308deg, ${accent2.alpha(0.36 * k).css()} 0%, transparent ${100 - shiftB + 42}%)`,
+            }}
+          />
+          <AbsoluteFill
+            style={{
+              background: `linear-gradient(180deg, transparent ${bandY - 24}%, ${accent.brighten(1).alpha(0.1 * k).css()} ${bandY}%, transparent ${bandY + 24}%)`,
+            }}
+          />
+        </>
+      );
+    }
+
+    case "grid": {
+      // The engineering grid IS the backdrop: structural lines with a soft
+      // cool wash rising from the baseline. Reads as a drafting table, not a
+      // dark room with a lamp.
+      return (
+        <>
+          <AbsoluteFill
+            style={{
+              background: `linear-gradient(180deg, transparent 55%, ${accent.alpha(0.16 * k).css()} 100%)`,
+            }}
+          />
+          <StructuralGrid color={theme.border} accent={theme.accent} frame={frame} lite={lite} />
+        </>
+      );
+    }
+
+    case "field":
+    default: {
+      // Editorial poster field: a rich duotone wash — second hue at the top,
+      // brand hue rising from below — over the deep base. Near-solid, carried
+      // by grain and grade rather than by lights.
+      return (
+        <AbsoluteFill
+          style={{
+            background: `linear-gradient(180deg, ${accent2.alpha(0.2 * k).css()} 0%, transparent 40%, transparent 62%, ${accent.alpha(0.3 * k).css()} 100%)`,
+          }}
+        />
+      );
+    }
+  }
+};
+
+/**
+ * Blueprint's structural grid: minor + major lines and a center crosshair
+ * tick, strong enough to read as the actual set design instead of a texture.
+ */
+const StructuralGrid: React.FC<{ color: string; accent: string; frame: number; lite: boolean }> = ({
+  color,
+  accent,
+  frame,
+  lite,
+}) => {
+  const shift = lite ? 0 : (frame * 0.12) % 72;
+  const minor = chroma(color).alpha(lite ? 0.08 : 0.13).css();
+  const major = chroma(color).alpha(lite ? 0.14 : 0.22).css();
+  const tick = chroma(accent).alpha(0.4).css();
+  return (
+    <>
+      <AbsoluteFill
+        style={{
+          backgroundImage: `linear-gradient(${minor} 1px, transparent 1px), linear-gradient(90deg, ${minor} 1px, transparent 1px), linear-gradient(${major} 1px, transparent 1px), linear-gradient(90deg, ${major} 1px, transparent 1px)`,
+          backgroundSize: "72px 72px, 72px 72px, 360px 360px, 360px 360px",
+          backgroundPosition: `${shift}px ${shift}px`,
+          maskImage: "radial-gradient(130% 110% at 50% 50%, black 35%, transparent 85%)",
+          WebkitMaskImage: "radial-gradient(130% 110% at 50% 50%, black 35%, transparent 85%)",
+        }}
+      />
+      {/* Center crosshair tick: the drafting-table registration mark. */}
+      {!lite && (
+        <AbsoluteFill style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+          <div style={{ position: "relative", width: 28, height: 28, opacity: 0.5 }}>
+            <div style={{ position: "absolute", left: "50%", top: 0, bottom: 0, width: 1, background: tick }} />
+            <div style={{ position: "absolute", top: "50%", left: 0, right: 0, height: 1, background: tick }} />
+          </div>
+        </AbsoluteFill>
+      )}
+    </>
+  );
+};
+
 const GridOverlay: React.FC<{ color: string; lite: boolean }> = ({ color, lite }) => {
   const frame = useCurrentFrame();
   const shift = lite ? 0 : (frame * 0.15) % 64;

package/template/src/cinematic/Camera.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
 import { CinematicLook } from "./look";
 
 interface Props {
@@ -12,34 +12,46 @@ interface Props {
   children: React.ReactNode;
 }
 
+// The arrival window: how long the camera keeps settling after the cut before
+// coming to a complete rest, as a fraction of the scene (capped in frames).
+const SETTLE_FRACTION = 0.55;
+const SETTLE_MAX_FRAMES = 90;
+
 /**
- * A virtual camera over a scene's content. Movement is pure zoom — in, out, or a
- * gentle breathe — anchored to the center so the composition never slides
- * sideways. Amplitudes are small so the frame breathes without softening text.
+ * A virtual camera over a scene's content. Each shot ARRIVES with a slow zoom
+ * that eases to a complete rest, then holds perfectly still. A zoom that runs
+ * for the whole scene re-rasterizes crisp text at a new sub-pixel scale every
+ * frame, which reads as a constant vibration on bold type — so all movement is
+ * front-loaded into the arrival while the eye is still adjusting to the cut,
+ * and the hold (where the viewer actually reads) stays rock solid. Zoom only,
+ * anchored to center, so the composition never slides sideways.
  */
 export const Camera: React.FC<Props> = ({ look, durationInFrames, seed, disabled, children }) => {
   const frame = useCurrentFrame();
   if (disabled) return <AbsoluteFill>{children}</AbsoluteFill>;
+  void seed;
 
-  const p = interpolate(frame, [0, durationInFrames], [0, 1], {
+  const settleFrames = Math.min(Math.round(durationInFrames * SETTLE_FRACTION), SETTLE_MAX_FRAMES);
+  const p = interpolate(frame, [0, settleFrames], [0, 1], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
   });
   const k = look.cameraIntensity;
 
   let scale = 1;
   switch (look.camera) {
     case "push":
-      scale = interpolate(p, [0, 1], [1.0, 1 + 0.05 * k]); // slow zoom in
+      scale = interpolate(p, [0, 1], [1 - 0.045 * k, 1.0]); // slow zoom in to rest
       break;
     case "drift":
-      scale = interpolate(p, [0, 1], [1.0, 1 + 0.03 * k]); // gentle zoom in
+      scale = interpolate(p, [0, 1], [1 - 0.03 * k, 1.0]); // gentle zoom in to rest
       break;
     case "pan":
-      scale = interpolate(p, [0, 1], [1 + 0.05 * k, 1.0]); // slow zoom out
+      scale = interpolate(p, [0, 1], [1 + 0.03 * k, 1.0]); // slow zoom out to rest
       break;
     case "float":
-      scale = 1 + (0.02 + 0.015 * Math.sin(frame / 42 + seed)) * k; // subtle breathe
+      scale = interpolate(p, [0, 1], [1 - 0.02 * k, 1.0]); // soft zoom in to rest
       break;
     case "still":
     default:
@@ -47,7 +59,7 @@ export const Camera: React.FC<Props> = ({ look, durationInFrames, seed, disabled
   }
 
   return (
-    <AbsoluteFill style={{ transform: `scale(${scale})`, transformOrigin: "center center", willChange: "transform" }}>
+    <AbsoluteFill style={{ scale: String(scale), transformOrigin: "center center", willChange: "scale" }}>
       {children}
     </AbsoluteFill>
   );