agentreel 0.6.0 → 0.6.1

package/src/Root.tsx

@@ -1,10 +1,17 @@
 import { Composition } from "remotion";
 import { CastVideo } from "./CastVideo";
-import { defaultProps, CastProps } from "./types";
+import { defaultProps, CastProps, Highlight } from "./types";
 
-// Duration constants per mode
-const REEL = { title: 2.5, termHighlight: 4.5, browserHighlight: 7.0, end: 3.5 };
-const DEMO = { title: 2.0, termHighlight: 12.0, browserHighlight: 10.0, end: 3.0 };
+const TIMING = { title: 2.5, termHighlight: 4.5, browserHighlight: 7.0, textSlide: 3.5, diagram: 5.0, tree: 6.0, end: 3.5 };
+
+function highlightDuration(h: Highlight): number {
+  if (h.statement) return TIMING.textSlide;
+  if (h.diagram) return TIMING.diagram;
+  if (h.panels) return TIMING.diagram;
+  if (h.tree) return TIMING.tree;
+  if (h.videoSrc) return TIMING.browserHighlight;
+  return TIMING.termHighlight;
+}
 
 export const RemotionRoot: React.FC = () => {
   return (
@@ -19,20 +26,17 @@ export const RemotionRoot: React.FC = () => {
       calculateMetadata={({ props }) => {
         const p = props as unknown as CastProps;
         const fps = 30;
-        const isDemo = p.mode === "demo";
-        const timing = isDemo ? DEMO : REEL;
 
-        const titleFrames = Math.round(timing.title * fps);
+        const titleFrames = Math.round(TIMING.title * fps);
         const highlightFrames = p.highlights.reduce((sum, h) => {
-          const dur = h.videoSrc ? timing.browserHighlight : timing.termHighlight;
-          return sum + Math.round(dur * fps);
+          return sum + Math.round(highlightDuration(h) * fps);
         }, 0);
-        const endFrames = Math.round(timing.end * fps);
+        const endFrames = Math.round(TIMING.end * fps);
 
         return {
           durationInFrames: titleFrames + highlightFrames + endFrames,
-          width: isDemo ? 1920 : 1080,
-          height: isDemo ? 1080 : 1080,
+          width: 1080,
+          height: 1080,
         };
       }}
     />

package/src/types.ts

@@ -4,84 +4,136 @@ export interface ClickEvent {
   timeSec: number; // seconds relative to highlight start
 }
 
-// A highlight is one "moment" in the demo.
-// Either terminal lines (CLI demo) or a video clip (browser demo).
+export interface DiagramNode {
+  id: string;
+  label: string;
+  x: number; // 0-1 normalized position
+  y: number; // 0-1 normalized position
+  color?: string; // hex color override
+}
+
+export interface DiagramEdge {
+  from: string; // node id
+  to: string; // node id
+}
+
+export interface DiagramData {
+  nodes: DiagramNode[];
+  edges: DiagramEdge[];
+}
+
+export interface PanelData {
+  title: string;
+  stat?: string; // big number/word at top (e.g. "1", "3x", "AI")
+  statLabel?: string; // label under the stat (e.g. "command", "faster")
+  content: string; // multi-line via \n — each line gets an animated checkmark
+  color?: string; // accent color
+}
+
+export interface TreeData {
+  root: string; // root node label
+  depth: number; // levels deep (3-5)
+  branching: number | number[]; // uniform (3) or per-level ([4, 2, 3])
+  nodeLabels?: string[][]; // labels by level
+  outro?: string; // text that scrolls in at the bottom (multi-line via \n)
+}
+
+// A highlight is one "moment" in the video.
+// Exactly one of: lines, videoSrc, statement, diagram, panels.
 export interface Highlight {
-  label: string; // e.g. "Initialize", "Configure", "Run"
-  overlay?: string; // big text overlay shown on top (e.g. "One command.")
+  label: string;
+  overlay?: string; // text overlay (browser clips only)
 
-  // CLI mode — terminal lines
+  // Terminal lines
   lines?: TermLine[];
   zoomLine?: number;
 
-  // Browser mode — video clip from recorded session
-  videoSrc?: string; // path to video file (served via staticFile)
-  videoStartSec?: number; // trim: start time in seconds
-  videoEndSec?: number; // trim: end time in seconds
-  focusX?: number; // 0-1, focal point X for zoom (default 0.5)
-  focusY?: number; // 0-1, focal point Y for zoom (default 0.5)
-  clicks?: ClickEvent[]; // click positions for cursor animation
+  // Browser video clip
+  videoSrc?: string;
+  videoStartSec?: number;
+  videoEndSec?: number;
+  focusX?: number;
+  focusY?: number;
+  clicks?: ClickEvent[];
+
+  // Text slide — bold narrative statement
+  statement?: string;
+
+  // Diagram — animated node/edge visualization
+  diagram?: DiagramData;
+
+  // Side-by-side panels
+  panels?: { left: PanelData; right: PanelData };
+
+  // Auto-generated fractal tree
+  tree?: TreeData;
 }
 
 export interface TermLine {
   text: string;
-  color?: string; // hex color for the line
+  color?: string;
   bold?: boolean;
   dim?: boolean;
-  isPrompt?: boolean; // prefix with $
+  isPrompt?: boolean;
 }
 
 export interface CastProps {
-  title: string; // big opening title
-  subtitle?: string; // smaller text under title
+  title: string;
+  subtitle?: string;
   highlights: Highlight[];
-  endText?: string; // closing CTA command, e.g. "npx agentreel"
-  endUrl?: string; // URL shown under CTA, e.g. "github.com/islo-labs/agentreel"
-  gradient?: [string, string]; // background gradient colors
-  mode?: "reel" | "demo"; // "reel" = 1080x1080 marketing clip, "demo" = 1920x1080 chapter walkthrough
+  endText?: string;
+  endUrl?: string;
 }
 
 export const defaultProps: CastProps = {
   title: "agentreel",
-  subtitle: undefined,
+  subtitle: "Turn your apps into demo videos",
   highlights: [
     {
-      label: "Record",
-      overlay: "One command.",
-      lines: [
-        { text: "npx agentreel --cmd 'my-cli-tool'", isPrompt: true },
-        { text: "" },
-        { text: "  agentreel  Turn your apps into viral clips", bold: true, color: "#bd93f9" },
-        { text: "" },
-        { text: "  ✓ Recording CLI demo...", color: "#50fa7b" },
-      ],
+      label: "The Problem",
+      statement: "Your app is amazing.\nBut nobody knows it yet.",
     },
     {
-      label: "Highlight",
-      overlay: "AI picks the best moments.",
-      lines: [
-        { text: "Extracting highlights...", dim: true },
-        { text: "" },
-        { text: "  ✓ 4 highlights extracted", color: "#50fa7b" },
-        { text: '    "Initialize" — first run', color: "#f8f8f2" },
-        { text: '    "Configure" — setup step', color: "#f8f8f2" },
-        { text: '    "Run" — the wow moment', color: "#f1fa8c" },
-      ],
-      zoomLine: 2,
+      label: "How It Works",
+      panels: {
+        left: {
+          title: "You",
+          stat: "1",
+          statLabel: "command",
+          content: "Point it at your app\nHit enter",
+          color: "#111111",
+        },
+        right: {
+          title: "AI",
+          stat: "5",
+          statLabel: "steps automated",
+          content: "Records the demo\nExtracts highlights\nBuilds the narrative\nAnimates the tree\nRenders the video",
+          color: "#22c55e",
+        },
+      },
     },
     {
-      label: "Share",
-      overlay: "Ready to post.",
+      label: "Record",
       lines: [
-        { text: "Rendering video...", dim: true },
+        { text: "npx agentreel --cmd 'my-cli-tool'", isPrompt: true },
         { text: "" },
-        { text: "  Done: agentreel.mp4 (2.4 MB)", color: "#50fa7b" },
+        { text: "  agentreel  Turn your apps into viral clips", bold: true, color: "#6d28d9" },
         { text: "" },
-        { text: "  Share to Twitter? [Y/n]", color: "#f8f8f2" },
+        { text: "  ✓ Recording CLI demo...", color: "#16a34a" },
       ],
-      zoomLine: 2,
+    },
+    {
+      label: "Pipeline",
+      tree: {
+        root: "agentreel",
+        depth: 4,
+        branching: [5, 3, 2],
+        nodeLabels: [
+          ["Record", "Plan", "Extract", "Render", "Share"],
+        ],
+        outro: "Ready to share.\nIn seconds.",
+      },
     },
   ],
   endText: "npx agentreel",
-  gradient: ["#0f0f1a", "#1a0f2e"],
 };