reelme 0.4.0 → 0.5.0

package/template/src/brief.ts

@@ -18,11 +18,21 @@ export interface ProjectMeta {
   installCommand: string;
   repoUrl: string;
   primaryColor: string;
+  /**
+   * Second brand hue for backdrops and gradients (taken from the project's
+   * logo or site). Without it one is derived from primaryColor — a real brand
+   * pair reads noticeably less generic than a derived one.
+   */
+  secondaryColor?: string;
   tone: "professional" | "playful" | "technical";
   /** Publishing targets; required, at least one. Presets derive dimensions. */
   platforms: PlatformId[];
-  /** Bundled CC0 track selection; false disables audio. */
-  audio?: { track: string; volume?: number } | false;
+  /**
+   * Bundled CC0 track selection; false disables audio (music, SFX, and beat
+   * quantization together). `bpm` is injected by the CLI from the audio
+   * manifest at stage time — briefs don't set it by hand.
+   */
+  audio?: { track: string; volume?: number; bpm?: number } | false;
   /** "made with reelme" credit in the CTA footer; default true. */
   watermark?: boolean;
   mode?: "intro" | "announcement";
@@ -198,6 +208,18 @@ export interface HotkeyScene {
   caption?: string;
 }
 
+export interface CustomScene {
+  type: "custom";
+  /**
+   * Repo-relative path to a bespoke scene component (a .tsx default export),
+   * usually authored by the skill for THIS project's one differentiating
+   * moment. The CLI stages the file and registers it (custom-scenes.ts).
+   */
+  component: string;
+  durationInFrames: number;
+  caption?: string;
+}
+
 export interface HookScene {
   type: "hook";
   text: string;
@@ -245,7 +267,8 @@ export type Scene =
   | HotkeyScene
   | HookScene
   | BenchmarkScene
-  | ClipScene;
+  | ClipScene
+  | CustomScene;
 
 export interface Cuts {
   /** The full narrative arc. Always required. */

package/template/src/cinematic/Atmosphere.tsx

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

package/template/src/cinematic/Camera.tsx

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

package/template/src/cinematic/look.ts

@@ -15,6 +15,21 @@ export type CameraMove = "push" | "drift" | "pan" | "float" | "still";
 
 export type AtmosphereOverlay = "none" | "grid" | "scanlines" | "dust";
 
+/**
+ * The backdrop SYSTEM a look is staged on. This is the look's silhouette: two
+ * looks with different backdrops read as different films even before grading.
+ * The old single recipe (dark field + drifting radial orbs) was the template's
+ * fingerprint — every reel shared it, and an orb in empty space reads as a
+ * smudge, not a light. Each system covers the frame with intent instead:
+ *
+ * - mesh:      full-bleed multi-hue gradient field (accent + accent2), slow drift
+ * - spotlight: one elliptical light pool aimed where the content sits
+ * - sweep:     saturated full-frame diagonal gradient between the brand hues
+ * - grid:      structural engineering grid — the graphic IS the backdrop
+ * - field:     rich near-solid editorial color field with a soft top wash
+ */
+export type BackdropSystem = "mesh" | "spotlight" | "sweep" | "grid" | "field";
+
 export interface Grade {
   /** Tint color layered over the whole frame. */
   color: string;
@@ -24,7 +39,9 @@ export interface Grade {
 
 export interface CinematicLook {
   id: LookId;
-  /** Radial accent-light intensity behind the content (0..1). */
+  /** Which backdrop system stages the whole reel. */
+  backdrop: BackdropSystem;
+  /** Backdrop light/color intensity (0..1). */
   glow: number;
   /** Whether a second, cooler light source is added for depth. */
   twoTone: boolean;
@@ -33,7 +50,7 @@ export interface CinematicLook {
   /** 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. */
+  /** Arrival move for every scene's content: a zoom that eases to a rest. */
   camera: CameraMove;
   /** Camera amplitude multiplier (1 = default). */
   cameraIntensity: number;
@@ -53,6 +70,7 @@ 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: {
+    backdrop: "mesh",
     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 },
     energy: 0.4,
@@ -61,22 +79,27 @@ const LOOKS: Record<LookId, Omit<CinematicLook, "id">> = {
   // Low-key cinema — deep vignette, cool grade, slow drift, dips to black.
   // Motion: heavy and deliberate — weighty mass, slow to settle.
   noir: {
+    backdrop: "spotlight",
     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 },
     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.
+  // Motion: snappy but settled — light mass, high stiffness, near-critical
+  // damping. Energy comes from speed, not from overshoot: a bouncing element
+  // reads as a toy, not a cut (gallery feedback).
   arcade: {
+    backdrop: "sweep",
     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 },
     energy: 0.85,
-    motion: { damping: 11, stiffness: 155, mass: 0.7 },
+    motion: { damping: 20, stiffness: 155, mass: 0.7 },
   },
   // Engineering blueprint — cool tint, faint grid, measured pans, mixed cuts.
   // Motion: stiff and precise — quick, minimal bounce, machined.
   blueprint: {
+    backdrop: "grid",
     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 },
     energy: 0.6,
@@ -85,6 +108,7 @@ const LOOKS: Record<LookId, Omit<CinematicLook, "id">> = {
   // Premium brand film — warm grade, big soft vignette, very slow elegant push.
   // Motion: the smoothest — elegant glide, no perceptible bounce.
   editorial: {
+    backdrop: "field",
     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 },
     energy: 0.3,

package/template/src/cinematic/transitions.tsx

@@ -8,7 +8,9 @@ import { CinematicLook, TransitionStyle } from "./look";
 const RHYTHM: Record<string, TransitionStyle[]> = {
   keynote: ["fade", "rise", "fade", "rise"],
   noir: ["dip", "fade", "dip", "rise"],
-  arcade: ["whip", "flip", "zoom", "whip"],
+  // No flip: a hinged swing reads as a gimmick next to the rest of the edit
+  // (gallery feedback) — arcade's energy now comes from fast zooms and whips.
+  arcade: ["zoom", "whip", "zoom", "fade"],
   blueprint: ["cut", "wipe", "cut", "whip"],
   editorial: ["fade", "wipe", "rise", "fade"],
 };
@@ -66,7 +68,7 @@ export const Enter: React.FC<EnterProps> = ({ style, look, fromBlack, seed, chil
       break;
     case "punch":
       opacity = interpolate(frame, [0, win * 0.6], [0, 1], ease);
-      scale = String(interpolate(p, [0, 1], [1.12, 1]));
+      scale = String(interpolate(p, [0, 1], [1.07, 1]));
       break;
     case "zoom":
       opacity = p;

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

@@ -10,11 +10,14 @@ interface ArrowProps {
   label?: string;
   theme: Theme;
   startFrame?: number;
+  /** Line weight; supporting graphics need real presence at video size. */
+  strokeWidth?: number;
+  labelSize?: number;
 }
 
-const ARROW_HEAD_SIZE = 10;
+const ARROW_HEAD_SIZE = 14;
 
-export const Arrow: React.FC<ArrowProps> = ({ x1, y1, x2, y2, label, theme, startFrame = 0 }) => {
+export const Arrow: React.FC<ArrowProps> = ({ x1, y1, x2, y2, label, theme, startFrame = 0, strokeWidth = 3.5, labelSize = 22 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const elapsed = frame - startFrame;
@@ -50,7 +53,7 @@ export const Arrow: React.FC<ArrowProps> = ({ x1, y1, x2, y2, label, theme, star
         x2={x2short}
         y2={y2short}
         stroke={theme.accent}
-        strokeWidth={2.5}
+        strokeWidth={strokeWidth}
         strokeDasharray={len}
         strokeDashoffset={dashOffset}
         strokeLinecap="round"
@@ -68,9 +71,9 @@ export const Arrow: React.FC<ArrowProps> = ({ x1, y1, x2, y2, label, theme, star
       {label && progress > 0.5 && (
         <text
           x={midX}
-          y={midY - 10}
+          y={midY - 14}
           fill={theme.textMuted}
-          fontSize={15}
+          fontSize={labelSize}
           textAnchor="middle"
           fontFamily={theme.fontSans}
           opacity={interpolate(progress, [0.5, 1], [0, 1])}

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

@@ -61,19 +61,30 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
   framesPerLine = 9,
 }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, width: frameWidth } = useVideoConfig();
   const elapsed = frame - startFrame;
   const lines = code.split("\n");
+  // Scale type with the frame so the editor window commands wide canvases
+  // (ch-based width sizing inherits this automatically).
+  const fontSize = Math.max(22, Math.round(frameWidth * 0.0135));
   const visibleCount = Math.max(0, Math.min(lines.length, Math.floor(elapsed / framesPerLine) + 1));
 
+  // Size the window to the longest line of the FULL snippet (not the partial
+  // reveal) so it arrives at its final width and never stretches to fill the
+  // frame — an editor window several times wider than its code reads as empty
+  // chrome (gallery feedback). 83px covers gutter, line numbers, and padding.
+  const cols = Math.min(Math.max(lines.reduce((m, l) => Math.max(m, l.length), 0), 24), 88);
+
   return (
-    <div style={{ fontFamily: theme.fontMono, fontSize: 20, lineHeight: 1.7 }}>
+    <div style={{ fontFamily: theme.fontMono, fontSize, lineHeight: 1.7, width: `calc(${cols}ch + 83px)`, maxWidth: "100%" }}>
       <div
         style={{
           background: "#0d1117",
-          borderRadius: 10,
+          borderRadius: 12,
           overflow: "hidden",
-          boxShadow: "0 8px 48px rgba(0,0,0,0.6)",
+          // Contact shadow + brand-light halo so the window sits in the stage.
+          boxShadow: `0 30px 90px -18px ${theme.accent}59, 0 24px 60px rgba(0,0,0,0.55)`,
+          outline: "1px solid rgba(255,255,255,0.09)",
         }}
       >
         {/* Title bar */}
@@ -95,9 +106,11 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
           </span>
         </div>
 
-        {/* Code lines */}
+        {/* Code lines. All rows are laid out from frame 0 (unrevealed ones
+            invisible) so the window opens at its final height — the reveal
+            happens inside stable chrome instead of inflating it. */}
         <div style={{ padding: "20px 0" }}>
-          {lines.slice(0, visibleCount).map((line, i) => {
+          {lines.map((line, i) => {
             const lineNum = i + 1;
             const isHighlight = highlightLine !== undefined && lineNum === highlightLine;
             const highlightOpacity =
@@ -115,6 +128,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
                 style={{
                   display: "flex",
                   padding: "0 24px",
+                  visibility: i < visibleCount ? "visible" : "hidden",
                   background: isHighlight
                     ? `rgba(${hexToRgb(theme.accent)}, ${0.15 * highlightOpacity})`
                     : "transparent",
@@ -128,7 +142,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
                     color: "#484f58",
                     minWidth: 32,
                     userSelect: "none",
-                    fontSize: 16,
+                    fontSize: Math.round(fontSize * 0.8),
                     paddingTop: 1,
                   }}
                 >

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

@@ -79,7 +79,6 @@ export const RevealText: React.FC<RevealTextProps> = ({
         lineHeight,
         letterSpacing,
         maxWidth,
-        textShadow: glow ? "0 6px 40px rgba(0,0,0,0.45)" : undefined,
       }}
     >
       {words.map((word, i) => {
@@ -92,12 +91,18 @@ export const RevealText: React.FC<RevealTextProps> = ({
           extrapolateRight: "clamp",
         });
         const isEmph = emphIndices.has(i);
+        // The clip mask exists only for the rise. Once the word is at rest the
+        // mask is released and the glow fades in — a soft 40px shadow inside an
+        // overflow-hidden span gets sheared into visible rectangles, so the two
+        // must never coexist (gallery feedback: "shadow looks cut off").
+        const settled = y < 1;
+        const shadowAlpha = glow && settled ? interpolate(p, [0.991, 1], [0, 0.45], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) : 0;
         return (
           <React.Fragment key={i}>
             <span
               style={{
                 display: "inline-block",
-                overflow: "hidden",
+                overflow: settled ? "visible" : "hidden",
                 paddingBottom: "0.14em",
                 marginBottom: "-0.14em",
                 verticalAlign: "bottom",
@@ -109,6 +114,7 @@ export const RevealText: React.FC<RevealTextProps> = ({
                   translate: `0 ${y}%`,
                   opacity,
                   color: isEmph ? theme.accent : undefined,
+                  textShadow: shadowAlpha > 0 ? `0 6px 40px rgba(0,0,0,${shadowAlpha.toFixed(3)})` : undefined,
                 }}
               >
                 {word}