reelme 0.3.0 → 0.4.0

package/template/src/Root.tsx

@@ -36,9 +36,14 @@ 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),
+    motion: look.motion,
+  };
   const isGif = platform.output.codec === "gif";
   const shouldRenderAudio = !isGif && Boolean(brief.project.audio);
 
@@ -48,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;
@@ -59,6 +64,12 @@ 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 }}>
       <Atmosphere theme={theme} look={look} quality={isGif ? "lite" : "full"} />
@@ -73,15 +84,17 @@ 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>
 
       {!isGif && <Grain look={look} />}
     </AbsoluteFill>
@@ -97,7 +110,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,7 +120,7 @@ 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} />;
     case "split":
@@ -128,7 +140,7 @@ 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} />;
     default:

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;
@@ -17,15 +23,13 @@ export interface ProjectMeta {
   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.) */
+  /** "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 +159,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 {

package/template/src/cinematic/Camera.tsx

@@ -47,7 +47,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>
   );

package/template/src/cinematic/look.ts

@@ -5,9 +5,11 @@
 //
 // Looks are pure data; colors come from the resolved Theme at render time.
 
+import { MotionProfile } from "../theme";
+
 export type LookId = "keynote" | "noir" | "arcade" | "blueprint" | "editorial";
 
-export type TransitionStyle = "cut" | "fade" | "dip" | "whip" | "rise" | "punch" | "zoom";
+export type TransitionStyle = "cut" | "fade" | "dip" | "whip" | "rise" | "punch" | "zoom" | "wipe" | "flip";
 
 export type CameraMove = "push" | "drift" | "pan" | "float" | "still";
 
@@ -36,42 +38,57 @@ export interface CinematicLook {
   /** 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;
+  /**
+   * Spring physics for in-scene element animation. Motion is part of the
+   * production design: a look should *move* differently, not just look
+   * different. The Reel feeds this into the theme so every scene's springs
+   * inherit the look's personality (smooth, snappy, weighty, ...).
+   */
+  motion: MotionProfile;
 }
 
 const LOOKS: Record<LookId, Omit<CinematicLook, "id">> = {
   // Clean keynote stage — soft key light, gentle push, long dissolves.
+  // Motion: settled, no bounce — elements arrive and hold.
   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,
+    energy: 0.4,
+    motion: { damping: 22, stiffness: 100, mass: 1.0 },
   },
   // Low-key cinema — deep vignette, cool grade, slow drift, dips to black.
+  // Motion: heavy and deliberate — weighty mass, slow to settle.
   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,
+    energy: 0.35,
+    motion: { damping: 28, stiffness: 78, mass: 1.4 },
   },
   // Saturated arcade — dual lights, scanlines, snappy whips and zooms.
+  // Motion: snappy with a playful overshoot — light mass, low damping.
   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,
+    energy: 0.85,
+    motion: { damping: 11, stiffness: 155, mass: 0.7 },
   },
   // Engineering blueprint — cool tint, faint grid, measured pans, mixed cuts.
+  // Motion: stiff and precise — quick, minimal bounce, machined.
   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,
+    energy: 0.6,
+    motion: { damping: 30, stiffness: 150, mass: 1.1 },
   },
   // Premium brand film — warm grade, big soft vignette, very slow elegant push.
+  // Motion: the smoothest — elegant glide, no perceptible bounce.
   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,
+    energy: 0.3,
+    motion: { damping: 26, stiffness: 88, mass: 1.15 },
   },
 };
 

package/template/src/cinematic/transitions.tsx

@@ -8,9 +8,9 @@ import { CinematicLook, TransitionStyle } from "./look";
 const RHYTHM: Record<string, TransitionStyle[]> = {
   keynote: ["fade", "rise", "fade", "rise"],
   noir: ["dip", "fade", "dip", "rise"],
-  arcade: ["whip", "punch", "zoom", "whip"],
-  blueprint: ["cut", "rise", "cut", "whip"],
-  editorial: ["fade", "fade", "rise", "fade"],
+  arcade: ["whip", "flip", "zoom", "whip"],
+  blueprint: ["cut", "wipe", "cut", "whip"],
+  editorial: ["fade", "wipe", "rise", "fade"],
 };
 
 export function transitionFor(look: CinematicLook, index: number, total: number): TransitionStyle {
@@ -43,8 +43,11 @@ export const Enter: React.FC<EnterProps> = ({ style, look, fromBlack, seed, chil
   const p = interpolate(frame, [0, win], [0, 1], { ...ease, easing: Easing.out(Easing.cubic) });
 
   let opacity = 1;
-  let transform = "";
+  let scale: string | undefined;
+  let translate: string | undefined;
   let filter: string | undefined;
+  let transform: string | undefined;
+  let clipPath: string | undefined;
 
   switch (style) {
     case "cut":
@@ -54,25 +57,38 @@ export const Enter: React.FC<EnterProps> = ({ style, look, fromBlack, seed, chil
       break;
     case "rise":
       opacity = p;
-      transform = `translateY(${interpolate(p, [0, 1], [44, 0])}px)`;
+      translate = `0 ${interpolate(p, [0, 1], [44, 0])}px`;
       break;
     case "whip":
       opacity = interpolate(frame, [0, win * 0.7], [0, 1], ease);
-      transform = `translateX(${interpolate(p, [0, 1], [90 * dir, 0])}px)`;
+      translate = `${interpolate(p, [0, 1], [90 * dir, 0])}px 0`;
       filter = `blur(${interpolate(p, [0, 1], [14, 0])}px)`;
       break;
     case "punch":
       opacity = interpolate(frame, [0, win * 0.6], [0, 1], ease);
-      transform = `scale(${interpolate(p, [0, 1], [1.12, 1])})`;
+      scale = String(interpolate(p, [0, 1], [1.12, 1]));
       break;
     case "zoom":
       opacity = p;
-      transform = `scale(${interpolate(p, [0, 1], [0.9, 1])})`;
+      scale = String(interpolate(p, [0, 1], [0.9, 1]));
       break;
     case "dip":
       // Content snaps in; a black veil over the top lifts away → dip-to-black.
       opacity = interpolate(frame, [0, win * 0.5], [0, 1], ease);
       break;
+    case "wipe": {
+      // A hard edge sweeps across, revealing the shot. Direction alternates by
+      // seed so consecutive wipes don't all travel the same way.
+      opacity = interpolate(frame, [0, win * 0.3], [0, 1], ease);
+      const remain = interpolate(p, [0, 1], [100, 0]);
+      clipPath = dir > 0 ? `inset(0 ${remain}% 0 0)` : `inset(0 0 0 ${remain}%)`;
+      break;
+    }
+    case "flip":
+      // Shot swings in on a vertical hinge — a single playful rotation.
+      opacity = interpolate(frame, [0, win * 0.5], [0, 1], ease);
+      transform = `perspective(1400px) rotateY(${interpolate(p, [0, 1], [62 * dir, 0])}deg)`;
+      break;
   }
 
   const dipVeil = style === "dip" && (
@@ -83,7 +99,9 @@ export const Enter: React.FC<EnterProps> = ({ style, look, fromBlack, seed, chil
 
   return (
     <>
-      <AbsoluteFill style={{ opacity, transform, filter, willChange: "transform, opacity" }}>
+      <AbsoluteFill
+        style={{ opacity, scale, translate, filter, transform, clipPath, willChange: "scale, translate, opacity, transform, clip-path" }}
+      >
         {children}
       </AbsoluteFill>
       {dipVeil}

package/template/src/components/primitives/Bar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { useCurrentFrame, useVideoConfig, spring, interpolate, Easing } from "remotion";
 import { Theme } from "../../theme";
 
 interface Props {
@@ -21,8 +21,12 @@ export const Bar: React.FC<Props> = ({ label, valueText, fraction, hero, theme,
     fps,
     config: theme.motion,
   });
-  const width = interpolate(Math.max(0, progress), [0, 1], [0, Math.max(0, Math.min(1, fraction))]);
+  const width = interpolate(Math.max(0, progress), [0, 1], [0, Math.max(0, Math.min(1, fraction))], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
   const valueOpacity = interpolate(frame - startFrame, [10, 22], [0, 1], {
+    easing: Easing.bezier(0.16, 1, 0.3, 1),
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
   });

package/template/src/components/primitives/Caption.tsx

@@ -28,7 +28,7 @@ export const Caption: React.FC<CaptionProps> = ({ text, theme, startFrame = 0, b
         display: "flex",
         justifyContent: "center",
         opacity,
-        transform: `translateY(${translateY}px)`,
+        translate: `0 ${translateY}px`,
       }}
     >
       <div
@@ -38,7 +38,7 @@ export const Caption: React.FC<CaptionProps> = ({ text, theme, startFrame = 0, b
           borderRadius: 999,
           padding: "10px 28px",
           fontFamily: theme.fontSans,
-          fontSize: 22,
+          fontSize: 32,
           fontWeight: 500,
           color: theme.text,
           letterSpacing: "-0.01em",

package/template/src/components/primitives/Icon.tsx

@@ -54,6 +54,13 @@ const ICON_MAP: Record<string, LucideIcon> = {
   zap: Zap,
 };
 
+// Whether a name resolves to a real icon. Callers use this to fall back visibly
+// (e.g. to a numbered marker) instead of rendering an empty slot when a brief
+// names an icon outside the registry (F6).
+export function hasIcon(name: string): boolean {
+  return name.toLowerCase() in ICON_MAP;
+}
+
 export interface IconProps {
   name: string;
   size?: number;

package/template/src/components/primitives/KeyPill.tsx

@@ -34,7 +34,7 @@ export const KeyPill: React.FC<KeyPillProps> = ({ label, theme, startFrame = 0 }
         color: theme.text,
         minWidth: 60,
         letterSpacing: "-0.01em",
-        transform: `scale(${scale})`,
+        scale: String(scale),
         opacity,
       }}
     >

package/template/src/components/primitives/Label.tsx

@@ -12,7 +12,10 @@ interface LabelProps {
   emphasis?: string;
 }
 
-const sizeMap = { sm: 22, md: 32, lg: 48, xl: 72 };
+// Floors from the video-layout rules at 1080-wide: labels >=32, supporting >=44,
+// headline >=84. Each step meets or clears its floor so text stays readable at
+// viewing distance.
+const sizeMap = { sm: 32, md: 44, lg: 60, xl: 88 };
 
 export const Label: React.FC<LabelProps> = ({
   text,

package/template/src/components/primitives/Loop.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+
+type LoopProperty = "scale" | "translateX" | "translateY" | "rotate";
+
+interface Props {
+  /** Which transform channel oscillates. */
+  property?: LoopProperty;
+  /**
+   * Peak deviation from rest: px for translate, degrees for rotate, and a
+   * scale delta for scale (0.02 = breathes between 0.98 and 1.02).
+   */
+  amplitude?: number;
+  /** Seconds for one full cycle. */
+  period?: number;
+  /** 0..1 phase offset so several looped elements don't move in lockstep. */
+  phase?: number;
+  /**
+   * Skip the motion (gif output): a perpetually moving element changes every
+   * frame and defeats gif compression, same reasoning as the Camera.
+   */
+  disabled?: boolean;
+  children: React.ReactNode;
+}
+
+/**
+ * Applies a subtle, continuous, seamless oscillation to a held element — the
+ * declarative "loop" channel the entrance springs don't cover. Motion is a sine
+ * driven by useCurrentFrame, so it loops without a seam and renders
+ * deterministically. Keep amplitudes small: this is meant to read as "alive",
+ * not as a bounce.
+ */
+export const Loop: React.FC<Props> = ({
+  property = "translateY",
+  amplitude = 6,
+  period = 3.5,
+  phase = 0,
+  disabled,
+  children,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  if (disabled) return <>{children}</>;
+
+  const v = Math.sin((frame / (period * fps) + phase) * Math.PI * 2) * amplitude;
+
+  let style: React.CSSProperties;
+  switch (property) {
+    case "scale":
+      style = { scale: String(1 + v) };
+      break;
+    case "translateX":
+      style = { translate: `${v}px 0` };
+      break;
+    case "rotate":
+      style = { rotate: `${v}deg` };
+      break;
+    case "translateY":
+    default:
+      style = { translate: `0 ${v}px` };
+      break;
+  }
+
+  return <div style={{ ...style, willChange: "transform" }}>{children}</div>;
+};

package/template/src/components/primitives/RevealText.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { useCurrentFrame, useVideoConfig, spring, interpolate, Easing } from "remotion";
 import { Theme } from "../../theme";
 
 interface RevealTextProps {
@@ -44,7 +44,29 @@ export const RevealText: React.FC<RevealTextProps> = ({
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const words = text.split(" ");
-  const emphWord = emphasis?.trim().toLowerCase();
+
+  // Resolve which word indices the accent covers. A multi-word accent phrase
+  // ("one command") must emphasize the whole contiguous run, not silently no-op
+  // because no single word equals the phrase (F2). Punctuation is stripped from
+  // both sides so "video." matches "video".
+  const clean = (w: string) => w.replace(/[.,!?:;]/g, "").toLowerCase();
+  const cleanedWords = words.map(clean);
+  const emphIndices = new Set<number>();
+  const accentWords = emphasis?.trim() ? emphasis.trim().split(/\s+/).map(clean).filter(Boolean) : [];
+  if (accentWords.length === 1) {
+    const a = accentWords[0];
+    cleanedWords.forEach((c, i) => {
+      if (c === a || c.includes(a)) emphIndices.add(i);
+    });
+  } else if (accentWords.length > 1) {
+    for (let i = 0; i + accentWords.length <= cleanedWords.length; i++) {
+      const matches = accentWords.every((a, j) => {
+        const c = cleanedWords[i + j];
+        return c === a || c.includes(a);
+      });
+      if (matches) accentWords.forEach((_, j) => emphIndices.add(i + j));
+    }
+  }
 
   return (
     <div
@@ -65,11 +87,11 @@ export const RevealText: React.FC<RevealTextProps> = ({
         const p = spring({ frame: elapsed, fps, config: theme.motion });
         const y = interpolate(p, [0, 1], [112, 0], { extrapolateRight: "clamp" });
         const opacity = interpolate(elapsed, [0, 6], [0, 1], {
+          easing: Easing.bezier(0.16, 1, 0.3, 1),
           extrapolateLeft: "clamp",
           extrapolateRight: "clamp",
         });
-        const clean = word.replace(/[.,!?:;]/g, "").toLowerCase();
-        const isEmph = emphWord && (clean === emphWord || word.toLowerCase().includes(emphWord));
+        const isEmph = emphIndices.has(i);
         return (
           <React.Fragment key={i}>
             <span
@@ -84,7 +106,7 @@ export const RevealText: React.FC<RevealTextProps> = ({
               <span
                 style={{
                   display: "inline-block",
-                  transform: `translateY(${y}%)`,
+                  translate: `0 ${y}%`,
                   opacity,
                   color: isEmph ? theme.accent : undefined,
                 }}

package/template/src/components/primitives/Stage.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { Theme } from "../../theme";
+import { Caption } from "./Caption";
+
+// Standard horizontal safe inset for scene content — keeps text off the frame
+// edges (the video-layout rules want key content ~120px in on a 1080–1920 frame).
+export const STAGE_INSET = 120;
+
+interface StageProps {
+  theme: Theme;
+  /** Stacking direction of the content. */
+  direction?: "row" | "column";
+  justify?: React.CSSProperties["justifyContent"];
+  align?: React.CSSProperties["alignItems"];
+  gap?: number;
+  /** Horizontal padding; defaults to the standard safe inset on both sides. */
+  padding?: React.CSSProperties["padding"];
+  /** Optional caption rendered as the film's bottom pill. */
+  caption?: string;
+  captionStart?: number;
+  bottomInset?: number;
+  children: React.ReactNode;
+}
+
+/**
+ * The shared scene root. Every scene is shot on the one continuous Atmosphere, so
+ * the root is ALWAYS transparent — never paint an opaque full-frame fill here or
+ * the stage behind it disappears and the reel stops reading as one film. Content
+ * is centered by default so leftover space stays symmetric (composed negative
+ * space) instead of being dumped against one edge as a void. For a hero + aside
+ * composition use `direction="row"` with `justify="space-between"`.
+ */
+export const Stage: React.FC<StageProps> = ({
+  theme,
+  direction = "column",
+  justify = "center",
+  align = "center",
+  gap,
+  padding,
+  caption,
+  captionStart = 50,
+  bottomInset = 0,
+  children,
+}) => {
+  return (
+    <AbsoluteFill
+      style={{
+        background: "transparent",
+        display: "flex",
+        flexDirection: direction,
+        alignItems: align,
+        justifyContent: justify,
+        gap,
+        padding: padding ?? `0 ${STAGE_INSET}px`,
+      }}
+    >
+      {children}
+      {caption && <Caption text={caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
+    </AbsoluteFill>
+  );
+};

package/template/src/components/scenes/BrowserFrame.tsx

@@ -38,7 +38,7 @@ export const BrowserFrame: React.FC<Props> = ({ scene, theme, bottomInset = 0 })
         style={{
           width: "100%",
           opacity: windowOpacity,
-          transform: `scale(${windowScale})`,
+          scale: String(windowScale),
           boxShadow: "0 24px 80px rgba(0,0,0,0.6)",
           borderRadius: 12,
           overflow: "hidden",