reelme 0.2.2 → 0.4.0

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

@@ -2,23 +2,30 @@ import React from "react";
 import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
 import { ProblemScene as ProblemBrief, ProjectMeta } from "../../brief";
 import { Theme } from "../../theme";
+import { PlatformPreset, typeScale } from "../../platforms";
 import { Label } from "../primitives/Label";
 import { Caption } from "../primitives/Caption";
+import { RevealText } from "../primitives/RevealText";
+import { Kicker } from "../primitives/Kicker";
 
 interface Props {
   scene: ProblemBrief;
   theme: Theme;
   project: ProjectMeta;
+  platform?: PlatformPreset;
+  bottomInset?: number;
 }
 
 const SNAP_OFFSET = 8;
 
-export const Problem: React.FC<Props> = ({ scene, theme, project }) => {
+export const Problem: React.FC<Props> = ({ scene, theme, project, platform, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
+  const scale = platform ? typeScale(platform) : 1.0;
 
   const isAnnouncement = project.mode === "announcement" && project.version;
   const isHero = !!scene.hero;
+  const left = scene.align === "left";
 
   const accentBarProgress = spring({ frame: frame + SNAP_OFFSET, fps, config: theme.motion });
   const accentBarWidth = interpolate(accentBarProgress, [0, 1], [0, isHero ? 120 : 80]);
@@ -30,20 +37,22 @@ export const Problem: React.FC<Props> = ({ scene, theme, project }) => {
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
+        alignItems: left ? "flex-start" : "center",
         justifyContent: "center",
-        padding: isHero ? "0 80px" : "0 120px",
+        padding: left ? "0 0 0 140px" : isHero ? "0 80px" : "0 120px",
         gap: isHero ? 40 : 32,
       }}
     >
-      {isAnnouncement ? (
+      {scene.kicker ? (
+        <Kicker text={scene.kicker} theme={theme} startFrame={0} align={left ? "left" : "center"} />
+      ) : isAnnouncement ? (
         <div
           style={{
             opacity: badgeOpacity,
-            transform: `translateY(${badgeY}px)`,
+            translate: `0 ${badgeY}px`,
             background: theme.accentMuted,
             border: `1.5px solid ${theme.accent}`,
             borderRadius: 999,
@@ -69,37 +78,27 @@ export const Problem: React.FC<Props> = ({ scene, theme, project }) => {
       )}
 
       {isHero ? (
-        <div
-          style={{
-            fontFamily: theme.fontSans,
-            fontSize: 104,
-            fontWeight: 800,
-            color: theme.text,
-            textAlign: "center",
-            lineHeight: 1.05,
-            letterSpacing: "-0.03em",
-            opacity: interpolate(
-              spring({ frame: frame + SNAP_OFFSET, fps, config: theme.motion }),
-              [0, 1], [0, 1]
-            ),
-            transform: `translateY(${interpolate(
-              spring({ frame: frame + SNAP_OFFSET - 4, fps, config: theme.motion }),
-              [0, 1], [24, 0]
-            )}px)`,
-          }}
-        >
-          {scene.headline}
-        </div>
+        <RevealText
+          text={scene.headline}
+          theme={theme}
+          fontSize={104 * scale}
+          fontWeight={800}
+          align={left ? "left" : "center"}
+          stagger={3.5}
+          letterSpacing="-0.03em"
+          lineHeight={1.04}
+          maxWidth={left ? 1300 : 1500}
+        />
       ) : (
         <>
-          <Label text={scene.headline} theme={theme} size="xl" startFrame={4} />
+          <Label text={scene.headline} theme={theme} size="xl" align={left ? "left" : "center"} startFrame={4} />
           {scene.subtext && (
-            <Label text={scene.subtext} theme={theme} size="md" muted startFrame={16} />
+            <Label text={scene.subtext} theme={theme} size="md" muted align={left ? "left" : "center"} startFrame={16} />
           )}
         </>
       )}
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={40} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={40} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

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

@@ -7,9 +7,10 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: SplitBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
-export const SplitComparison: React.FC<Props> = ({ scene, theme }) => {
+export const SplitComparison: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -23,114 +24,86 @@ export const SplitComparison: React.FC<Props> = ({ scene, theme }) => {
   const rightX = interpolate(Math.max(0, rightProgress), [0, 1], [60, 0]);
   const dividerOpacity = interpolate(Math.max(0, dividerProgress), [0, 1], [0, 1]);
 
+  const Panel: React.FC<{
+    label: string;
+    content: string;
+    accent: boolean;
+    opacity: number;
+    x: number;
+  }> = ({ label, content, accent, opacity, x }) => (
+    <div
+      style={{
+        flex: 1,
+        opacity,
+        translate: `${x}px 0`,
+        display: "flex",
+        flexDirection: "column",
+        gap: 18,
+      }}
+    >
+      <div
+        style={{
+          fontFamily: theme.fontSans,
+          fontSize: 15,
+          fontWeight: 700,
+          letterSpacing: "0.12em",
+          textTransform: "uppercase",
+          color: accent ? theme.accent : theme.textMuted,
+        }}
+      >
+        {label}
+      </div>
+      <div
+        style={{
+          minHeight: 240,
+          background: theme.surface,
+          border: `1.5px solid ${accent ? `${theme.accent}66` : theme.border}`,
+          borderRadius: 14,
+          padding: "44px 40px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          fontFamily: theme.fontSans,
+          fontSize: 32,
+          fontWeight: 600,
+          lineHeight: 1.3,
+          letterSpacing: "-0.01em",
+          color: accent ? theme.text : theme.textMuted,
+          boxShadow: accent ? `0 18px 50px ${theme.accent}22` : "0 14px 40px rgba(0,0,0,0.3)",
+        }}
+      >
+        {content}
+      </div>
+    </div>
+  );
+
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        padding: "60px 80px",
+        padding: "0 100px",
       }}
     >
-      <div style={{ display: "flex", width: "100%", height: "100%", maxHeight: 700, alignItems: "stretch", gap: 0 }}>
-        {/* Before panel */}
-        <div
-          style={{
-            flex: 1,
-            opacity: leftOpacity,
-            transform: `translateX(${leftX}px)`,
-            display: "flex",
-            flexDirection: "column",
-            gap: 16,
-          }}
-        >
-          <div
-            style={{
-              fontFamily: theme.fontSans,
-              fontSize: 13,
-              fontWeight: 700,
-              letterSpacing: "0.1em",
-              textTransform: "uppercase",
-              color: theme.textMuted,
-            }}
-          >
-            {scene.before.label}
-          </div>
-          <div
-            style={{
-              flex: 1,
-              background: theme.surface,
-              border: `1.5px solid ${theme.border}`,
-              borderRadius: 10,
-              padding: "24px 28px",
-              fontFamily: theme.fontMono,
-              fontSize: 18,
-              color: theme.textMuted,
-              whiteSpace: "pre-wrap",
-              lineHeight: 1.7,
-              overflow: "hidden",
-            }}
-          >
-            {scene.before.content}
-          </div>
-        </div>
-
-        {/* Divider */}
+      <div style={{ display: "flex", width: "100%", maxWidth: 1500, alignItems: "stretch", gap: 0 }}>
+        <Panel label={scene.before.label} content={scene.before.content} accent={false} opacity={leftOpacity} x={leftX} />
         <div
           style={{
             width: 2,
-            alignSelf: "stretch",
+            alignSelf: "center",
+            height: 200,
             background: theme.border,
-            margin: "36px 32px 0",
+            margin: "44px 36px 0",
             opacity: dividerOpacity,
           }}
         />
-
-        {/* After panel */}
-        <div
-          style={{
-            flex: 1,
-            opacity: rightOpacity,
-            transform: `translateX(${rightX}px)`,
-            display: "flex",
-            flexDirection: "column",
-            gap: 16,
-          }}
-        >
-          <div
-            style={{
-              fontFamily: theme.fontSans,
-              fontSize: 13,
-              fontWeight: 700,
-              letterSpacing: "0.1em",
-              textTransform: "uppercase",
-              color: theme.accent,
-            }}
-          >
-            {scene.after.label}
-          </div>
-          <div
-            style={{
-              flex: 1,
-              background: theme.surface,
-              border: `1.5px solid ${theme.accent}55`,
-              borderRadius: 10,
-              padding: "24px 28px",
-              fontFamily: theme.fontMono,
-              fontSize: 18,
-              color: theme.text,
-              whiteSpace: "pre-wrap",
-              lineHeight: 1.7,
-              overflow: "hidden",
-            }}
-          >
-            {scene.after.content}
-          </div>
-        </div>
+        <Panel label={scene.after.label} content={scene.after.content} accent opacity={rightOpacity} x={rightX} />
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

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

@@ -1,37 +1,32 @@
 import React from "react";
-import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
 import { StatCalloutScene as StatCalloutBrief } from "../../brief";
 import { Theme } from "../../theme";
 import { Label } from "../primitives/Label";
-import { Caption } from "../primitives/Caption";
+import { Stage } from "../primitives/Stage";
 
 interface Props {
   scene: StatCalloutBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
 const HEADLINE_FRAMES = 20;
 const FRAMES_PER_STAT = 35;
 const SNAP_OFFSET = 8;
 
-export const StatCallout: React.FC<Props> = ({ scene, theme }) => {
+export const StatCallout: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, width } = useVideoConfig();
+
+  if (scene.layout === "hero") {
+    return <HeroStat scene={scene} theme={theme} bottomInset={bottomInset} width={width} frame={frame} fps={fps} />;
+  }
 
   const captionStart = HEADLINE_FRAMES + scene.stats.length * FRAMES_PER_STAT + 20;
 
   return (
-    <AbsoluteFill
-      style={{
-        background: theme.bg,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "0 120px",
-        gap: 64,
-      }}
-    >
+    <Stage theme={theme} gap={64} caption={scene.caption} captionStart={captionStart} bottomInset={bottomInset}>
       {scene.headline && (
         <Label text={scene.headline} theme={theme} size="lg" startFrame={0} />
       )}
@@ -71,7 +66,7 @@ export const StatCallout: React.FC<Props> = ({ scene, theme }) => {
                 alignItems: "center",
                 gap: 16,
                 opacity,
-                transform: `scale(${scale})`,
+                scale: String(scale),
               }}
             >
               <div
@@ -104,7 +99,156 @@ export const StatCallout: React.FC<Props> = ({ scene, theme }) => {
         })}
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
-    </AbsoluteFill>
+    </Stage>
+  );
+};
+
+/**
+ * One dominant number, kept in balance. With supporting stats they fill the
+ * opposite side as a substantial column (divided by a thin rule) so the frame
+ * carries weight on both sides instead of stranding the number against an empty
+ * void. Alone, the number is centered and composed so it never sits in a corner.
+ */
+const HeroStat: React.FC<{
+  scene: StatCalloutBrief;
+  theme: Theme;
+  bottomInset: number;
+  width: number;
+  frame: number;
+  fps: number;
+}> = ({ scene, theme, bottomInset, width, frame, fps }) => {
+  const [hero, ...rest] = scene.stats;
+  const hasSecondary = rest.length > 0;
+  const p = spring({ frame: frame + SNAP_OFFSET, fps, config: theme.motion });
+  const valueScale = interpolate(p, [0, 1], [0.6, 1]);
+  const valueOpacity = interpolate(p, [0, 1], [0, 1]);
+  const labelP = spring({ frame: frame - 10 + SNAP_OFFSET, fps, config: theme.motion });
+  const dividerP = spring({ frame: frame - 18 + SNAP_OFFSET, fps, config: theme.motion });
+
+  return (
+    <Stage
+      theme={theme}
+      direction="row"
+      justify={hasSecondary ? "space-between" : "center"}
+      gap={90}
+      padding="0 130px"
+      caption={scene.caption}
+      captionStart={50}
+      bottomInset={bottomInset}
+    >
+      {/* Primary: the dominant number and its label. */}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: hasSecondary ? "flex-start" : "center",
+          maxWidth: hasSecondary ? width * 0.5 : width * 0.78,
+        }}
+      >
+        {scene.headline && (
+          <div style={{ marginBottom: 10 }}>
+            <Label
+              text={scene.headline}
+              theme={theme}
+              size="md"
+              align={hasSecondary ? "left" : "center"}
+              startFrame={0}
+              muted
+            />
+          </div>
+        )}
+        <div
+          style={{
+            fontFamily: theme.fontSans,
+            fontSize: hasSecondary ? width * 0.16 : width * 0.2,
+            fontWeight: 800,
+            color: theme.accent,
+            lineHeight: 0.9,
+            letterSpacing: "-0.05em",
+            opacity: valueOpacity,
+            scale: String(valueScale),
+            transformOrigin: hasSecondary ? "left center" : "center",
+          }}
+        >
+          {hero?.value}
+        </div>
+        {hero?.label && (
+          <div
+            style={{
+              marginTop: 20,
+              fontFamily: theme.fontSans,
+              fontSize: 40,
+              fontWeight: 600,
+              lineHeight: 1.2,
+              color: theme.text,
+              textAlign: hasSecondary ? "left" : "center",
+              maxWidth: hasSecondary ? width * 0.46 : width * 0.66,
+              opacity: interpolate(labelP, [0, 1], [0, 1]),
+              translate: `0 ${interpolate(labelP, [0, 1], [16, 0])}px`,
+            }}
+          >
+            {hero?.label}
+          </div>
+        )}
+      </div>
+
+      {/* Secondary mass: supporting stats fill the opposite side as substantial
+          blocks, balancing the hero number instead of leaving a void. */}
+      {hasSecondary && (
+        <div style={{ display: "flex", alignItems: "stretch", gap: 44 }}>
+          <div
+            style={{
+              width: 2,
+              alignSelf: "stretch",
+              background: theme.border,
+              opacity: interpolate(dividerP, [0, 1], [0, 0.7]),
+              scale: `1 ${interpolate(dividerP, [0, 1], [0, 1])}`,
+              transformOrigin: "top",
+            }}
+          />
+          <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
+            {rest.map((s, i) => {
+              const rp = spring({ frame: frame - 22 - i * 8 + SNAP_OFFSET, fps, config: theme.motion });
+              return (
+                <div
+                  key={i}
+                  style={{
+                    opacity: interpolate(rp, [0, 1], [0, 1]),
+                    translate: `${interpolate(rp, [0, 1], [24, 0])}px 0`,
+                  }}
+                >
+                  <div
+                    style={{
+                      fontFamily: theme.fontSans,
+                      fontSize: 68,
+                      fontWeight: 800,
+                      color: theme.text,
+                      lineHeight: 1,
+                      letterSpacing: "-0.03em",
+                    }}
+                  >
+                    {s.value}
+                  </div>
+                  <div
+                    style={{
+                      marginTop: 8,
+                      fontFamily: theme.fontSans,
+                      fontSize: 30,
+                      fontWeight: 500,
+                      color: theme.textMuted,
+                      maxWidth: width * 0.28,
+                      lineHeight: 1.25,
+                    }}
+                  >
+                    {s.label}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+    </Stage>
   );
 };

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

@@ -4,38 +4,38 @@ import { TerminalScene as TerminalBrief } from "../../brief";
 import { Theme } from "../../theme";
 import { Terminal } from "../primitives/Terminal";
 import { Caption } from "../primitives/Caption";
+import { TERMINAL_FRAMES_PER_CHAR, TERMINAL_FRAMES_PER_LINE, TERMINAL_START, terminalCaptionStart, terminalLines } from "../../timing";
 
 interface Props {
   scene: TerminalBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
-export const TerminalScene: React.FC<Props> = ({ scene, theme }) => {
-  const lines = scene.commands.flatMap((cmd) => [
-    { text: cmd.input, isOutput: false },
-    { text: cmd.output, isOutput: true },
-  ]);
-
-  // Mirror Terminal's timing: startFrame=8, framesPerLine=23, framesPerChar=2.0
-  const terminalDuration = lines.reduce((acc, line) => {
-    return acc + (line.isOutput ? 23 : line.text.length * 2.0 + 23);
-  }, 0);
-  const captionStart = 8 + terminalDuration + 20;
+export const TerminalScene: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
+  const lines = terminalLines(scene);
+  // Timing is shared with the duration oracle so the scene is always long
+  // enough for the caption to appear (see timing.ts).
+  const captionStart = terminalCaptionStart(scene);
 
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         padding: "60px 100px",
       }}
     >
-      <div style={{ width: "100%" }}>
-        <Terminal lines={lines} theme={theme} startFrame={8} />
-      </div>
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      <Terminal
+        lines={lines}
+        theme={theme}
+        startFrame={TERMINAL_START}
+        framesPerLine={TERMINAL_FRAMES_PER_LINE}
+        framesPerChar={TERMINAL_FRAMES_PER_CHAR}
+      />
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

package/template/src/duration.ts

@@ -1,4 +1,5 @@
-import { FeatureListScene, FileTreeScene, HotkeyScene, OSWindowScene, Scene, StatCalloutScene } from "./brief";
+import { BenchmarkScene, ClipScene, CodeRevealScene, FeatureListScene, FileTreeScene, HotkeyScene, OSWindowScene, Scene, StatCalloutScene, TerminalScene } from "./brief";
+import { CAPTION_HOLD, codeRevealCaptionStart, terminalCaptionStart } from "./timing";
 
 // Hard ceiling for the teaser cut: 10s at 30fps. Renders over the limit
 // succeed, but the CLI prints a prominent warning.
@@ -22,11 +23,28 @@ export const SCENE_DURATION_MAP: Record<Scene["type"], number> = {
   mobile: 150,
   "os-window": 180,
   hotkey: 120,
+  hook: 50,
+  clip: 150,
+  benchmark: 180,
 };
 
 export function sceneDuration(scene: Scene): number {
+  if (scene.type === "hook") return 50; // no tail: hook IS the headline, no breathing room needed
+  if (scene.type === "clip") {
+    const s = scene as ClipScene;
+    return (s.durationInFrames ?? SCENE_DURATION_MAP.clip) + SCENE_TAIL;
+  }
   let content: number;
-  if (scene.type === "feature-list") {
+  if (scene.type === "terminal") {
+    // Long enough to type every command out, then show the caption (F7).
+    const s = scene as TerminalScene;
+    const start = terminalCaptionStart(s);
+    content = s.caption ? start + CAPTION_HOLD : start;
+  } else if (scene.type === "code-reveal") {
+    const s = scene as CodeRevealScene;
+    const start = codeRevealCaptionStart(s);
+    content = s.caption ? start + CAPTION_HOLD : start;
+  } else if (scene.type === "feature-list") {
     const s = scene as FeatureListScene;
     content = 20 + s.items.length * 25 + 60;
   } else if (scene.type === "stat-callout") {
@@ -42,6 +60,9 @@ export function sceneDuration(scene: Scene): number {
   } else if (scene.type === "hotkey") {
     const s = scene as HotkeyScene;
     content = 20 + s.keys.length * 20 + 70;
+  } else if (scene.type === "benchmark") {
+    const s = scene as BenchmarkScene;
+    content = 20 + s.bars.length * 30 + 60;
   } else {
     content = SCENE_DURATION_MAP[scene.type];
   }

package/template/src/index.ts

@@ -31,19 +31,21 @@ if (!brief.cuts || !Array.isArray(brief.cuts.main) || brief.cuts.main.length ===
   );
 }
 
-// A vertical platform without cuts.vertical falls back to the main cut.
+// A vertical platform without a (non-empty) cuts.vertical falls back to the main
+// cut. An empty array is treated as absent so it never builds a 0-scene, and
+// therefore 0-frame, composition that Remotion rejects (F3).
 function scenesForCut(cut: "main" | "vertical"): Scene[] {
-  if (cut === "vertical") return brief.cuts.vertical ?? brief.cuts.main;
+  if (cut === "vertical") return brief.cuts.vertical?.length ? brief.cuts.vertical : brief.cuts.main;
   return brief.cuts.main;
 }
 
 const verticalFallback = platformIds.filter(
-  (id) => cutForPlatform(id) === "vertical" && !brief.cuts.vertical
+  (id) => cutForPlatform(id) === "vertical" && !brief.cuts.vertical?.length
 );
 if (verticalFallback.length > 0) {
   console.warn(
-    `reelme: no cuts.vertical in the brief — ${verticalFallback.join(", ")} will render the main cut ` +
-      `letterboxed into 9:16. Author a vertical cut for better results.`
+    `reelme: no cuts.vertical in the brief — ${verticalFallback.join(", ")} will re-render the main cut ` +
+      `at 9:16. Dense wide scenes may cramp — author a vertical cut for better results.`
   );
 }
 

package/template/src/platforms.ts

@@ -34,3 +34,7 @@ export const PLATFORMS = presets as Record<PlatformId, PlatformPreset>;
 export function cutForPlatform(id: PlatformId): "main" | "vertical" {
   return PLATFORMS[id].cut;
 }
+
+export function typeScale(platform: PlatformPreset): number {
+  return platform.height > platform.width ? 1.25 : 1.0;
+}