reelme 0.2.2 → 0.4.0

package/template/src/Root.tsx

@@ -1,9 +1,14 @@
 import React from "react";
-import { AbsoluteFill, Sequence, useCurrentFrame, interpolate } from "remotion";
+import { AbsoluteFill, Audio, Sequence, staticFile, useVideoConfig } from "remotion";
 import { Brief, ProjectMeta, Scene } from "./brief";
 import { PlatformPreset } from "./platforms";
 import { buildTheme } from "./theme";
 import { sceneDuration } from "./duration";
+import { audioVolume } from "./audio";
+import { resolveLook } from "./cinematic/look";
+import { Atmosphere, Grain } from "./cinematic/Atmosphere";
+import { Camera } from "./cinematic/Camera";
+import { Enter, transitionFor } from "./cinematic/transitions";
 import "./fonts";
 import { Problem } from "./components/scenes/Problem";
 import { CodeReveal } from "./components/scenes/CodeReveal";
@@ -18,33 +23,9 @@ import { FileTree } from "./components/scenes/FileTree";
 import { MobileScreen } from "./components/scenes/MobileScreen";
 import { OSWindow } from "./components/scenes/OSWindowScene";
 import { Hotkey } from "./components/scenes/HotkeyScene";
-
-const FADE_IN = 12;
-const FADE_OUT = 15;
-
-const TransitionEnvelope: React.FC<{
-  durationInFrames: number;
-  transition: "fade" | "slide" | "zoom";
-  children: React.ReactNode;
-}> = ({ durationInFrames, transition, children }) => {
-  const frame = useCurrentFrame();
-  const keys = [0, FADE_IN, durationInFrames - FADE_OUT, durationInFrames];
-  const opts = { extrapolateLeft: "clamp" as const, extrapolateRight: "clamp" as const };
-
-  const opacity = interpolate(frame, keys, [0, 1, 1, 0], opts);
-
-  if (transition === "slide") {
-    const translateY = interpolate(frame, keys, [30, 0, 0, -30], opts);
-    return <AbsoluteFill style={{ opacity, transform: `translateY(${translateY}px)` }}>{children}</AbsoluteFill>;
-  }
-
-  if (transition === "zoom") {
-    const scale = interpolate(frame, keys, [0.95, 1, 1, 1.04], opts);
-    return <AbsoluteFill style={{ opacity, transform: `scale(${scale})` }}>{children}</AbsoluteFill>;
-  }
-
-  return <AbsoluteFill style={{ opacity }}>{children}</AbsoluteFill>;
-};
+import { Hook } from "./components/scenes/Hook";
+import { Clip } from "./components/scenes/Clip";
+import { Benchmark } from "./components/scenes/Benchmark";
 
 interface ReelProps {
   brief: Brief;
@@ -55,7 +36,16 @@ interface ReelProps {
 }
 
 export const Reel: React.FC<ReelProps> = ({ brief, platform, cut }) => {
-  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),
+    motion: look.motion,
+  };
+  const isGif = platform.output.codec === "gif";
+  const shouldRenderAudio = !isGif && Boolean(brief.project.audio);
 
   // Cut selection: teaser when requested, otherwise the cut named by the
   // platform preset, falling back to main when vertical is absent.
@@ -63,7 +53,7 @@ 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;
 
   let cursor = 0;
@@ -74,15 +64,39 @@ export const Reel: React.FC<ReelProps> = ({ brief, platform, cut }) => {
     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 }}>
-      {sequenced.map(({ scene, from, duration }, i) => (
-        <Sequence key={i} from={from} durationInFrames={duration}>
-          <TransitionEnvelope durationInFrames={duration} transition={brief.project.transition ?? "fade"}>
-            <SceneRenderer scene={scene} theme={theme} project={brief.project} />
-          </TransitionEnvelope>
-        </Sequence>
-      ))}
+      <Atmosphere theme={theme} look={look} quality={isGif ? "lite" : "full"} />
+
+      {shouldRenderAudio && brief.project.audio ? (
+        <Audio
+          src={staticFile(`audio/${brief.project.audio.track}`)}
+          loop
+          volume={(frame) =>
+            audioVolume(frame, durationInFrames, brief.project.audio ? brief.project.audio.volume : undefined)
+          }
+        />
+      ) : null}
+
+      <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>
+
+      {!isGif && <Grain look={look} />}
     </AbsoluteFill>
   );
 };
@@ -91,36 +105,44 @@ interface SceneRendererProps {
   scene: Scene;
   theme: ReturnType<typeof buildTheme>;
   project: ProjectMeta;
+  platform: PlatformPreset;
 }
 
-const SceneRenderer: React.FC<SceneRendererProps> = ({ scene, theme, project }) => {
+const SceneRenderer: React.FC<SceneRendererProps> = ({ scene, theme, project, platform }) => {
+  const bottomInset = platform.safeArea?.bottom ?? 0;
   switch (scene.type) {
     case "problem":
-      return <Problem scene={scene} theme={theme} project={project} />;
+      return <Problem scene={scene} theme={theme} project={project} platform={platform} bottomInset={bottomInset} />;
     case "code-reveal":
-      return <CodeReveal scene={scene} theme={theme} />;
+      return <CodeReveal scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "terminal":
-      return <TerminalScene scene={scene} theme={theme} />;
+      return <TerminalScene scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "data-flow":
-      return <DataFlow scene={scene} theme={theme} />;
+      return <DataFlow scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "cta":
-      return <CTA scene={scene} theme={theme} project={project} />;
+      return <CTA scene={scene} theme={theme} project={project} platform={platform} bottomInset={bottomInset} />;
     case "browser":
-      return <BrowserFrame scene={scene} theme={theme} />;
+      return <BrowserFrame scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "split":
-      return <SplitComparison scene={scene} theme={theme} />;
+      return <SplitComparison scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "feature-list":
-      return <FeatureList scene={scene} theme={theme} />;
+      return <FeatureList scene={scene} theme={theme} platform={platform} bottomInset={bottomInset} />;
     case "stat-callout":
-      return <StatCallout scene={scene} theme={theme} />;
+      return <StatCallout scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "file-tree":
-      return <FileTree scene={scene} theme={theme} />;
+      return <FileTree scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "mobile":
-      return <MobileScreen scene={scene} theme={theme} />;
+      return <MobileScreen scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "os-window":
-      return <OSWindow scene={scene} theme={theme} />;
+      return <OSWindow scene={scene} theme={theme} bottomInset={bottomInset} />;
     case "hotkey":
-      return <Hotkey scene={scene} theme={theme} />;
+      return <Hotkey scene={scene} theme={theme} bottomInset={bottomInset} />;
+    case "hook":
+      return <Hook scene={scene} theme={theme} platform={platform} />;
+    case "clip":
+      return <Clip scene={scene} theme={theme} bottomInset={bottomInset} />;
+    case "benchmark":
+      return <Benchmark scene={scene} theme={theme} bottomInset={bottomInset} />;
     default:
       return null;
   }

package/template/src/audio.ts

@@ -0,0 +1,24 @@
+const FADE_OUT_FRAMES = 45;
+const DEFAULT_AUDIO_VOLUME = 0.25;
+
+function clamp01(value: number) {
+  if (Number.isNaN(value)) return DEFAULT_AUDIO_VOLUME;
+  return Math.min(1, Math.max(0, value));
+}
+
+export function audioVolume(
+  frame: number,
+  durationInFrames: number,
+  base = DEFAULT_AUDIO_VOLUME
+) {
+  const volume = clamp01(base);
+  if (durationInFrames <= 0) return 0;
+
+  const fadeStart = Math.max(0, durationInFrames - FADE_OUT_FRAMES);
+  if (frame <= fadeStart) return volume;
+  if (frame >= durationInFrames) return 0;
+
+  const fadeLength = Math.max(1, durationInFrames - fadeStart);
+  const progress = (frame - fadeStart) / fadeLength;
+  return volume * (1 - progress);
+}

package/template/src/benchmark.ts

@@ -0,0 +1,18 @@
+// Pure bar-length logic for the benchmark scene, extracted so it can be unit
+// tested. Returns a fraction in (0, 1] per value; the winner is always 1.0 so
+// it reads as the longest bar regardless of metric direction.
+export function benchmarkFractions(
+  values: number[],
+  lowerIsBetter = false
+): number[] {
+  const safe = values.map((v) => (Number.isFinite(v) && v > 0 ? v : 0));
+
+  if (lowerIsBetter) {
+    const positives = safe.filter((v) => v > 0);
+    const min = positives.length ? Math.min(...positives) : 0;
+    return safe.map((v) => (v > 0 && min > 0 ? min / v : 0));
+  }
+
+  const max = Math.max(...safe, 0);
+  return safe.map((v) => (max > 0 ? v / max : 0));
+}

package/template/src/brief.json

@@ -10,6 +10,7 @@
     "tone": "playful",
     "mode": "intro",
     "bgStyle": "branded",
+    "audio": { "track": "bright-sparks.mp3" },
     "platforms": ["x", "tiktok", "github-readme"]
   },
   "cuts": {
@@ -60,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."
       },
@@ -81,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."
       },
@@ -116,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

@@ -1,9 +1,16 @@
 import { PlatformId } from "./platforms";
+import { LookId } from "./cinematic/look";
 
 // Brief schema version. Bump on breaking changes to the reelme.json contract;
 // 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;
@@ -14,17 +21,21 @@ export interface ProjectMeta {
   tone: "professional" | "playful" | "technical";
   /** Publishing targets; required, at least one. Presets derive dimensions. */
   platforms: PlatformId[];
-  /** Bundled CC0 track selection; false disables audio. (Playback lands in Phase 2.) */
+  /** 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.) */
+  /** "made with reelme" credit in the CTA footer; default true. */
   watermark?: boolean;
   mode?: "intro" | "announcement";
   version?: string;
   logo?: string;
   font?: string;
   monoFont?: string;
-  transition?: "fade" | "slide" | "zoom";
   bgStyle?: "deep" | "branded" | "light";
+  /**
+   * Art-direction preset: lighting, camera, grade, grain, and cut rhythm.
+   * Defaults from tone (professional→keynote, playful→arcade, technical→blueprint).
+   */
+  look?: LookId;
 }
 
 export interface ProblemScene {
@@ -33,6 +44,10 @@ export interface ProblemScene {
   subtext?: string;
   caption?: string;
   hero?: boolean;
+  /** Small eyebrow label above the headline (e.g. the product name). */
+  kicker?: string;
+  /** Composition: centered (default) or left-anchored with negative space. */
+  align?: "center" | "left";
 }
 
 export interface CodeRevealScene {
@@ -108,6 +123,8 @@ export interface FeatureListScene {
   headline?: string;
   items: Array<string | FeatureItem>;
   caption?: string;
+  /** Composition: centered (default) or left-anchored. */
+  align?: "center" | "left";
 }
 
 export interface StatItem {
@@ -120,6 +137,8 @@ export interface StatCalloutScene {
   headline?: string;
   stats: StatItem[];
   caption?: string;
+  /** "hero" renders the first stat at giant scale (one dominant number). */
+  layout?: "row" | "hero";
 }
 
 export interface FileTreeEntry {
@@ -138,7 +157,22 @@ export interface FileTreeScene {
 export interface MobileScene {
   type: "mobile";
   title?: string;
-  image?: 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 {
+  type: "clip";
+  src: string;
+  frame: "browser" | "mobile" | "none";
+  startFrom?: number;
+  durationInFrames?: number;
   caption?: string;
 }
 
@@ -164,6 +198,37 @@ export interface HotkeyScene {
   caption?: string;
 }
 
+export interface HookScene {
+  type: "hook";
+  text: string;
+  accent?: string;
+  /** Small eyebrow label above the hook (e.g. the product name). */
+  kicker?: string;
+  /** Composition: centered (default) or left-anchored with negative space. */
+  align?: "center" | "left";
+}
+
+export interface BenchmarkBar {
+  label: string;
+  /** Raw metric value; bar length is derived from it. */
+  value: number;
+  /** Text shown on the bar, e.g. "0.3s". Falls back to the value. */
+  display?: string;
+  /** The project's own bar — highlighted in the accent color. */
+  hero?: boolean;
+}
+
+export interface BenchmarkScene {
+  type: "benchmark";
+  headline?: string;
+  /** Metric description, e.g. "Search time (lower is better)". */
+  metric?: string;
+  /** When true, the smallest value wins (gets the longest bar). */
+  lowerIsBetter?: boolean;
+  bars: BenchmarkBar[];
+  caption?: string;
+}
+
 export type Scene =
   | ProblemScene
   | CodeRevealScene
@@ -177,7 +242,10 @@ export type Scene =
   | FileTreeScene
   | MobileScene
   | OSWindowScene
-  | HotkeyScene;
+  | HotkeyScene
+  | HookScene
+  | BenchmarkScene
+  | ClipScene;
 
 export interface Cuts {
   /** The full narrative arc. Always required. */

package/template/src/cinematic/Atmosphere.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, interpolate, random } from "remotion";
+import chroma from "chroma-js";
+import { Theme } from "../theme";
+import { CinematicLook } from "./look";
+
+interface Props {
+  theme: Theme;
+  look: CinematicLook;
+  /** "lite" drops grain and softens overlays for gif output. */
+  quality: "full" | "lite";
+}
+
+/** Slow oscillation in [-1, 1] with a per-axis phase, for drifting lights. */
+function drift(frame: number, period: number, phase: number) {
+  return Math.sin((frame / period) * Math.PI * 2 + phase);
+}
+
+/**
+ * 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.
+ */
+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
+  // 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%)`,
+          }}
+        />
+      )}
+
+      {showOverlay && look.overlay === "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. */}
+      <AbsoluteFill
+        style={{
+          background: look.grade.color,
+          mixBlendMode: look.grade.blend,
+          opacity: look.grade.alpha * (lite ? 0.5 : 1),
+        }}
+      />
+
+      {/* Vignette: darkens the edges so the eye stays centered. Softened on lite
+          so the gif stays mostly flat base color and compresses. */}
+      <AbsoluteFill
+        style={{
+          background: `radial-gradient(120% 120% at 50% 48%, transparent 45%, rgba(0,0,0,${lite ? Math.min(look.vignette, 0.22) : look.vignette}) 100%)`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+const GridOverlay: React.FC<{ color: string; lite: boolean }> = ({ color, lite }) => {
+  const frame = useCurrentFrame();
+  const shift = lite ? 0 : (frame * 0.15) % 64;
+  const line = chroma(color).alpha(0.12).css();
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundImage: `linear-gradient(${line} 1px, transparent 1px), linear-gradient(90deg, ${line} 1px, transparent 1px)`,
+        backgroundSize: "64px 64px",
+        backgroundPosition: `${shift}px ${shift}px`,
+        maskImage: "radial-gradient(120% 100% at 50% 50%, black 30%, transparent 80%)",
+        WebkitMaskImage: "radial-gradient(120% 100% at 50% 50%, black 30%, transparent 80%)",
+      }}
+    />
+  );
+};
+
+const Scanlines: React.FC<{ lite: boolean }> = ({ lite }) => (
+  <AbsoluteFill
+    style={{
+      backgroundImage: `repeating-linear-gradient(0deg, rgba(0,0,0,${lite ? 0.04 : 0.07}) 0px, rgba(0,0,0,${lite ? 0.04 : 0.07}) 1px, transparent 2px, transparent 4px)`,
+    }}
+  />
+);
+
+/**
+ * Film grain laid over the finished frame. Animated for video (a fresh noise
+ * tile every couple of frames reads as real grain); skipped entirely for gif,
+ * where it would balloon file size for no benefit.
+ */
+export const Grain: React.FC<{ look: CinematicLook }> = ({ look }) => {
+  const frame = useCurrentFrame();
+  if (look.grain <= 0) return null;
+  // Step the noise so it shimmers without recomputing every single frame.
+  const seed = Math.floor(frame / 2);
+  const baseFreq = 0.9;
+  const turbulence = `<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='${baseFreq}' numOctaves='2' seed='${seed % 97}' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>`;
+  const url = `data:image/svg+xml;utf8,${turbulence}`;
+  const jitter = interpolate(random(`grain-${seed}`), [0, 1], [-4, 4]);
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundImage: `url("${url}")`,
+        backgroundSize: "180px 180px",
+        backgroundPosition: `${jitter}px ${-jitter}px`,
+        opacity: look.grain,
+        mixBlendMode: "overlay",
+        pointerEvents: "none",
+      }}
+    />
+  );
+};

package/template/src/cinematic/Camera.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
+import { CinematicLook } from "./look";
+
+interface Props {
+  look: CinematicLook;
+  durationInFrames: number;
+  /** Per-scene seed so consecutive scenes don't move identically. */
+  seed: number;
+  /** Disables the move (gif output): a moving frame defeats gif compression. */
+  disabled?: boolean;
+  children: React.ReactNode;
+}
+
+/**
+ * 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.
+ */
+export const Camera: React.FC<Props> = ({ look, durationInFrames, seed, disabled, children }) => {
+  const frame = useCurrentFrame();
+  if (disabled) return <AbsoluteFill>{children}</AbsoluteFill>;
+
+  const p = interpolate(frame, [0, durationInFrames], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  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
+      break;
+    case "drift":
+      scale = interpolate(p, [0, 1], [1.0, 1 + 0.03 * k]); // gentle zoom in
+      break;
+    case "pan":
+      scale = interpolate(p, [0, 1], [1 + 0.05 * k, 1.0]); // slow zoom out
+      break;
+    case "float":
+      scale = 1 + (0.02 + 0.015 * Math.sin(frame / 42 + seed)) * k; // subtle breathe
+      break;
+    case "still":
+    default:
+      break;
+  }
+
+  return (
+    <AbsoluteFill style={{ scale: String(scale), transformOrigin: "center center", willChange: "scale" }}>
+      {children}
+    </AbsoluteFill>
+  );
+};