reelme 0.4.0 → 0.5.0

package/assets/audio/PROVENANCE.md

@@ -1,16 +1,23 @@
 # ReelMe Bundled Audio Provenance
 
-The bundled tracks in this directory are instrumental loops generated by
-`generate-tracks.mjs` for ReelMe. They do not sample third-party recordings,
-loops, MIDI files, or stems.
+The bundled music beds in this directory are curated **CC0 (public domain)**
+loops from [Freesound](https://freesound.org). Each `manifest.json` entry lists
+the uploader (`artist`) and the sound's Freesound page (`source`); CC0 requires
+no attribution, but the credits are kept as a courtesy. The files were loudness-
+normalized (`loudnorm I=-16:TP=-1.5`) to sit under the mix and re-encoded as MP3;
+they are otherwise unedited.
 
-The generated tracks are dedicated to the public domain under CC0 1.0. The
-manifest source URLs point to the generator definition used to create each
-track. Regenerate the MP3 files with:
+| file | Freesound | uploader |
+|---|---|---|
+| `lofi-dusk.mp3` | https://freesound.org/s/852231/ | holizna |
+| `warm-memories.mp3` | https://freesound.org/s/826622/ | xkeril |
+| `neon-pulse.mp3` | https://freesound.org/s/415922/ | newagesoup |
+| `night-drive.mp3` | https://freesound.org/s/211555/ | waveplaySFX |
+| `sunny-bounce.mp3` | https://freesound.org/s/512340/ | mistermender |
+| `light-steps.mp3` | https://freesound.org/s/410520/ | Jamessi |
 
-```bash
-node cli/assets/audio/generate-tracks.mjs
-```
+**Beat sync.** Each bed is an exact whole-beat loop at the `bpm` recorded in
+`manifest.json`, so the CLI can quantize scene cuts to the beat and the loop
+stays locked when Remotion repeats it (`sunny-bounce` is within ~0.1 beat).
 
-Each track is 32 seconds long, encoded as MP3, and kept below 2 MB for package
-size.
+Each file is kept below 2 MB for package size.

package/assets/audio/generate-sfx.mjs

@@ -0,0 +1,128 @@
+// Procedural SFX generator — FALLBACK ONLY. The shipped cues in sfx/ are
+// curated ElevenLabs sound effects (see sfx/SOURCES.md); this script exists so
+// the cues can be regenerated from nothing if those files are ever removed.
+// It REFUSES to overwrite existing files unless run with --force.
+//
+//   whoosh.mp3 — air sweep for fast lateral cuts (whip/wipe/flip)
+//   pop.mp3    — soft low knock for settle cuts (zoom/punch/rise/fade)
+//   rise.mp3   — swell into the end card (CTA), peak at 0.6s
+//
+//   node cli/assets/audio/generate-sfx.mjs --force   (requires ffmpeg on PATH)
+import { writeFileSync, rmSync, existsSync } from "node:fs";
+import { spawnSync } from "node:child_process";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const SAMPLE_RATE = 44100;
+const TWO_PI = Math.PI * 2;
+
+// Deterministic noise so regeneration is reproducible.
+function makeNoise() {
+  let seed = 0x9e3779b9;
+  return () => {
+    seed ^= seed << 13;
+    seed ^= seed >>> 17;
+    seed ^= seed << 5;
+    seed >>>= 0;
+    return (seed / 0xffffffff) * 2 - 1;
+  };
+}
+
+// One-pole band-ish filter state per render call.
+function renderWhoosh(t, dur, noise, state) {
+  // Noise through a swept low-pass: dark → bright → gone. Reads as air, not tape hiss.
+  const p = t / dur;
+  const cutoff = 400 + 5200 * Math.sin(Math.PI * p) ** 2;
+  const alpha = Math.min(1, cutoff / (SAMPLE_RATE / 2 / Math.PI));
+  state.lp += alpha * (noise() - state.lp);
+  const body = state.lp - state.lp2;
+  state.lp2 += 0.02 * (state.lp - state.lp2); // high-pass against rumble
+  const envelope = Math.sin(Math.PI * p) ** 1.6;
+  return body * envelope * 2.2;
+}
+
+function renderPop(t, dur) {
+  // A soft knock: quickly decaying low sine with a faint click transient.
+  const knock = Math.sin(TWO_PI * 130 * t * (1 - t * 1.6)) * Math.exp(-t * 42);
+  const click = Math.sin(TWO_PI * 1900 * t) * Math.exp(-t * 300) * 0.25;
+  return (knock + click) * 0.9;
+}
+
+function renderRise(t, dur, noise, state) {
+  // Swell: filtered noise + a fifth dyad crescendo that stops just before the
+  // peak — the visual landing supplies the actual accent.
+  const p = t / dur;
+  const cutoff = 250 + 2600 * p * p;
+  const alpha = Math.min(1, cutoff / (SAMPLE_RATE / 2 / Math.PI));
+  state.lp += alpha * (noise() - state.lp);
+  const air = state.lp * 0.7;
+  const dyad = (Math.sin(TWO_PI * 220 * t) + Math.sin(TWO_PI * 330 * t) * 0.6) * 0.18;
+  const envelope = p * p * (p < 0.92 ? 1 : (1 - p) / 0.08);
+  return (air + dyad) * envelope * 1.4;
+}
+
+const SFX = [
+  { file: "whoosh.mp3", dur: 0.42, render: renderWhoosh },
+  { file: "pop.mp3", dur: 0.18, render: renderPop },
+  { file: "rise.mp3", dur: 0.85, render: renderRise },
+];
+
+function writeWav(path, sfx) {
+  const frames = Math.round(SAMPLE_RATE * sfx.dur);
+  const dataSize = frames * 2;
+  const buffer = Buffer.alloc(44 + dataSize);
+  buffer.write("RIFF", 0);
+  buffer.writeUInt32LE(36 + dataSize, 4);
+  buffer.write("WAVE", 8);
+  buffer.write("fmt ", 12);
+  buffer.writeUInt32LE(16, 16);
+  buffer.writeUInt16LE(1, 20);
+  buffer.writeUInt16LE(1, 22);
+  buffer.writeUInt32LE(SAMPLE_RATE, 24);
+  buffer.writeUInt32LE(SAMPLE_RATE * 2, 28);
+  buffer.writeUInt16LE(2, 32);
+  buffer.writeUInt16LE(16, 34);
+  buffer.write("data", 36);
+  buffer.writeUInt32LE(dataSize, 40);
+
+  const noise = makeNoise();
+  const state = { lp: 0, lp2: 0 };
+  for (let i = 0; i < frames; i += 1) {
+    const t = i / SAMPLE_RATE;
+    const s = Math.max(-0.98, Math.min(0.98, sfx.render(t, sfx.dur, noise, state)));
+    buffer.writeInt16LE(Math.round(s * 32767), 44 + i * 2);
+  }
+  writeFileSync(path, buffer);
+}
+
+const outDir = join(dirname(fileURLToPath(import.meta.url)), "sfx");
+spawnSync("mkdir", ["-p", outDir]);
+
+const force = process.argv.includes("--force");
+const existing = SFX.filter((s) => existsSync(join(outDir, s.file)));
+if (existing.length > 0 && !force) {
+  console.error(
+    `refusing to overwrite curated SFX (${existing.map((s) => s.file).join(", ")}). ` +
+      `These are hand-picked ElevenLabs cues (sfx/SOURCES.md); rerun with --force to replace them with the procedural fallback.`
+  );
+  process.exit(1);
+}
+
+for (const sfx of SFX) {
+  const wavPath = join(outDir, sfx.file.replace(".mp3", ".wav"));
+  const mp3Path = join(outDir, sfx.file);
+  writeWav(wavPath, sfx);
+  const result = spawnSync(
+    "ffmpeg",
+    ["-y", "-hide_banner", "-loglevel", "error", "-i", wavPath, "-af", "loudnorm=I=-23:TP=-2", "-codec:a", "libmp3lame", "-b:a", "96k", mp3Path],
+    { stdio: "inherit" }
+  );
+  if (result.error || result.status !== 0) {
+    rmSync(wavPath, { force: true });
+    rmSync(mp3Path, { force: true });
+    process.exitCode = result.status || 1;
+    break;
+  }
+  rmSync(wavPath, { force: true });
+  console.log(`wrote ${mp3Path}`);
+}

package/assets/audio/manifest.json

@@ -1,83 +1,76 @@
 [
   {
-    "file": "calm-keys.mp3",
-    "title": "Calm Keys",
-    "artist": "ReelMe procedural audio generator",
-    "source": "https://github.com/RubenGlez/reelme/blob/main/cli/assets/audio/generate-tracks.mjs#calm-keys",
+    "file": "lofi-dusk.mp3",
+    "title": "Lofi Dusk",
+    "artist": "holizna",
+    "source": "https://freesound.org/s/852231/",
     "license": "CC0",
-    "tones": ["professional"],
-    "duration": 32
+    "tones": [
+      "professional"
+    ],
+    "duration": 35,
+    "bpm": 82
   },
   {
-    "file": "steady-launch.mp3",
-    "title": "Steady Launch",
-    "artist": "ReelMe procedural audio generator",
-    "source": "https://github.com/RubenGlez/reelme/blob/main/cli/assets/audio/generate-tracks.mjs#steady-launch",
+    "file": "warm-memories.mp3",
+    "title": "Warm Memories",
+    "artist": "xkeril",
+    "source": "https://freesound.org/s/826622/",
     "license": "CC0",
-    "tones": ["professional", "technical"],
-    "duration": 32
+    "tones": [
+      "professional"
+    ],
+    "duration": 20,
+    "bpm": 108
   },
   {
-    "file": "clean-horizon.mp3",
-    "title": "Clean Horizon",
-    "artist": "ReelMe procedural audio generator",
-    "source": "https://github.com/RubenGlez/reelme/blob/main/cli/assets/audio/generate-tracks.mjs#clean-horizon",
+    "file": "neon-pulse.mp3",
+    "title": "Neon Pulse",
+    "artist": "newagesoup",
+    "source": "https://freesound.org/s/415922/",
     "license": "CC0",
-    "tones": ["professional"],
-    "duration": 32
+    "tones": [
+      "technical",
+      "playful"
+    ],
+    "duration": 17,
+    "bpm": 112
   },
   {
-    "file": "bright-sparks.mp3",
-    "title": "Bright Sparks",
-    "artist": "ReelMe procedural audio generator",
-    "source": "https://github.com/RubenGlez/reelme/blob/main/cli/assets/audio/generate-tracks.mjs#bright-sparks",
+    "file": "night-drive.mp3",
+    "title": "Night Drive",
+    "artist": "waveplaySFX",
+    "source": "https://freesound.org/s/211555/",
     "license": "CC0",
-    "tones": ["playful"],
-    "duration": 32
+    "tones": [
+      "technical"
+    ],
+    "duration": 30,
+    "bpm": 128
   },
   {
-    "file": "pixel-bounce.mp3",
-    "title": "Pixel Bounce",
-    "artist": "ReelMe procedural audio generator",
-    "source": "https://github.com/RubenGlez/reelme/blob/main/cli/assets/audio/generate-tracks.mjs#pixel-bounce",
+    "file": "sunny-bounce.mp3",
+    "title": "Sunny Bounce",
+    "artist": "mistermender",
+    "source": "https://freesound.org/s/512340/",
     "license": "CC0",
-    "tones": ["playful", "technical"],
-    "duration": 32
+    "tones": [
+      "playful"
+    ],
+    "duration": 58,
+    "bpm": 126
   },
   {
-    "file": "sunny-loop.mp3",
-    "title": "Sunny Loop",
-    "artist": "ReelMe procedural audio generator",
-    "source": "https://github.com/RubenGlez/reelme/blob/main/cli/assets/audio/generate-tracks.mjs#sunny-loop",
+    "file": "light-steps.mp3",
+    "title": "Light Steps",
+    "artist": "Jamessi",
+    "source": "https://freesound.org/s/410520/",
     "license": "CC0",
-    "tones": ["playful"],
-    "duration": 32
-  },
-  {
-    "file": "circuit-pulse.mp3",
-    "title": "Circuit Pulse",
-    "artist": "ReelMe procedural audio generator",
-    "source": "https://github.com/RubenGlez/reelme/blob/main/cli/assets/audio/generate-tracks.mjs#circuit-pulse",
-    "license": "CC0",
-    "tones": ["technical"],
-    "duration": 32
-  },
-  {
-    "file": "vector-grid.mp3",
-    "title": "Vector Grid",
-    "artist": "ReelMe procedural audio generator",
-    "source": "https://github.com/RubenGlez/reelme/blob/main/cli/assets/audio/generate-tracks.mjs#vector-grid",
-    "license": "CC0",
-    "tones": ["technical"],
-    "duration": 32
-  },
-  {
-    "file": "midnight-protocol.mp3",
-    "title": "Midnight Protocol",
-    "artist": "ReelMe procedural audio generator",
-    "source": "https://github.com/RubenGlez/reelme/blob/main/cli/assets/audio/generate-tracks.mjs#midnight-protocol",
-    "license": "CC0",
-    "tones": ["technical", "professional"],
-    "duration": 32
+    "tones": [
+      "playful",
+      "professional"
+    ],
+    "duration": 35,
+    "bpm": 110
   }
 ]

package/assets/audio/sfx/SOURCES.md

@@ -0,0 +1,16 @@
+# SFX provenance
+
+The three cue files in this directory are curated **CC0 (public domain)** cues
+from [Freesound](https://freesound.org), loudness-normalized (`loudnorm
+I=-23:TP=-2`) to sit under the bundled music beds. CC0 requires no attribution;
+the uploader credits are kept as a courtesy.
+
+| file | Freesound | uploader | role |
+|---|---|---|---|
+| `whoosh.mp3` | https://freesound.org/s/60013/ | qubodup | fast lateral cut (soft air whoosh) |
+| `pop.mp3` | https://freesound.org/s/245645/ | unfa | settle cut (clean pop) |
+| `rise.mp3` | https://freesound.org/s/523057/ | magnuswaker | CTA swell (played from 18 frames before the cut) |
+
+The peaks land where `template/src/Root.tsx` schedules each cue. If these ever
+need regenerating without Freesound, `node cli/assets/audio/generate-sfx.mjs
+--force` produces synthetic CC0 stand-ins.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reelme",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Turn your repo into launch videos for social platforms. Rendered on your machine with Remotion — no accounts, no uploads.",
   "type": "module",
   "bin": {

package/src/cache.mjs

@@ -12,7 +12,7 @@ import {
   rmSync,
 } from "node:fs";
 import { homedir } from "node:os";
-import { basename, dirname, join } from "node:path";
+import { basename, dirname, isAbsolute, join, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { spawnSync } from "node:child_process";
 
@@ -82,6 +82,7 @@ const SCENE_REQUIRED = {
   hook: ["text"],
   clip: ["src", "frame"],
   benchmark: ["bars"],
+  custom: ["component", "durationInFrames"],
 };
 const ARRAY_FIELDS = new Set([
   "commands", "nodes", "edges", "items", "stats", "entries", "keys", "bars",
@@ -118,6 +119,7 @@ function validateScene(scene, where, errors) {
     ["clip", "src", CLIP_EXTS],
     ["mobile", "screenshot", IMAGE_EXTS],
     ["browser", "image", IMAGE_EXTS],
+    ["custom", "component", ["tsx"]],
   ];
   for (const [type, field, exts] of assetChecks) {
     if (scene.type === type && typeof scene[field] === "string" && !exts.includes(extOf(scene[field]))) {
@@ -252,8 +254,28 @@ export function ensureScaffold(repoRoot) {
     filter: (src) => !SCAFFOLD_EXCLUDES.has(basename(src)),
   });
 
-  // The user's brief always wins over the template sample.
+  // The user's brief always wins over the template sample. On the way in, the
+  // chosen track's BPM is injected from the audio manifest so the template can
+  // quantize scene cuts to the beat — the manifest stays the single source of
+  // truth and briefs never hand-write bpm.
   cpSync(join(repoRoot, "reelme.json"), join(cacheDir, "src", "brief.json"));
+  try {
+    const briefPath = join(cacheDir, "src", "brief.json");
+    const staged = JSON.parse(readFileSync(briefPath, "utf8"));
+    const track = staged?.project?.audio?.track;
+    if (track) {
+      const manifest = JSON.parse(readFileSync(join(AUDIO_DIR, "manifest.json"), "utf8"));
+      const entry = Array.isArray(manifest) ? manifest.find((e) => e.file === track) : undefined;
+      if (entry && typeof entry.bpm === "number") {
+        staged.project.audio.bpm = entry.bpm;
+        writeFileSync(briefPath, JSON.stringify(staged, null, 2) + "\n");
+      }
+    }
+  } catch {
+    // Malformed briefs/manifests are reported by validation, not here.
+  }
+
+  stageCustomScenes(repoRoot, cacheDir);
 
   if (!existsSync(join(cacheDir, "node_modules"))) {
     console.log("reelme: installing render dependencies (first run only)…");
@@ -266,6 +288,74 @@ export function ensureScaffold(repoRoot) {
   return cacheDir;
 }
 
+/**
+ * Stage skill-authored bespoke scenes and regenerate the import registry the
+ * template's SceneRenderer resolves against. The template's default
+ * custom-scenes.ts (synced a moment earlier) exports an empty registry, so
+ * briefs without custom scenes keep exactly the stock behavior. Remotion
+ * bundles statically, so a generated barrel of real imports is the only way a
+ * brief-referenced path can become a renderable component.
+ */
+function stageCustomScenes(repoRoot, cacheDir) {
+  let components = [];
+  try {
+    const staged = JSON.parse(readFileSync(join(cacheDir, "src", "brief.json"), "utf8"));
+    for (const cut of Object.values(staged?.cuts ?? {})) {
+      if (!Array.isArray(cut)) continue;
+      for (const scene of cut) {
+        if (scene?.type === "custom" && typeof scene.component === "string") {
+          components.push(scene.component);
+        }
+      }
+    }
+  } catch {
+    return; // malformed briefs are reported by validation
+  }
+  components = [...new Set(components)];
+  if (components.length === 0) return;
+
+  const customDir = join(cacheDir, "src", "custom");
+  mkdirSync(customDir, { recursive: true });
+
+  const imports = [];
+  const entries = [];
+  components.forEach((rel, i) => {
+    // Containment: the component must live inside the repo.
+    const source = resolve(repoRoot, rel);
+    const contained = relative(repoRoot, source);
+    if (isAbsolute(rel) || contained.startsWith("..") || isAbsolute(contained)) {
+      fail(`custom scene component must be a repo-relative path (got "${rel}").`);
+    }
+    if (!existsSync(source)) {
+      fail(`custom scene component not found: ${rel}`);
+    }
+    cpSync(source, join(customDir, `scene-${i}.tsx`));
+    imports.push(`import Custom${i} from "./custom/scene-${i}";`);
+    entries.push(`  ${JSON.stringify(rel)}: Custom${i},`);
+  });
+
+  const generated = `// GENERATED by the reelme CLI at stage time — do not edit.
+import type { ComponentType } from "react";
+import { Theme } from "./theme";
+import { ProjectMeta } from "./brief";
+import { PlatformPreset } from "./platforms";
+${imports.join("\n")}
+
+export interface CustomSceneProps {
+  theme: Theme;
+  project: ProjectMeta;
+  platform: PlatformPreset;
+  bottomInset: number;
+  caption?: string;
+}
+
+export const CUSTOM_SCENES: Record<string, ComponentType<CustomSceneProps>> = {
+${entries.join("\n")}
+};
+`;
+  writeFileSync(join(cacheDir, "src", "custom-scenes.ts"), generated);
+}
+
 // Removes the current project's cache by default; pass `all` to wipe every
 // project's cache (F16). A moved/renamed repo hashes to a new dir, so `--all`
 // is the way to reclaim orphaned caches.

package/src/render.mjs

@@ -146,6 +146,13 @@ function copyAudioTrack(cacheDir, brief) {
   const audioDir = join(cacheDir, "public", "audio");
   mkdirSync(audioDir, { recursive: true });
   cpSync(source, join(audioDir, track));
+
+  // Cut SFX ride along whenever music is enabled (Root.tsx plays them under
+  // scene transitions; audio: false disables both together).
+  const sfxDir = join(AUDIO_DIR, "sfx");
+  if (existsSync(sfxDir)) {
+    cpSync(sfxDir, join(audioDir, "sfx"), { recursive: true });
+  }
 }
 
 function copyLogo(repoRoot, cacheDir, brief) {

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";
@@ -41,11 +43,12 @@ export const Reel: React.FC<ReelProps> = ({ brief, platform, cut }) => {
   // 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),
+    ...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.
@@ -56,10 +59,13 @@ export const Reel: React.FC<ReelProps> = ({ brief, platform, cut }) => {
         ? (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 };
   });
@@ -96,11 +102,57 @@ export const Reel: React.FC<ReelProps> = ({ brief, platform, cut }) => {
         ))}
       </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>;
@@ -122,7 +174,7 @@ const SceneRenderer: React.FC<SceneRendererProps> = ({ scene, theme, project, pl
     case "cta":
       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":
@@ -132,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":
@@ -143,6 +195,22 @@ const SceneRenderer: React.FC<SceneRendererProps> = ({ scene, theme, project, pl
       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;
   }