reelme 0.2.2 → 0.3.0

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

@@ -8,6 +8,7 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: OSWindowBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
 const WINDOW_WIDTH = 600;
@@ -18,7 +19,7 @@ const FRAMES_PER_ITEM = 20;
 
 const TRAFFIC_LIGHTS = ["#ff5f57", "#ffbd2e", "#28c941"] as const;
 
-export const OSWindow: React.FC<Props> = ({ scene, theme }) => {
+export const OSWindow: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -37,7 +38,7 @@ export const OSWindow: React.FC<Props> = ({ scene, theme }) => {
 
   return (
     <AbsoluteFill
-      style={{ background: theme.bg, display: "flex", alignItems: "center", justifyContent: "center" }}
+      style={{ background: "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}
     >
       <div
         style={{
@@ -160,7 +161,7 @@ export const OSWindow: React.FC<Props> = ({ scene, theme }) => {
         </div>
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

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,16 +37,18 @@ 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,
@@ -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,
+        transform: `translateX(${x}px)`,
+        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

@@ -8,22 +8,27 @@ import { Caption } from "../primitives/Caption";
 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,
+        background: "transparent",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -104,7 +109,91 @@ export const StatCallout: React.FC<Props> = ({ scene, theme }) => {
         })}
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
+    </AbsoluteFill>
+  );
+};
+
+/** One dominant number filling the frame; supporting stats sit small below. */
+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 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 });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: "transparent",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        justifyContent: "center",
+        padding: "0 0 0 140px",
+      }}
+    >
+      {scene.headline && (
+        <div style={{ marginBottom: 8 }}>
+          <Label text={scene.headline} theme={theme} size="md" align="left" startFrame={0} muted />
+        </div>
+      )}
+      <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",
+        }}
+      >
+        {hero?.value}
+      </div>
+      {hero?.label && (
+        <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)`,
+          }}
+        >
+          {hero?.label}
+        </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}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

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

@@ -8,9 +8,10 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: TerminalBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
-export const TerminalScene: React.FC<Props> = ({ scene, theme }) => {
+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 },
@@ -25,17 +26,15 @@ export const TerminalScene: React.FC<Props> = ({ scene, theme }) => {
   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={8} />
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

package/template/src/duration.ts

@@ -1,4 +1,4 @@
-import { FeatureListScene, FileTreeScene, HotkeyScene, OSWindowScene, Scene, StatCalloutScene } from "./brief";
+import { BenchmarkScene, ClipScene, FeatureListScene, FileTreeScene, HotkeyScene, OSWindowScene, Scene, StatCalloutScene } from "./brief";
 
 // Hard ceiling for the teaser cut: 10s at 30fps. Renders over the limit
 // succeed, but the CLI prints a prominent warning.
@@ -22,9 +22,17 @@ 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") {
     const s = scene as FeatureListScene;
@@ -42,6 +50,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/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;
+}