reelme 0.2.2 → 0.3.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,11 @@ 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 look = resolveLook(brief.project.look, brief.project.tone);
+  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.
@@ -76,13 +61,29 @@ export const Reel: React.FC<ReelProps> = ({ brief, platform, cut }) => {
 
   return (
     <AbsoluteFill style={{ background: theme.bg }}>
+      <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}
+
       {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>
+          <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>
       ))}
+
+      {!isGif && <Grain look={look} />}
     </AbsoluteFill>
   );
 };
@@ -91,36 +92,45 @@ 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;
+  const lite = platform.output.codec === "gif";
   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} lite={lite} />;
     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} />;
+    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": {

package/template/src/brief.ts

@@ -1,4 +1,5 @@
 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.
@@ -14,7 +15,7 @@ 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.) */
   watermark?: boolean;
@@ -23,8 +24,14 @@ export interface ProjectMeta {
   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.
+   * Defaults from tone (professional→keynote, playful→arcade, technical→blueprint).
+   */
+  look?: LookId;
 }
 
 export interface ProblemScene {
@@ -33,6 +40,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 +119,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 +133,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 +153,16 @@ export interface FileTreeScene {
 export interface MobileScene {
   type: "mobile";
   title?: string;
-  image?: string;
+  screenshot?: string;
+  caption?: string;
+}
+
+export interface ClipScene {
+  type: "clip";
+  src: string;
+  frame: "browser" | "mobile" | "none";
+  startFrom?: number;
+  durationInFrames?: number;
   caption?: string;
 }
 
@@ -164,6 +188,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 +232,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={{ transform: `scale(${scale})`, transformOrigin: "center center", willChange: "transform" }}>
+      {children}
+    </AbsoluteFill>
+  );
+};

package/template/src/cinematic/look.ts

@@ -0,0 +1,89 @@
+// Art-direction presets ("looks"). A look is the production design of a reel:
+// how the atmosphere is lit, how the camera moves, how cuts are edited, and how
+// the frame is graded. Two briefs with different looks should read as the work
+// of two different studios, not the same template with a new accent color.
+//
+// Looks are pure data; colors come from the resolved Theme at render time.
+
+export type LookId = "keynote" | "noir" | "arcade" | "blueprint" | "editorial";
+
+export type TransitionStyle = "cut" | "fade" | "dip" | "whip" | "rise" | "punch" | "zoom";
+
+export type CameraMove = "push" | "drift" | "pan" | "float" | "still";
+
+export type AtmosphereOverlay = "none" | "grid" | "scanlines" | "dust";
+
+export interface Grade {
+  /** Tint color layered over the whole frame. */
+  color: string;
+  blend: "multiply" | "screen" | "overlay" | "soft-light";
+  alpha: number;
+}
+
+export interface CinematicLook {
+  id: LookId;
+  /** Radial accent-light intensity behind the content (0..1). */
+  glow: number;
+  /** Whether a second, cooler light source is added for depth. */
+  twoTone: boolean;
+  /** Vignette darkness at the edges (0..1). */
+  vignette: number;
+  /** Film-grain opacity on the final frame (0..1); skipped for gif output. */
+  grain: number;
+  overlay: AtmosphereOverlay;
+  /** Base camera move applied to every scene's content. */
+  camera: CameraMove;
+  /** Camera amplitude multiplier (1 = default). */
+  cameraIntensity: number;
+  grade: Grade;
+  /** Default cut style; the rhythm picker varies around it. */
+  transition: TransitionStyle;
+  /** Editing energy: higher tightens enter timings and favors hard cuts. */
+  energy: number;
+}
+
+const LOOKS: Record<LookId, Omit<CinematicLook, "id">> = {
+  // Clean keynote stage — soft key light, gentle push, long dissolves.
+  keynote: {
+    glow: 0.5, twoTone: false, vignette: 0.35, grain: 0.04, overlay: "none",
+    camera: "push", cameraIntensity: 1, grade: { color: "#ffffff", blend: "soft-light", alpha: 0.05 },
+    transition: "fade", energy: 0.4,
+  },
+  // Low-key cinema — deep vignette, cool grade, slow drift, dips to black.
+  noir: {
+    glow: 0.42, twoTone: true, vignette: 0.62, grain: 0.09, overlay: "dust",
+    camera: "drift", cameraIntensity: 1.1, grade: { color: "#2a3550", blend: "multiply", alpha: 0.22 },
+    transition: "dip", energy: 0.35,
+  },
+  // Saturated arcade — dual lights, scanlines, snappy whips and zooms.
+  arcade: {
+    glow: 0.72, twoTone: true, vignette: 0.3, grain: 0.05, overlay: "scanlines",
+    camera: "float", cameraIntensity: 1.25, grade: { color: "#ff3da6", blend: "screen", alpha: 0.06 },
+    transition: "whip", energy: 0.85,
+  },
+  // Engineering blueprint — cool tint, faint grid, measured pans, mixed cuts.
+  blueprint: {
+    glow: 0.45, twoTone: false, vignette: 0.42, grain: 0.06, overlay: "grid",
+    camera: "pan", cameraIntensity: 1, grade: { color: "#1e3a5f", blend: "soft-light", alpha: 0.12 },
+    transition: "cut", energy: 0.6,
+  },
+  // Premium brand film — warm grade, big soft vignette, very slow elegant push.
+  editorial: {
+    glow: 0.55, twoTone: false, vignette: 0.5, grain: 0.07, overlay: "none",
+    camera: "push", cameraIntensity: 0.7, grade: { color: "#ffb27a", blend: "overlay", alpha: 0.08 },
+    transition: "fade", energy: 0.3,
+  },
+};
+
+const TONE_DEFAULT: Record<string, LookId> = {
+  professional: "keynote",
+  playful: "arcade",
+  technical: "blueprint",
+};
+
+export function resolveLook(look: string | undefined, tone: string | undefined): CinematicLook {
+  const id = (look && look in LOOKS ? look : TONE_DEFAULT[tone ?? "professional"] ?? "keynote") as LookId;
+  return { id, ...LOOKS[id] };
+}
+
+export const LOOK_IDS = Object.keys(LOOKS) as LookId[];