reelme 0.2.0

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

@@ -0,0 +1,166 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { OSWindowScene as OSWindowBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { Icon } from "../primitives/Icon";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: OSWindowBrief;
+  theme: Theme;
+}
+
+const WINDOW_WIDTH = 600;
+const SEARCH_TYPE_START = 18;
+const FRAMES_PER_CHAR = 3;
+const ITEMS_START_OFFSET = 10;
+const FRAMES_PER_ITEM = 20;
+
+const TRAFFIC_LIGHTS = ["#ff5f57", "#ffbd2e", "#28c941"] as const;
+
+export const OSWindow: React.FC<Props> = ({ scene, theme }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const windowProgress = spring({ frame, fps, config: theme.motion });
+  const windowScale = interpolate(windowProgress, [0, 1], [0.88, 1]);
+  const windowOpacity = interpolate(windowProgress, [0, 1], [0, 1]);
+
+  const query = scene.searchQuery ?? "";
+  const charsVisible = Math.max(0, Math.floor((frame - SEARCH_TYPE_START) / FRAMES_PER_CHAR));
+  const typedText = query.slice(0, charsVisible);
+
+  const itemsStart = query
+    ? SEARCH_TYPE_START + query.length * FRAMES_PER_CHAR + ITEMS_START_OFFSET
+    : 20;
+  const captionStart = itemsStart + (scene.items?.length ?? 0) * FRAMES_PER_ITEM + 20;
+
+  return (
+    <AbsoluteFill
+      style={{ background: theme.bg, display: "flex", alignItems: "center", justifyContent: "center" }}
+    >
+      <div
+        style={{
+          width: WINDOW_WIDTH,
+          borderRadius: 14,
+          overflow: "hidden",
+          background: theme.surface,
+          border: `1px solid ${theme.border}`,
+          boxShadow: "0 40px 100px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.05)",
+          transform: `scale(${windowScale})`,
+          opacity: windowOpacity,
+        }}
+      >
+        {/* Title bar */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            padding: "14px 16px",
+            borderBottom: `1px solid ${theme.border}`,
+            position: "relative",
+          }}
+        >
+          <div style={{ display: "flex", gap: 8 }}>
+            {TRAFFIC_LIGHTS.map((color, i) => (
+              <div key={i} style={{ width: 13, height: 13, borderRadius: "50%", background: color }} />
+            ))}
+          </div>
+          {scene.title && (
+            <div
+              style={{
+                position: "absolute",
+                left: "50%",
+                transform: "translateX(-50%)",
+                fontFamily: theme.fontSans,
+                fontSize: 13,
+                fontWeight: 500,
+                color: theme.textMuted,
+                letterSpacing: "0.01em",
+              }}
+            >
+              {scene.title}
+            </div>
+          )}
+        </div>
+
+        {/* Search bar */}
+        {scene.searchQuery !== undefined && (
+          <div style={{ padding: "10px 12px", borderBottom: `1px solid ${theme.border}` }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                background: theme.bg,
+                borderRadius: 8,
+                padding: "8px 12px",
+                border: `1px solid ${theme.border}`,
+              }}
+            >
+              <Icon name="search" size={15} color={theme.textMuted} />
+              <span style={{ fontFamily: theme.fontSans, fontSize: 14, color: typedText ? theme.text : theme.textMuted }}>
+                {typedText || "Search…"}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* Item list */}
+        <div style={{ padding: "6px 0" }}>
+          {(scene.items ?? []).map((item, i) => {
+            const itemStart = itemsStart + i * FRAMES_PER_ITEM;
+            const p = spring({ frame: frame - itemStart, fps, config: theme.motion });
+            const opacity = interpolate(Math.max(0, p), [0, 1], [0, 1]);
+            const tx = interpolate(Math.max(0, p), [0, 1], [-14, 0]);
+
+            return (
+              <div
+                key={i}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  padding: "9px 14px",
+                  background: item.highlighted ? theme.accentMuted : "transparent",
+                  opacity,
+                  transform: `translateX(${tx}px)`,
+                }}
+              >
+                {item.icon && (
+                  <div
+                    style={{
+                      width: 30,
+                      height: 30,
+                      borderRadius: 7,
+                      background: theme.accentMuted,
+                      border: `1px solid ${theme.border}`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0,
+                    }}
+                  >
+                    <Icon name={item.icon} size={15} color={theme.accent} />
+                  </div>
+                )}
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ fontFamily: theme.fontMono, fontSize: 13, fontWeight: 500, color: theme.text }}>
+                    {item.label}
+                  </div>
+                  {item.value && (
+                    <div style={{ fontFamily: theme.fontMono, fontSize: 12, color: theme.textMuted, marginTop: 2 }}>
+                      {item.value}
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,105 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { ProblemScene as ProblemBrief, ProjectMeta } from "../../brief";
+import { Theme } from "../../theme";
+import { Label } from "../primitives/Label";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: ProblemBrief;
+  theme: Theme;
+  project: ProjectMeta;
+}
+
+const SNAP_OFFSET = 8;
+
+export const Problem: React.FC<Props> = ({ scene, theme, project }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const isAnnouncement = project.mode === "announcement" && project.version;
+  const isHero = !!scene.hero;
+
+  const accentBarProgress = spring({ frame: frame + SNAP_OFFSET, fps, config: theme.motion });
+  const accentBarWidth = interpolate(accentBarProgress, [0, 1], [0, isHero ? 120 : 80]);
+
+  const badgeProgress = spring({ frame: frame + SNAP_OFFSET, fps, config: theme.motion });
+  const badgeOpacity = interpolate(badgeProgress, [0, 1], [0, 1]);
+  const badgeY = interpolate(badgeProgress, [0, 1], [12, 0]);
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: theme.bg,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: isHero ? "0 80px" : "0 120px",
+        gap: isHero ? 40 : 32,
+      }}
+    >
+      {isAnnouncement ? (
+        <div
+          style={{
+            opacity: badgeOpacity,
+            transform: `translateY(${badgeY}px)`,
+            background: theme.accentMuted,
+            border: `1.5px solid ${theme.accent}`,
+            borderRadius: 999,
+            padding: "6px 20px",
+            fontFamily: theme.fontMono,
+            fontSize: 18,
+            fontWeight: 600,
+            color: theme.accent,
+            letterSpacing: "0.02em",
+          }}
+        >
+          {project.name} {project.version}
+        </div>
+      ) : (
+        <div
+          style={{
+            width: accentBarWidth,
+            height: isHero ? 6 : 4,
+            background: theme.accent,
+            borderRadius: 3,
+          }}
+        />
+      )}
+
+      {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>
+      ) : (
+        <>
+          <Label text={scene.headline} theme={theme} size="xl" startFrame={4} />
+          {scene.subtext && (
+            <Label text={scene.subtext} theme={theme} size="md" muted startFrame={16} />
+          )}
+        </>
+      )}
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={40} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,136 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { SplitScene as SplitBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: SplitBrief;
+  theme: Theme;
+}
+
+export const SplitComparison: React.FC<Props> = ({ scene, theme }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const leftProgress = spring({ frame, fps, config: theme.motion });
+  const rightProgress = spring({ frame: frame - 12, fps, config: theme.motion });
+  const dividerProgress = spring({ frame: frame - 6, fps, config: theme.motion });
+
+  const leftOpacity = interpolate(Math.max(0, leftProgress), [0, 1], [0, 1]);
+  const leftX = interpolate(Math.max(0, leftProgress), [0, 1], [-60, 0]);
+  const rightOpacity = interpolate(Math.max(0, rightProgress), [0, 1], [0, 1]);
+  const rightX = interpolate(Math.max(0, rightProgress), [0, 1], [60, 0]);
+  const dividerOpacity = interpolate(Math.max(0, dividerProgress), [0, 1], [0, 1]);
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: theme.bg,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "60px 80px",
+      }}
+    >
+      <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={{
+            width: 2,
+            alignSelf: "stretch",
+            background: theme.border,
+            margin: "36px 32px 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>
+      </div>
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,110 @@
+import React from "react";
+import { AbsoluteFill, 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";
+
+interface Props {
+  scene: StatCalloutBrief;
+  theme: Theme;
+}
+
+const HEADLINE_FRAMES = 20;
+const FRAMES_PER_STAT = 35;
+const SNAP_OFFSET = 8;
+
+export const StatCallout: React.FC<Props> = ({ scene, theme }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  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,
+      }}
+    >
+      {scene.headline && (
+        <Label text={scene.headline} theme={theme} size="lg" startFrame={0} />
+      )}
+
+      <div
+        style={{
+          display: "flex",
+          gap: 80,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {scene.stats.map((stat, i) => {
+          const statStart = HEADLINE_FRAMES + i * FRAMES_PER_STAT;
+          const progress = spring({
+            frame: frame - statStart + SNAP_OFFSET,
+            fps,
+            config: theme.motion,
+          });
+          const opacity = interpolate(Math.max(0, progress), [0, 1], [0, 1]);
+          const scale = interpolate(Math.max(0, progress), [0, 1], [0.4, 1]);
+
+          const labelStart = statStart + 12;
+          const labelProgress = spring({
+            frame: frame - labelStart + SNAP_OFFSET,
+            fps,
+            config: theme.motion,
+          });
+          const labelOpacity = interpolate(Math.max(0, labelProgress), [0, 1], [0, 1]);
+
+          return (
+            <div
+              key={i}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 16,
+                opacity,
+                transform: `scale(${scale})`,
+              }}
+            >
+              <div
+                style={{
+                  fontFamily: theme.fontSans,
+                  fontSize: 96,
+                  fontWeight: 800,
+                  color: theme.accent,
+                  lineHeight: 1,
+                  letterSpacing: "-0.04em",
+                }}
+              >
+                {stat.value}
+              </div>
+              <div
+                style={{
+                  fontFamily: theme.fontSans,
+                  fontSize: 22,
+                  fontWeight: 500,
+                  color: theme.textMuted,
+                  opacity: labelOpacity,
+                  letterSpacing: "0.04em",
+                  textTransform: "uppercase",
+                }}
+              >
+                {stat.label}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { TerminalScene as TerminalBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { Terminal } from "../primitives/Terminal";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: TerminalBrief;
+  theme: Theme;
+}
+
+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;
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: theme.bg,
+        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} />}
+    </AbsoluteFill>
+  );
+};

package/template/src/duration.ts

@@ -0,0 +1,55 @@
+import { 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.
+export const TEASER_MAX_FRAMES = 300;
+
+// Frames appended after each scene's content animation settles.
+// Gives content time to breathe and provides room for the fade-out.
+export const SCENE_TAIL = 30;
+
+export const SCENE_DURATION_MAP: Record<Scene["type"], number> = {
+  problem: 120,
+  "code-reveal": 165,
+  terminal: 150,
+  "data-flow": 200,
+  cta: 120,
+  browser: 150,
+  split: 165,
+  "feature-list": 180,
+  "stat-callout": 180,
+  "file-tree": 200,
+  mobile: 150,
+  "os-window": 180,
+  hotkey: 120,
+};
+
+export function sceneDuration(scene: Scene): number {
+  let content: number;
+  if (scene.type === "feature-list") {
+    const s = scene as FeatureListScene;
+    content = 20 + s.items.length * 25 + 60;
+  } else if (scene.type === "stat-callout") {
+    const s = scene as StatCalloutScene;
+    content = 20 + s.stats.length * 35 + 60;
+  } else if (scene.type === "file-tree") {
+    const s = scene as FileTreeScene;
+    content = 20 + s.entries.length * 20 + 60;
+  } else if (scene.type === "os-window") {
+    const s = scene as OSWindowScene;
+    const searchDuration = s.searchQuery ? s.searchQuery.length * 3 + 10 : 0;
+    content = 20 + searchDuration + (s.items?.length ?? 0) * 20 + 60;
+  } else if (scene.type === "hotkey") {
+    const s = scene as HotkeyScene;
+    content = 20 + s.keys.length * 20 + 70;
+  } else {
+    content = SCENE_DURATION_MAP[scene.type];
+  }
+  return content + SCENE_TAIL;
+}
+
+// Duration is computed per cut: callers pass the scene list of the chosen cut
+// (cuts.main, cuts.vertical, or cuts.teaser).
+export function calcTotalDuration(scenes: Scene[]): number {
+  return scenes.reduce((sum, scene) => sum + sceneDuration(scene), 0);
+}

package/template/src/fonts.ts

@@ -0,0 +1,49 @@
+import { loadFont as loadInter, fontFamily as inter } from "@remotion/google-fonts/Inter";
+import { loadFont as loadSpaceGrotesk, fontFamily as spaceGrotesk } from "@remotion/google-fonts/SpaceGrotesk";
+import { loadFont as loadDMSans, fontFamily as dmSans } from "@remotion/google-fonts/DMSans";
+import { loadFont as loadSyne, fontFamily as syne } from "@remotion/google-fonts/Syne";
+import { loadFont as loadPlusJakartaSans, fontFamily as plusJakartaSans } from "@remotion/google-fonts/PlusJakartaSans";
+import { loadFont as loadNunito, fontFamily as nunito } from "@remotion/google-fonts/Nunito";
+import { loadFont as loadIBMPlexSans, fontFamily as ibmPlexSans } from "@remotion/google-fonts/IBMPlexSans";
+import { loadFont as loadJetBrainsMono, fontFamily as jetBrainsMono } from "@remotion/google-fonts/JetBrainsMono";
+import { loadFont as loadSpaceMono, fontFamily as spaceMono } from "@remotion/google-fonts/SpaceMono";
+
+loadInter();
+loadSpaceGrotesk();
+loadDMSans();
+loadSyne();
+loadPlusJakartaSans();
+loadNunito();
+loadIBMPlexSans();
+loadJetBrainsMono();
+loadSpaceMono();
+
+export const SANS_FONTS: Record<string, string> = {
+  inter,
+  "space-grotesk": spaceGrotesk,
+  "dm-sans": dmSans,
+  syne,
+  "plus-jakarta-sans": plusJakartaSans,
+  nunito,
+  "ibm-plex-sans": ibmPlexSans,
+};
+
+export const MONO_FONTS: Record<string, string> = {
+  "jetbrains-mono": jetBrainsMono,
+  "space-mono": spaceMono,
+};
+
+export const DEFAULT_SANS = inter;
+export const DEFAULT_MONO = jetBrainsMono;
+
+export function resolveSansFont(name?: string): string {
+  if (!name) return DEFAULT_SANS;
+  const key = name.toLowerCase().replace(/\s+/g, "-");
+  return SANS_FONTS[key] ?? DEFAULT_SANS;
+}
+
+export function resolveMonoFont(name?: string): string {
+  if (!name) return DEFAULT_MONO;
+  const key = name.toLowerCase().replace(/\s+/g, "-");
+  return MONO_FONTS[key] ?? DEFAULT_MONO;
+}