reelme 0.3.0 → 0.4.0

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

@@ -1,9 +1,9 @@
 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;
@@ -26,17 +26,7 @@ export const StatCallout: React.FC<Props> = ({ scene, theme, bottomInset = 0 })
   const captionStart = HEADLINE_FRAMES + scene.stats.length * FRAMES_PER_STAT + 20;
 
   return (
-    <AbsoluteFill
-      style={{
-        background: "transparent",
-        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} />
       )}
@@ -76,7 +66,7 @@ export const StatCallout: React.FC<Props> = ({ scene, theme, bottomInset = 0 })
                 alignItems: "center",
                 gap: 16,
                 opacity,
-                transform: `scale(${scale})`,
+                scale: String(scale),
               }}
             >
               <div
@@ -109,12 +99,16 @@ export const StatCallout: React.FC<Props> = ({ scene, theme, bottomInset = 0 })
         })}
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
-    </AbsoluteFill>
+    </Stage>
   );
 };
 
-/** One dominant number filling the frame; supporting stats sit small below. */
+/**
+ * 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;
@@ -124,76 +118,137 @@ const HeroStat: React.FC<{
   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 (
-    <AbsoluteFill
-      style={{
-        background: "transparent",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        padding: "0 0 0 140px",
-      }}
+    <Stage
+      theme={theme}
+      direction="row"
+      justify={hasSecondary ? "space-between" : "center"}
+      gap={90}
+      padding="0 130px"
+      caption={scene.caption}
+      captionStart={50}
+      bottomInset={bottomInset}
     >
-      {scene.headline && (
-        <div style={{ marginBottom: 8 }}>
-          <Label text={scene.headline} theme={theme} size="md" align="left" startFrame={0} muted />
-        </div>
-      )}
+      {/* Primary: the dominant number and its label. */}
       <div
         style={{
-          fontFamily: theme.fontSans,
-          fontSize: width * 0.2,
-          fontWeight: 800,
-          color: theme.accent,
-          lineHeight: 0.92,
-          letterSpacing: "-0.05em",
-          opacity: valueOpacity,
-          transform: `scale(${valueScale})`,
-          transformOrigin: "left center",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: hasSecondary ? "flex-start" : "center",
+          maxWidth: hasSecondary ? width * 0.5 : width * 0.78,
         }}
       >
-        {hero?.value}
-      </div>
-      {hero?.label && (
+        {scene.headline && (
+          <div style={{ marginBottom: 10 }}>
+            <Label
+              text={scene.headline}
+              theme={theme}
+              size="md"
+              align={hasSecondary ? "left" : "center"}
+              startFrame={0}
+              muted
+            />
+          </div>
+        )}
         <div
           style={{
-            marginTop: 18,
             fontFamily: theme.fontSans,
-            fontSize: 34,
-            fontWeight: 600,
-            color: theme.text,
-            maxWidth: width * 0.6,
-            opacity: interpolate(labelP, [0, 1], [0, 1]),
-            transform: `translateY(${interpolate(labelP, [0, 1], [16, 0])}px)`,
+            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?.label}
+          {hero?.value}
         </div>
-      )}
-      {rest.length > 0 && (
-        <div style={{ display: "flex", gap: 56, marginTop: 48 }}>
-          {rest.map((s, i) => {
-            const rp = spring({ frame: frame - 24 - i * 8 + SNAP_OFFSET, fps, config: theme.motion });
-            return (
-              <div key={i} style={{ opacity: interpolate(rp, [0, 1], [0, 1]) }}>
-                <div style={{ fontFamily: theme.fontSans, fontSize: 44, fontWeight: 800, color: theme.text, letterSpacing: "-0.03em" }}>
-                  {s.value}
-                </div>
-                <div style={{ fontFamily: theme.fontSans, fontSize: 18, fontWeight: 500, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.04em" }}>
-                  {s.label}
+        {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>
         </div>
       )}
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} bottomInset={bottomInset} />}
-    </AbsoluteFill>
+
+    </Stage>
   );
 };

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

@@ -4,6 +4,7 @@ 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;
@@ -12,16 +13,10 @@ interface Props {
 }
 
 export const TerminalScene: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
-  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;
+  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
@@ -33,7 +28,13 @@ export const TerminalScene: React.FC<Props> = ({ scene, theme, bottomInset = 0 }
         padding: "60px 100px",
       }}
     >
-      <Terminal lines={lines} theme={theme} startFrame={8} />
+      <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 { BenchmarkScene, ClipScene, 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.
@@ -34,7 +35,16 @@ export function sceneDuration(scene: Scene): number {
     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") {

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/timing.ts

@@ -0,0 +1,49 @@
+// Shared reveal timing for the two content-length-driven scenes. The duration
+// oracle (duration.ts) and the components used to each re-implement this math,
+// so they drifted: a long terminal or code block overran its fixed scene length
+// and its caption never rendered (F7). Both now import from here, so the scene
+// is always long enough for its own content plus its caption.
+
+import { CodeRevealScene, TerminalScene } from "./brief";
+
+export const TERMINAL_START = 8;
+export const TERMINAL_FRAMES_PER_LINE = 23;
+export const TERMINAL_FRAMES_PER_CHAR = 2.0;
+
+export const CODE_START = 14;
+export const CODE_FRAMES_PER_LINE = 9;
+
+// Frames after the caption's start for it to spring in and be read before the
+// scene's tail fade begins.
+export const CAPTION_HOLD = 40;
+
+export function terminalLines(scene: TerminalScene): Array<{ text: string; isOutput: boolean }> {
+  return scene.commands.flatMap((cmd) => [
+    { text: cmd.input, isOutput: false },
+    { text: cmd.output, isOutput: true },
+  ]);
+}
+
+// Frames until the last character of the last command has typed out.
+export function terminalContentFrames(scene: TerminalScene): number {
+  return terminalLines(scene).reduce(
+    (acc, line) =>
+      acc +
+      (line.isOutput
+        ? TERMINAL_FRAMES_PER_LINE
+        : line.text.length * TERMINAL_FRAMES_PER_CHAR + TERMINAL_FRAMES_PER_LINE),
+    0
+  );
+}
+
+export function terminalCaptionStart(scene: TerminalScene): number {
+  return TERMINAL_START + terminalContentFrames(scene) + 20;
+}
+
+export function codeLineCount(scene: CodeRevealScene): number {
+  return scene.code.split("\n").length;
+}
+
+export function codeRevealCaptionStart(scene: CodeRevealScene): number {
+  return CODE_START + codeLineCount(scene) * CODE_FRAMES_PER_LINE + 20;
+}