reelme 0.2.0

package/template/pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+packages:
+  - '.'
+allowBuilds:
+  esbuild: true

package/template/remotion.config.ts

@@ -0,0 +1,4 @@
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);

package/template/src/Root.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { AbsoluteFill, Sequence, useCurrentFrame, interpolate } from "remotion";
+import { Brief, ProjectMeta, Scene } from "./brief";
+import { PlatformPreset } from "./platforms";
+import { buildTheme } from "./theme";
+import { sceneDuration } from "./duration";
+import "./fonts";
+import { Problem } from "./components/scenes/Problem";
+import { CodeReveal } from "./components/scenes/CodeReveal";
+import { TerminalScene } from "./components/scenes/TerminalScene";
+import { DataFlow } from "./components/scenes/DataFlow";
+import { CTA } from "./components/scenes/CTA";
+import { BrowserFrame } from "./components/scenes/BrowserFrame";
+import { SplitComparison } from "./components/scenes/SplitComparison";
+import { FeatureList } from "./components/scenes/FeatureList";
+import { StatCallout } from "./components/scenes/StatCallout";
+import { FileTree } from "./components/scenes/FileTree";
+import { MobileScreen } from "./components/scenes/MobileScreen";
+import { OSWindow } from "./components/scenes/OSWindowScene";
+import { Hotkey } from "./components/scenes/HotkeyScene";
+
+const FADE_IN = 12;
+const FADE_OUT = 15;
+
+const TransitionEnvelope: React.FC<{
+  durationInFrames: number;
+  transition: "fade" | "slide" | "zoom";
+  children: React.ReactNode;
+}> = ({ durationInFrames, transition, children }) => {
+  const frame = useCurrentFrame();
+  const keys = [0, FADE_IN, durationInFrames - FADE_OUT, durationInFrames];
+  const opts = { extrapolateLeft: "clamp" as const, extrapolateRight: "clamp" as const };
+
+  const opacity = interpolate(frame, keys, [0, 1, 1, 0], opts);
+
+  if (transition === "slide") {
+    const translateY = interpolate(frame, keys, [30, 0, 0, -30], opts);
+    return <AbsoluteFill style={{ opacity, transform: `translateY(${translateY}px)` }}>{children}</AbsoluteFill>;
+  }
+
+  if (transition === "zoom") {
+    const scale = interpolate(frame, keys, [0.95, 1, 1, 1.04], opts);
+    return <AbsoluteFill style={{ opacity, transform: `scale(${scale})` }}>{children}</AbsoluteFill>;
+  }
+
+  return <AbsoluteFill style={{ opacity }}>{children}</AbsoluteFill>;
+};
+
+interface ReelProps {
+  brief: Brief;
+  /** The platform preset of the composition being rendered. */
+  platform: PlatformPreset;
+  /** When "teaser", sequence cuts.teaser instead of the platform-resolved cut. */
+  cut?: "teaser";
+}
+
+export const Reel: React.FC<ReelProps> = ({ brief, platform, cut }) => {
+  const theme = buildTheme(brief.project.primaryColor || "#6366f1", brief.project.font, brief.project.monoFont, brief.project.tone, brief.project.bgStyle);
+
+  // Cut selection: teaser when requested, otherwise the cut named by the
+  // platform preset, falling back to main when vertical is absent.
+  const scenes: Scene[] =
+    cut === "teaser"
+      ? brief.cuts.teaser ?? []
+      : platform.cut === "vertical"
+        ? brief.cuts.vertical ?? brief.cuts.main
+        : brief.cuts.main;
+
+  let cursor = 0;
+  const sequenced = scenes.map((scene) => {
+    const from = cursor;
+    const duration = sceneDuration(scene);
+    cursor += duration;
+    return { scene, from, duration };
+  });
+
+  return (
+    <AbsoluteFill style={{ background: theme.bg }}>
+      {sequenced.map(({ scene, from, duration }, i) => (
+        <Sequence key={i} from={from} durationInFrames={duration}>
+          <TransitionEnvelope durationInFrames={duration} transition={brief.project.transition ?? "fade"}>
+            <SceneRenderer scene={scene} theme={theme} project={brief.project} />
+          </TransitionEnvelope>
+        </Sequence>
+      ))}
+    </AbsoluteFill>
+  );
+};
+
+interface SceneRendererProps {
+  scene: Scene;
+  theme: ReturnType<typeof buildTheme>;
+  project: ProjectMeta;
+}
+
+const SceneRenderer: React.FC<SceneRendererProps> = ({ scene, theme, project }) => {
+  switch (scene.type) {
+    case "problem":
+      return <Problem scene={scene} theme={theme} project={project} />;
+    case "code-reveal":
+      return <CodeReveal scene={scene} theme={theme} />;
+    case "terminal":
+      return <TerminalScene scene={scene} theme={theme} />;
+    case "data-flow":
+      return <DataFlow scene={scene} theme={theme} />;
+    case "cta":
+      return <CTA scene={scene} theme={theme} project={project} />;
+    case "browser":
+      return <BrowserFrame scene={scene} theme={theme} />;
+    case "split":
+      return <SplitComparison scene={scene} theme={theme} />;
+    case "feature-list":
+      return <FeatureList scene={scene} theme={theme} />;
+    case "stat-callout":
+      return <StatCallout scene={scene} theme={theme} />;
+    case "file-tree":
+      return <FileTree scene={scene} theme={theme} />;
+    case "mobile":
+      return <MobileScreen scene={scene} theme={theme} />;
+    case "os-window":
+      return <OSWindow scene={scene} theme={theme} />;
+    case "hotkey":
+      return <Hotkey scene={scene} theme={theme} />;
+    default:
+      return null;
+  }
+};

package/template/src/brief.json

@@ -0,0 +1,131 @@
+{
+  "schemaVersion": 2,
+  "project": {
+    "name": "Sprout",
+    "tagline": "Full-stack apps. Zero config.",
+    "problem": "Starting a full-stack project wastes days on setup before a line of product code.",
+    "installCommand": "npx create-sprout-app my-app",
+    "repoUrl": "github.com/sproutjs/sprout",
+    "primaryColor": "#10b981",
+    "tone": "playful",
+    "mode": "intro",
+    "bgStyle": "branded",
+    "platforms": ["x", "tiktok", "github-readme"]
+  },
+  "cuts": {
+    "main": [
+      {
+        "type": "problem",
+        "headline": "Every new project starts the same way.",
+        "hero": true,
+        "caption": "Config files. Boilerplate. Hours gone before a line of product code."
+      },
+      {
+        "type": "terminal",
+        "commands": [
+          {
+            "input": "npx create-sprout-app my-app",
+            "output": "✔ Framework  Next.js 15\n✔ Database   PostgreSQL + Prisma\n✔ Auth       NextAuth v5\n✔ Styles     Tailwind CSS\n\nCreating project..."
+          },
+          {
+            "input": "cd my-app && pnpm dev",
+            "output": "  ▲ Sprout ready in 0.6s\n  ➜ Local:   http://localhost:3000\n  ➜ Studio:  http://localhost:5555"
+          }
+        ],
+        "caption": "One command. Production stack. Under 60 seconds."
+      },
+      {
+        "type": "file-tree",
+        "headline": "A structure that scales.",
+        "entries": [
+          { "path": "src/app/", "type": "dir", "highlight": true },
+          { "path": "src/app/(auth)/login/page.tsx", "type": "file" },
+          { "path": "src/app/dashboard/page.tsx", "type": "file", "highlight": true },
+          { "path": "src/server/routers/", "type": "dir", "highlight": true },
+          { "path": "src/server/routers/user.ts", "type": "file" },
+          { "path": "prisma/schema.prisma", "type": "file", "highlight": true },
+          { "path": "sprout.config.ts", "type": "file" }
+        ],
+        "caption": "Convention over configuration. Every folder has a job."
+      },
+      {
+        "type": "code-reveal",
+        "language": "typescript",
+        "code": "// src/server/routers/user.ts\nexport const userRouter = router({\n  profile: protectedProcedure\n    .input(z.object({ id: z.string() }))\n    .query(async ({ input, ctx }) => {\n      return ctx.db.user.findUnique({\n        where: { id: input.id },\n        select: { name: true, email: true }\n      });\n    })\n});",
+        "highlightLine": 3,
+        "caption": "End-to-end type safety. No schema drift, no runtime surprises."
+      },
+      {
+        "type": "os-window",
+        "title": "Sprout Commands",
+        "searchQuery": "sprout",
+        "items": [
+          { "icon": "play", "label": "sprout dev", "value": "Start dev server + Prisma Studio", "highlighted": true },
+          { "icon": "database", "label": "sprout db:push", "value": "Sync schema to database" },
+          { "icon": "user-check", "label": "sprout auth:setup", "value": "Configure OAuth providers" },
+          { "icon": "package", "label": "sprout add", "value": "Add a feature module" },
+          { "icon": "rocket", "label": "sprout deploy", "value": "Deploy to Vercel, Railway, or Fly" }
+        ],
+        "caption": "Every task is one command away."
+      },
+      {
+        "type": "hotkey",
+        "keys": ["⌘", "Shift", "P"],
+        "action": "Open Sprout command palette",
+        "caption": "VS Code extension included — no context switching."
+      },
+      {
+        "type": "feature-list",
+        "headline": "Built for teams who ship",
+        "items": [
+          { "text": "Type-safe API layer with tRPC out of the box", "icon": "shield" },
+          { "text": "Auth in one command — email, GitHub, Google", "icon": "lock" },
+          { "text": "Database ORM with auto-generated migrations", "icon": "database" },
+          { "text": "CI/CD templates for GitHub Actions baked in", "icon": "git-branch" },
+          { "text": "One-click deploy to Vercel, Fly, or Railway", "icon": "rocket" }
+        ],
+        "caption": "Start building features on day one."
+      },
+      {
+        "type": "cta",
+        "installCommand": "npx create-sprout-app my-app",
+        "repoUrl": "github.com/sproutjs/sprout",
+        "caption": "Less setup. More shipping."
+      }
+    ],
+    "vertical": [
+      {
+        "type": "problem",
+        "headline": "Every new project starts the same way.",
+        "hero": true,
+        "caption": "Hours gone before a line of product code."
+      },
+      {
+        "type": "terminal",
+        "commands": [
+          {
+            "input": "npx create-sprout-app my-app",
+            "output": "✔ Framework  Next.js 15\n✔ Database   PostgreSQL + Prisma\n✔ Auth       NextAuth v5\n\nCreating project..."
+          }
+        ],
+        "caption": "One command. Production stack."
+      },
+      {
+        "type": "feature-list",
+        "headline": "Built for teams who ship",
+        "items": [
+          { "text": "Type-safe API layer out of the box", "icon": "shield" },
+          { "text": "Auth in one command", "icon": "lock" },
+          { "text": "One-click deploy", "icon": "rocket" }
+        ],
+        "caption": "Start building on day one."
+      },
+      {
+        "type": "cta",
+        "installCommand": "npx create-sprout-app my-app",
+        "repoUrl": "github.com/sproutjs/sprout",
+        "caption": "Less setup. More shipping."
+      }
+    ]
+  }
+}

package/template/src/brief.ts

@@ -0,0 +1,195 @@
+import { PlatformId } from "./platforms";
+
+// Brief schema version. Bump on breaking changes to the reelme.json contract;
+// the CLI refuses briefs whose schemaVersion doesn't match.
+export const BRIEF_SCHEMA_VERSION = 2;
+
+export interface ProjectMeta {
+  name: string;
+  tagline: string;
+  problem: string;
+  installCommand: string;
+  repoUrl: string;
+  primaryColor: string;
+  tone: "professional" | "playful" | "technical";
+  /** Publishing targets; required, at least one. Presets derive dimensions. */
+  platforms: PlatformId[];
+  /** Bundled CC0 track selection; false disables audio. (Playback lands in Phase 2.) */
+  audio?: { track: string; volume?: number } | false;
+  /** "made with reelme" credit in the CTA footer; default true. (Rendering lands in Phase 2.) */
+  watermark?: boolean;
+  mode?: "intro" | "announcement";
+  version?: string;
+  logo?: string;
+  font?: string;
+  monoFont?: string;
+  transition?: "fade" | "slide" | "zoom";
+  bgStyle?: "deep" | "branded" | "light";
+}
+
+export interface ProblemScene {
+  type: "problem";
+  headline: string;
+  subtext?: string;
+  caption?: string;
+  hero?: boolean;
+}
+
+export interface CodeRevealScene {
+  type: "code-reveal";
+  language: string;
+  code: string;
+  highlightLine?: number;
+  caption?: string;
+}
+
+export interface TerminalCommand {
+  input: string;
+  output: string;
+}
+
+export interface TerminalScene {
+  type: "terminal";
+  commands: TerminalCommand[];
+  caption?: string;
+}
+
+export interface DataFlowNode {
+  id: string;
+  label: string;
+}
+
+export interface DataFlowEdge {
+  from: string;
+  to: string;
+  label?: string;
+}
+
+export interface DataFlowScene {
+  type: "data-flow";
+  nodes: DataFlowNode[];
+  edges: DataFlowEdge[];
+  caption?: string;
+}
+
+export interface CTAScene {
+  type: "cta";
+  installCommand: string;
+  repoUrl: string;
+  caption?: string;
+}
+
+export interface BrowserScene {
+  type: "browser";
+  url: string;
+  image?: string;
+  caption?: string;
+}
+
+export interface SplitPanel {
+  label: string;
+  content: string;
+}
+
+export interface SplitScene {
+  type: "split";
+  before: SplitPanel;
+  after: SplitPanel;
+  caption?: string;
+}
+
+export interface FeatureItem {
+  text: string;
+  icon?: string;
+}
+
+export interface FeatureListScene {
+  type: "feature-list";
+  headline?: string;
+  items: Array<string | FeatureItem>;
+  caption?: string;
+}
+
+export interface StatItem {
+  value: string;
+  label: string;
+}
+
+export interface StatCalloutScene {
+  type: "stat-callout";
+  headline?: string;
+  stats: StatItem[];
+  caption?: string;
+}
+
+export interface FileTreeEntry {
+  path: string;
+  type?: "file" | "dir";
+  highlight?: boolean;
+}
+
+export interface FileTreeScene {
+  type: "file-tree";
+  headline?: string;
+  entries: FileTreeEntry[];
+  caption?: string;
+}
+
+export interface MobileScene {
+  type: "mobile";
+  title?: string;
+  image?: string;
+  caption?: string;
+}
+
+export interface OSWindowItem {
+  icon?: string;
+  label: string;
+  value?: string;
+  highlighted?: boolean;
+}
+
+export interface OSWindowScene {
+  type: "os-window";
+  title?: string;
+  searchQuery?: string;
+  items: OSWindowItem[];
+  caption?: string;
+}
+
+export interface HotkeyScene {
+  type: "hotkey";
+  keys: string[];
+  action?: string;
+  caption?: string;
+}
+
+export type Scene =
+  | ProblemScene
+  | CodeRevealScene
+  | TerminalScene
+  | DataFlowScene
+  | CTAScene
+  | BrowserScene
+  | SplitScene
+  | FeatureListScene
+  | StatCalloutScene
+  | FileTreeScene
+  | MobileScene
+  | OSWindowScene
+  | HotkeyScene;
+
+export interface Cuts {
+  /** The full narrative arc. Always required. */
+  main: Scene[];
+  /** Hook-first, fewer scenes, less text per second. For 9:16 platforms. */
+  vertical?: Scene[];
+  /** ≤10s (300 frames at 30fps), hook + CTA. Rendered per social platform. */
+  teaser?: Scene[];
+}
+
+export interface Brief {
+  schemaVersion: number;
+  project: ProjectMeta;
+  cuts: Cuts;
+}

package/template/src/components/primitives/Arrow.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { Theme } from "../../theme";
+
+interface ArrowProps {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  label?: string;
+  theme: Theme;
+  startFrame?: number;
+}
+
+const ARROW_HEAD_SIZE = 10;
+
+export const Arrow: React.FC<ArrowProps> = ({ x1, y1, x2, y2, label, theme, startFrame = 0 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const elapsed = frame - startFrame;
+
+  const progress = spring({ frame: elapsed, fps, config: theme.motion });
+
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  const angleRad = Math.atan2(dy, dx);
+  const angleDeg = (angleRad * 180) / Math.PI;
+  const midX = (x1 + x2) / 2;
+  const midY = (y1 + y2) / 2;
+
+  // Shorten the line so it doesn't peek out behind the arrowhead
+  const x2short = x2 - Math.cos(angleRad) * ARROW_HEAD_SIZE;
+  const y2short = y2 - Math.sin(angleRad) * ARROW_HEAD_SIZE;
+
+  const dashOffset = interpolate(progress, [0, 1], [len, 0]);
+
+  // Arrowhead appears only in the last 15% of the draw animation
+  const headOpacity = interpolate(progress, [0.85, 1], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <g>
+      {/* Animated line, shortened so arrowhead sits cleanly at the tip */}
+      <line
+        x1={x1}
+        y1={y1}
+        x2={x2short}
+        y2={y2short}
+        stroke={theme.accent}
+        strokeWidth={2.5}
+        strokeDasharray={len}
+        strokeDashoffset={dashOffset}
+        strokeLinecap="round"
+      />
+
+      {/* Arrowhead — a triangle rendered at (x2, y2), rotated to face the direction of travel */}
+      <polygon
+        points={`0,0 ${-ARROW_HEAD_SIZE},${-ARROW_HEAD_SIZE / 2} ${-ARROW_HEAD_SIZE},${ARROW_HEAD_SIZE / 2}`}
+        fill={theme.accent}
+        transform={`translate(${x2}, ${y2}) rotate(${angleDeg})`}
+        opacity={headOpacity}
+      />
+
+      {/* Edge label — appears in the second half of the draw */}
+      {label && progress > 0.5 && (
+        <text
+          x={midX}
+          y={midY - 10}
+          fill={theme.textMuted}
+          fontSize={15}
+          textAnchor="middle"
+          fontFamily={theme.fontSans}
+          opacity={interpolate(progress, [0.5, 1], [0, 1])}
+        >
+          {label}
+        </text>
+      )}
+    </g>
+  );
+};

package/template/src/components/primitives/Caption.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { Theme } from "../../theme";
+
+interface CaptionProps {
+  text: string;
+  theme: Theme;
+  startFrame?: number;
+}
+
+export const Caption: React.FC<CaptionProps> = ({ text, theme, startFrame = 0 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const elapsed = frame - startFrame;
+
+  const progress = spring({ frame: elapsed, fps, config: theme.motion });
+  const opacity = interpolate(Math.max(0, progress), [0, 1], [0, 1]);
+  const translateY = interpolate(Math.max(0, progress), [0, 1], [12, 0]);
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        bottom: 72,
+        left: 0,
+        right: 0,
+        display: "flex",
+        justifyContent: "center",
+        opacity,
+        transform: `translateY(${translateY}px)`,
+      }}
+    >
+      <div
+        style={{
+          background: "rgba(0,0,0,0.45)",
+          backdropFilter: "blur(8px)",
+          borderRadius: 999,
+          padding: "10px 28px",
+          fontFamily: theme.fontSans,
+          fontSize: 22,
+          fontWeight: 500,
+          color: theme.text,
+          letterSpacing: "-0.01em",
+          maxWidth: 900,
+          textAlign: "center",
+        }}
+      >
+        {text}
+      </div>
+    </div>
+  );
+};