reelme 0.2.2 → 0.4.0

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/primitives/Terminal.tsx

@@ -25,6 +25,16 @@ export const Terminal: React.FC<TerminalProps> = ({
   const frame = useCurrentFrame();
   const elapsed = frame - startFrame;
 
+  // Size the window to its widest physical line so a short command doesn't sit
+  // in a huge empty box. Width is fixed from the full text (not the partial
+  // reveal) so it never reflows while typing. Inputs reserve room for "$ ".
+  const maxChars = lines.reduce((max, line) => {
+    const prefix = line.isOutput ? 0 : 2;
+    const widest = line.text.split("\n").reduce((m, l) => Math.max(m, l.length), 0);
+    return Math.max(max, widest + prefix);
+  }, 0);
+  const cols = Math.min(Math.max(maxChars, 18), 78);
+
   const visibleLines: Array<{ text: string; isOutput: boolean; partialText: string }> = [];
 
   let cursor = 0;
@@ -59,6 +69,7 @@ export const Terminal: React.FC<TerminalProps> = ({
         fontFamily: theme.fontMono,
         fontSize: 22,
         boxShadow: "0 8px 48px rgba(0,0,0,0.6)",
+        width: `min(calc(${cols}ch + 48px), 100%)`,
       }}
     >
       <div

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

@@ -0,0 +1,83 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { BenchmarkScene as BenchmarkBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { benchmarkFractions } from "../../benchmark";
+import { Bar } from "../primitives/Bar";
+import { Label } from "../primitives/Label";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: BenchmarkBrief;
+  theme: Theme;
+  bottomInset?: number;
+}
+
+const HEADLINE_FRAMES = 20;
+const FRAMES_PER_BAR = 18;
+
+export const Benchmark: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
+  const fractions = benchmarkFractions(
+    scene.bars.map((b) => b.value),
+    scene.lowerIsBetter
+  );
+  const captionStart = HEADLINE_FRAMES + scene.bars.length * FRAMES_PER_BAR + 30;
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: "transparent",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0 120px",
+        gap: 40,
+      }}
+    >
+      {scene.headline && (
+        <Label text={scene.headline} theme={theme} size="lg" startFrame={0} />
+      )}
+
+      {scene.metric && (
+        <div
+          style={{
+            fontFamily: theme.fontSans,
+            fontSize: 24,
+            color: theme.textMuted,
+            marginTop: -16,
+            letterSpacing: "0.02em",
+          }}
+        >
+          {scene.metric}
+        </div>
+      )}
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 24,
+          width: "100%",
+          maxWidth: 1200,
+        }}
+      >
+        {scene.bars.map((bar, i) => (
+          <Bar
+            key={i}
+            label={bar.label}
+            valueText={bar.display ?? String(bar.value)}
+            fraction={fractions[i]}
+            hero={bar.hero}
+            theme={theme}
+            startFrame={HEADLINE_FRAMES + i * FRAMES_PER_BAR}
+          />
+        ))}
+      </div>
+
+      {scene.caption && (
+        <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />
+      )}
+    </AbsoluteFill>
+  );
+};

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

@@ -7,9 +7,10 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: BrowserBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
-export const BrowserFrame: React.FC<Props> = ({ scene, theme }) => {
+export const BrowserFrame: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -26,7 +27,7 @@ export const BrowserFrame: React.FC<Props> = ({ scene, theme }) => {
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -37,7 +38,7 @@ export const BrowserFrame: React.FC<Props> = ({ scene, theme }) => {
         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",
@@ -133,7 +134,7 @@ export const BrowserFrame: React.FC<Props> = ({ scene, theme }) => {
         </div>
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={60} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={60} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

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

@@ -1,20 +1,27 @@
 import React from "react";
-import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate, Img, staticFile } from "remotion";
-import { CTAScene as CTABrief, ProjectMeta } from "../../brief";
+import { useCurrentFrame, useVideoConfig, spring, interpolate, Img, staticFile } from "remotion";
+import { CTAScene as CTABrief, ProjectMeta, showWatermark } from "../../brief";
 import { Theme } from "../../theme";
-import { Caption } from "../primitives/Caption";
+import { PlatformPreset, typeScale } from "../../platforms";
+import { Stage } from "../primitives/Stage";
+import { Terminal } from "../primitives/Terminal";
+import { Loop } from "../primitives/Loop";
 
 interface Props {
   scene: CTABrief;
   theme: Theme;
   project: ProjectMeta;
+  platform?: PlatformPreset;
+  bottomInset?: number;
 }
 
 const SNAP_OFFSET = 8;
 
-export const CTA: React.FC<Props> = ({ scene, theme, project }) => {
+export const CTA: React.FC<Props> = ({ scene, theme, project, platform, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
+  const scale = platform ? typeScale(platform) : 1.0;
+  const isGif = platform?.output.codec === "gif";
 
   const logoProgress = spring({ frame: frame + SNAP_OFFSET, fps, config: theme.motion });
   const titleProgress = spring({ frame: frame + SNAP_OFFSET - (project.logo ? 16 : 0), fps, config: theme.motion });
@@ -24,79 +31,66 @@ export const CTA: React.FC<Props> = ({ scene, theme, project }) => {
   const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);
   const titleY = interpolate(titleProgress, [0, 1], [24, 0]);
   const cmdOpacity = interpolate(cmdProgress, [0, 1], [0, 1]);
-  const cmdScale = interpolate(cmdProgress, [0, 1], [0.92, 1]);
-  const urlFade = interpolate(urlProgress, [0, 1], [0, 0.7]);
+  const cmdY = interpolate(cmdProgress, [0, 1], [18, 0]);
+  const urlFade = interpolate(urlProgress, [0, 1], [0, 0.65]);
 
   const isAnnouncement = project.mode === "announcement";
   const displayName = isAnnouncement && project.version
     ? `${project.name} ${project.version}`
     : project.name;
 
+  // When the command starts typing inside the terminal: a beat after the title
+  // settles, so the eye lands on the headline first.
+  const termStart = project.logo ? 26 : 16;
+
   return (
-    <AbsoluteFill
-      style={{
-        background: theme.accent,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 32,
-        padding: "0 120px",
-      }}
-    >
+    // Stay on the film's continuous atmosphere stage instead of flooding the
+    // frame with a flat brand field — the end-card belongs to the same shot as
+    // the rest of the reel. Stage's transparent root lets the Atmosphere show.
+    <Stage theme={theme} gap={40} caption={scene.caption} captionStart={60} bottomInset={bottomInset}>
       {project.logo && (
-        <div
-          style={{
-            opacity: interpolate(logoProgress, [0, 1], [0, 1]),
-            transform: `scale(${interpolate(logoProgress, [0, 1], [0.85, 1])})`,
-            background: "#ffffff",
-            borderRadius: 20,
-            padding: 16,
-            boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
-          }}
-        >
-          <Img
-            src={staticFile(project.logo)}
-            style={{ height: 80, width: "auto", objectFit: "contain", display: "block" }}
-          />
-        </div>
+        // A barely-there breathe keeps the end-card's hero alive while it holds,
+        // after the entrance spring has settled. Off for gif (defeats compression).
+        <Loop property="scale" amplitude={0.012} period={4} disabled={isGif}>
+          <div
+            style={{
+              opacity: interpolate(logoProgress, [0, 1], [0, 1]),
+              scale: String(interpolate(logoProgress, [0, 1], [0.85, 1])),
+              background: "#ffffff",
+              borderRadius: 20,
+              padding: 16,
+              boxShadow: "0 12px 40px rgba(0,0,0,0.35)",
+            }}
+          >
+            <Img
+              src={staticFile(project.logo)}
+              style={{ height: 80, width: "auto", objectFit: "contain", display: "block" }}
+            />
+          </div>
+        </Loop>
       )}
 
       <div
         style={{
           opacity: titleOpacity,
-          transform: `translateY(${titleY}px)`,
+          translate: `0 ${titleY}px`,
           fontFamily: theme.fontSans,
-          fontSize: 56,
+          fontSize: 60 * scale,
           fontWeight: 700,
-          color: theme.textInverse,
-          letterSpacing: "-0.02em",
+          color: theme.text,
+          letterSpacing: "-0.03em",
           textAlign: "center",
         }}
       >
         {isAnnouncement ? "" : "Get started with "}
-        <span style={{ color: theme.textInverse, fontWeight: 800 }}>{displayName}</span>
+        <span style={{ color: theme.accent, fontWeight: 800 }}>{displayName}</span>
         {isAnnouncement ? " is here." : ""}
       </div>
 
-      <div
-        style={{
-          opacity: cmdOpacity,
-          transform: `scale(${cmdScale})`,
-          background: theme.bg,
-          border: `1.5px solid rgba(0,0,0,0.12)`,
-          borderRadius: 12,
-          padding: "18px 40px",
-          fontFamily: theme.fontMono,
-          fontSize: 28,
-          color: theme.text,
-          display: "flex",
-          alignItems: "center",
-          gap: 16,
-        }}
-      >
-        <span style={{ color: theme.accent }}>$</span>
-        {scene.installCommand}
+      {/* The install command in the film's own terminal, typed out — consistent
+          with the reel's other terminal scenes instead of a web-style pill. */}
+      <div style={{ opacity: cmdOpacity, translate: `0 ${cmdY}px` }}>
+        <Terminal lines={[{ text: scene.installCommand }]} theme={theme} startFrame={termStart} />
       </div>
 
       {scene.repoUrl && (
@@ -105,14 +99,29 @@ export const CTA: React.FC<Props> = ({ scene, theme, project }) => {
             opacity: urlFade,
             fontFamily: theme.fontMono,
             fontSize: 20,
-            color: theme.textInverse,
+            color: theme.textMuted,
           }}
         >
           {scene.repoUrl}
         </div>
       )}
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={60} />}
-    </AbsoluteFill>
+      {showWatermark(project.watermark) && (
+        <div
+          style={{
+            position: "absolute",
+            bottom: 40 + bottomInset,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            fontFamily: theme.fontMono,
+            fontSize: 18,
+            color: theme.textMuted,
+          }}
+        >
+          made with reelme
+        </div>
+      )}
+    </Stage>
   );
 };

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

@@ -0,0 +1,131 @@
+import React from "react";
+import { AbsoluteFill, OffthreadVideo, staticFile } from "remotion";
+import { Gif } from "@remotion/gif";
+import { ClipScene } from "../../brief";
+import { Theme } from "../../theme";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: ClipScene;
+  theme: Theme;
+  bottomInset?: number;
+}
+
+const isGif = (src: string) => src.endsWith(".gif");
+
+const MediaElement: React.FC<{ scene: ClipScene }> = ({ scene }) => {
+  if (isGif(scene.src)) {
+    return (
+      <Gif
+        src={staticFile(scene.src)}
+        style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        fit="cover"
+      />
+    );
+  }
+  // Stop the source at the requested trim point so the scene's tail doesn't keep
+  // playing past what the brief asked for (F23).
+  const endAt =
+    scene.durationInFrames !== undefined ? (scene.startFrom ?? 0) + scene.durationInFrames : undefined;
+  return (
+    <OffthreadVideo
+      src={staticFile(scene.src)}
+      style={{ width: "100%", height: "100%", objectFit: "cover" }}
+      muted
+      startFrom={scene.startFrom}
+      endAt={endAt}
+    />
+  );
+};
+
+const BrowserChrome: React.FC<{ children: React.ReactNode; theme: Theme }> = ({ children, theme }) => (
+  <div
+    style={{
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      boxShadow: "0 24px 80px rgba(0,0,0,0.6)",
+      borderRadius: 12,
+      overflow: "hidden",
+    }}
+  >
+    <div
+      style={{
+        background: theme.surface,
+        padding: "12px 16px",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        borderBottom: `1px solid ${theme.border}`,
+        flexShrink: 0,
+      }}
+    >
+      {(["#ff5f56", "#ffbd2e", "#27c93f"] as const).map((c) => (
+        <div key={c} style={{ width: 12, height: 12, borderRadius: "50%", background: c }} />
+      ))}
+    </div>
+    <div style={{ flex: 1, overflow: "hidden", position: "relative" }}>{children}</div>
+  </div>
+);
+
+const MobileChrome: React.FC<{ children: React.ReactNode; theme: Theme }> = ({ children, theme }) => (
+  <div
+    style={{
+      width: "100%",
+      height: "100%",
+      borderRadius: 40,
+      border: `3px solid ${theme.border}`,
+      overflow: "hidden",
+      boxShadow: "0 40px 100px rgba(0,0,0,0.55)",
+      position: "relative",
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const Clip: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
+  const renderMedia = () => <MediaElement scene={scene} />;
+
+  if (scene.frame === "browser") {
+    return (
+      <AbsoluteFill
+        style={{
+          background: "transparent",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "60px 120px",
+        }}
+      >
+        <BrowserChrome theme={theme}>{renderMedia()}</BrowserChrome>
+        {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={30} bottomInset={bottomInset} />}
+      </AbsoluteFill>
+    );
+  }
+
+  if (scene.frame === "mobile") {
+    return (
+      <AbsoluteFill
+        style={{
+          background: "transparent",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "40px 200px",
+        }}
+      >
+        <MobileChrome theme={theme}>{renderMedia()}</MobileChrome>
+        {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={30} bottomInset={bottomInset} />}
+      </AbsoluteFill>
+    );
+  }
+
+  return (
+    <AbsoluteFill style={{ background: "transparent", borderRadius: 12, overflow: "hidden" }}>
+      {renderMedia()}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={30} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -4,21 +4,23 @@ import { CodeRevealScene as CodeRevealBrief } from "../../brief";
 import { Theme } from "../../theme";
 import { CodeBlock } from "../primitives/CodeBlock";
 import { Caption } from "../primitives/Caption";
+import { CODE_FRAMES_PER_LINE, CODE_START, codeRevealCaptionStart } from "../../timing";
 
 interface Props {
   scene: CodeRevealBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
-export const CodeReveal: React.FC<Props> = ({ scene, theme }) => {
-  const lines = scene.code.split("\n");
-  // Caption appears after all lines are revealed: startFrame=14, framesPerLine=9, plus 20-frame buffer
-  const captionStart = 14 + lines.length * 9 + 20;
+export const CodeReveal: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
+  // Timing is shared with the duration oracle so the scene lasts long enough for
+  // every line to reveal and the caption to appear (see timing.ts).
+  const captionStart = codeRevealCaptionStart(scene);
 
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -31,11 +33,11 @@ export const CodeReveal: React.FC<Props> = ({ scene, theme }) => {
           language={scene.language}
           highlightLine={scene.highlightLine}
           theme={theme}
-          startFrame={14}
-          framesPerLine={9}
+          startFrame={CODE_START}
+          framesPerLine={CODE_FRAMES_PER_LINE}
         />
       </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/DataFlow.tsx

@@ -8,12 +8,13 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: DataFlowBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
 const NODE_W = 200;
 const NODE_H = 64;
 
-export const DataFlow: React.FC<Props> = ({ scene, theme }) => {
+export const DataFlow: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps, width, height } = useVideoConfig();
 
@@ -38,7 +39,7 @@ export const DataFlow: React.FC<Props> = ({ scene, theme }) => {
   const captionStart = (nodeCount - 1) * STEP + NODE_SETTLE + 20;
 
   return (
-    <AbsoluteFill style={{ background: theme.bg }}>
+    <AbsoluteFill style={{ background: "transparent" }}>
       {/* SVG layer for arrows */}
       <svg width={width} height={height} style={{ position: "absolute", inset: 0 }}>
         {scene.edges.map((edge, i) => {
@@ -87,7 +88,7 @@ export const DataFlow: React.FC<Props> = ({ scene, theme }) => {
               fontWeight: 600,
               color: theme.text,
               opacity,
-              transform: `scale(${scale})`,
+              scale: String(scale),
               boxShadow: `0 4px 24px rgba(0,0,0,0.3)`,
             }}
           >
@@ -96,7 +97,7 @@ export const DataFlow: React.FC<Props> = ({ scene, theme }) => {
         );
       })}
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };