reelme 0.2.0

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

@@ -0,0 +1,159 @@
+import React from "react";
+import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
+import { Theme } from "../../theme";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  highlightLine?: number;
+  theme: Theme;
+  startFrame?: number;
+  framesPerLine?: number;
+}
+
+function tokenize(line: string, _lang: string): Array<{ text: string; color: string }> {
+  // Minimal tokenizer — keywords, strings, comments, numbers
+  const segments: Array<{ text: string; color: string }> = [];
+  const keywords = /\b(import|export|from|const|let|var|function|return|async|await|if|else|for|while|class|new|this|true|false|null|undefined|type|interface|extends|implements|of|in|default)\b/g;
+  const strings = /(["'`])(?:(?!\1)[^\\]|\\.)*?\1/g;
+  const comments = /(\/\/.*$|\/\*[\s\S]*?\*\/)/gm;
+  const numbers = /\b\d+\.?\d*\b/g;
+
+  // We'll do a simple pass: mark regions with their type
+  const marks: Array<{ start: number; end: number; color: string }> = [];
+
+  for (const re of [
+    { re: comments, color: "#8b949e" },
+    { re: strings, color: "#a5d6ff" },
+    { re: keywords, color: "#ff7b72" },
+    { re: numbers, color: "#79c0ff" },
+  ]) {
+    let m: RegExpExecArray | null;
+    re.re.lastIndex = 0;
+    while ((m = re.re.exec(line)) !== null) {
+      // Only add if no overlap
+      const start = m.index;
+      const end = m.index + m[0].length;
+      const overlap = marks.some((mk) => mk.start < end && mk.end > start);
+      if (!overlap) marks.push({ start, end, color: re.color });
+    }
+  }
+
+  marks.sort((a, b) => a.start - b.start);
+
+  let pos = 0;
+  for (const mk of marks) {
+    if (pos < mk.start) segments.push({ text: line.slice(pos, mk.start), color: "#e6edf3" });
+    segments.push({ text: line.slice(mk.start, mk.end), color: mk.color });
+    pos = mk.end;
+  }
+  if (pos < line.length) segments.push({ text: line.slice(pos), color: "#e6edf3" });
+
+  return segments.length > 0 ? segments : [{ text: line, color: "#e6edf3" }];
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({
+  code,
+  language = "ts",
+  highlightLine,
+  theme,
+  startFrame = 0,
+  framesPerLine = 9,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const elapsed = frame - startFrame;
+  const lines = code.split("\n");
+  const visibleCount = Math.max(0, Math.min(lines.length, Math.floor(elapsed / framesPerLine) + 1));
+
+  return (
+    <div style={{ fontFamily: theme.fontMono, fontSize: 20, lineHeight: 1.7 }}>
+      <div
+        style={{
+          background: "#0d1117",
+          borderRadius: 10,
+          overflow: "hidden",
+          boxShadow: "0 8px 48px rgba(0,0,0,0.6)",
+        }}
+      >
+        {/* Title bar */}
+        <div
+          style={{
+            background: "#161b22",
+            padding: "10px 16px",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            borderBottom: "1px solid #21262d",
+          }}
+        >
+          {(["#ff5f56", "#ffbd2e", "#27c93f"] as const).map((c) => (
+            <div key={c} style={{ width: 12, height: 12, borderRadius: "50%", background: c }} />
+          ))}
+          <span style={{ marginLeft: 8, color: "#8b949e", fontSize: 13 }}>
+            {language === "ts" ? "index.ts" : language === "py" ? "main.py" : language === "rs" ? "main.rs" : `code.${language}`}
+          </span>
+        </div>
+
+        {/* Code lines */}
+        <div style={{ padding: "20px 0" }}>
+          {lines.slice(0, visibleCount).map((line, i) => {
+            const lineNum = i + 1;
+            const isHighlight = highlightLine !== undefined && lineNum === highlightLine;
+            const highlightOpacity =
+              highlightLine !== undefined && visibleCount >= highlightLine
+                ? interpolate(
+                    spring({ frame: elapsed - highlightLine * framesPerLine, fps, config: theme.motion }),
+                    [0, 1],
+                    [0, 1]
+                  )
+                : 0;
+
+            return (
+              <div
+                key={i}
+                style={{
+                  display: "flex",
+                  padding: "0 24px",
+                  background: isHighlight
+                    ? `rgba(${hexToRgb(theme.accent)}, ${0.15 * highlightOpacity})`
+                    : "transparent",
+                  borderLeft: isHighlight
+                    ? `3px solid rgba(${hexToRgb(theme.accent)}, ${highlightOpacity})`
+                    : "3px solid transparent",
+                }}
+              >
+                <span
+                  style={{
+                    color: "#484f58",
+                    minWidth: 32,
+                    userSelect: "none",
+                    fontSize: 16,
+                    paddingTop: 1,
+                  }}
+                >
+                  {lineNum}
+                </span>
+                <span style={{ whiteSpace: "pre" }}>
+                  {tokenize(line, language).map((seg, j) => (
+                    <span key={j} style={{ color: seg.color }}>
+                      {seg.text}
+                    </span>
+                  ))}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+    </div>
+  );
+};
+
+function hexToRgb(hex: string): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `${r}, ${g}, ${b}`;
+}

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

@@ -0,0 +1,68 @@
+import React from "react";
+import {
+  AlertCircle, ArrowRight, Bell, Brackets, Check, CheckCircle,
+  ChevronDown, ChevronRight, Clock, Cloud, Code, Copy, Database,
+  Download, Edit, Eye, EyeOff, File, FileCode, Fingerprint, Folder,
+  FolderOpen, Globe, HardDrive, Info, Key, Lock, Package, Plus,
+  Search, Server, Settings, Shield, Star, Terminal, Trash, Upload,
+  User, Users, X, Zap, type LucideProps,
+} from "lucide-react";
+
+type LucideIcon = React.FC<LucideProps>;
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  "alert-circle": AlertCircle,
+  "arrow-right": ArrowRight,
+  bell: Bell,
+  brackets: Brackets,
+  check: Check,
+  "check-circle": CheckCircle,
+  "chevron-down": ChevronDown,
+  "chevron-right": ChevronRight,
+  clock: Clock,
+  cloud: Cloud,
+  code: Code,
+  copy: Copy,
+  database: Database,
+  download: Download,
+  edit: Edit,
+  eye: Eye,
+  "eye-off": EyeOff,
+  file: File,
+  "file-code": FileCode,
+  fingerprint: Fingerprint,
+  folder: Folder,
+  "folder-open": FolderOpen,
+  globe: Globe,
+  "hard-drive": HardDrive,
+  info: Info,
+  key: Key,
+  lock: Lock,
+  package: Package,
+  plus: Plus,
+  search: Search,
+  server: Server,
+  settings: Settings,
+  shield: Shield,
+  star: Star,
+  terminal: Terminal,
+  trash: Trash,
+  upload: Upload,
+  user: User,
+  users: Users,
+  x: X,
+  zap: Zap,
+};
+
+export interface IconProps {
+  name: string;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+export const Icon: React.FC<IconProps> = ({ name, size = 20, color = "currentColor", strokeWidth = 1.5 }) => {
+  const LucideIcon = ICON_MAP[name.toLowerCase()];
+  if (!LucideIcon) return null;
+  return <LucideIcon size={size} color={color} strokeWidth={strokeWidth} />;
+};

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { Theme } from "../../theme";
+
+interface KeyPillProps {
+  label: string;
+  theme: Theme;
+  startFrame?: number;
+}
+
+export const KeyPill: React.FC<KeyPillProps> = ({ label, theme, startFrame = 0 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const elapsed = frame - startFrame;
+
+  const progress = spring({ frame: elapsed, fps, config: { damping: 12, stiffness: 180, mass: 0.6 } });
+  const scale = interpolate(progress, [0, 1], [0.65, 1]);
+  const opacity = interpolate(progress, [0, 1], [0, 1]);
+
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "10px 22px",
+        borderRadius: 10,
+        background: theme.surface,
+        border: `1.5px solid ${theme.border}`,
+        boxShadow: `0 4px 0 ${theme.border}`,
+        fontFamily: theme.fontSans,
+        fontSize: 30,
+        fontWeight: 600,
+        color: theme.text,
+        minWidth: 60,
+        letterSpacing: "-0.01em",
+        transform: `scale(${scale})`,
+        opacity,
+      }}
+    >
+      {label}
+    </div>
+  );
+};

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

@@ -0,0 +1,49 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { Theme } from "../../theme";
+
+interface LabelProps {
+  text: string;
+  theme: Theme;
+  startFrame?: number;
+  size?: "sm" | "md" | "lg" | "xl";
+  align?: "left" | "center" | "right";
+  muted?: boolean;
+}
+
+const sizeMap = { sm: 22, md: 32, lg: 48, xl: 72 };
+
+export const Label: React.FC<LabelProps> = ({
+  text,
+  theme,
+  startFrame = 0,
+  size = "md",
+  align = "center",
+  muted = false,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const elapsed = frame - startFrame;
+
+  const progress = spring({ frame: elapsed, fps, config: theme.motion });
+  const opacity = interpolate(progress, [0, 1], [0, 1]);
+  const translateY = interpolate(progress, [0, 1], [20, 0]);
+
+  return (
+    <div
+      style={{
+        opacity,
+        transform: `translateY(${translateY}px)`,
+        fontFamily: theme.fontSans,
+        fontSize: sizeMap[size],
+        fontWeight: size === "xl" || size === "lg" ? 700 : 500,
+        color: muted ? theme.textMuted : theme.text,
+        textAlign: align,
+        lineHeight: 1.25,
+        letterSpacing: size === "xl" ? "-0.02em" : "-0.01em",
+      }}
+    >
+      {text}
+    </div>
+  );
+};

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

@@ -0,0 +1,110 @@
+import React from "react";
+import { useCurrentFrame } from "remotion";
+import { Theme } from "../../theme";
+
+interface TerminalLine {
+  text: string;
+  isOutput?: boolean;
+}
+
+interface TerminalProps {
+  lines: TerminalLine[];
+  theme: Theme;
+  startFrame?: number;
+  framesPerLine?: number;
+  framesPerChar?: number;
+}
+
+export const Terminal: React.FC<TerminalProps> = ({
+  lines,
+  theme,
+  startFrame = 0,
+  framesPerLine = 23,
+  framesPerChar = 2.0,
+}) => {
+  const frame = useCurrentFrame();
+  const elapsed = frame - startFrame;
+
+  const visibleLines: Array<{ text: string; isOutput: boolean; partialText: string }> = [];
+
+  let cursor = 0;
+  for (const line of lines) {
+    const lineStart = cursor;
+    const isOutput = line.isOutput ?? false;
+
+    if (isOutput) {
+      if (elapsed >= lineStart) {
+        visibleLines.push({ text: line.text, isOutput: true, partialText: line.text });
+      }
+      cursor += framesPerLine;
+    } else {
+      if (elapsed >= lineStart) {
+        const charsRevealed = Math.floor((elapsed - lineStart) / framesPerChar);
+        visibleLines.push({
+          text: line.text,
+          isOutput: false,
+          partialText: line.text.slice(0, charsRevealed),
+        });
+      }
+      cursor += line.text.length * framesPerChar + framesPerLine;
+    }
+  }
+
+  return (
+    <div
+      style={{
+        background: "#0d1117",
+        borderRadius: 10,
+        overflow: "hidden",
+        fontFamily: theme.fontMono,
+        fontSize: 22,
+        boxShadow: "0 8px 48px rgba(0,0,0,0.6)",
+      }}
+    >
+      <div
+        style={{
+          background: "#21262d",
+          padding: "10px 16px",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        {(["#ff5f56", "#ffbd2e", "#27c93f"] as const).map((c) => (
+          <div key={c} style={{ width: 12, height: 12, borderRadius: "50%", background: c }} />
+        ))}
+        <span style={{ marginLeft: 8, color: "#8b949e", fontSize: 13 }}>terminal</span>
+      </div>
+
+      <div style={{ padding: "20px 24px", minHeight: 120 }}>
+        {visibleLines.map((line, i) => {
+          const isTyping =
+            !line.isOutput &&
+            i === visibleLines.length - 1 &&
+            line.partialText.length < line.text.length;
+          return (
+            <div
+              key={i}
+              style={{ color: line.isOutput ? "#8b949e" : "#e6edf3", marginBottom: 6, lineHeight: 1.6, whiteSpace: "pre" }}
+            >
+              {!line.isOutput && <span style={{ color: theme.accent, marginRight: 8 }}>$</span>}
+              {line.partialText}
+              {isTyping && (
+                <span
+                  style={{
+                    display: "inline-block",
+                    width: 10,
+                    height: "1em",
+                    background: theme.accent,
+                    verticalAlign: "text-bottom",
+                    opacity: Math.floor(elapsed / 15) % 2 === 0 ? 1 : 0,
+                  }}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,139 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate, Img, staticFile } from "remotion";
+import { BrowserScene as BrowserBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: BrowserBrief;
+  theme: Theme;
+}
+
+export const BrowserFrame: React.FC<Props> = ({ scene, theme }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const windowProgress = spring({ frame, fps, config: theme.motion });
+  const windowOpacity = interpolate(windowProgress, [0, 1], [0, 1]);
+  const windowScale = interpolate(windowProgress, [0, 1], [0.92, 1]);
+
+  // URL types character-by-character starting at frame 20
+  const urlChars = Math.max(0, Math.floor((frame - 20) / 2));
+  const displayUrl = scene.url.replace(/^https?:\/\//, "");
+  const visibleUrl = displayUrl.slice(0, urlChars);
+  const isCursorVisible = urlChars < displayUrl.length && Math.floor(frame / 10) % 2 === 0;
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: theme.bg,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "60px 120px",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          opacity: windowOpacity,
+          transform: `scale(${windowScale})`,
+          boxShadow: "0 24px 80px rgba(0,0,0,0.6)",
+          borderRadius: 12,
+          overflow: "hidden",
+        }}
+      >
+        {/* Chrome bar */}
+        <div
+          style={{
+            background: theme.surface,
+            padding: "12px 16px",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            borderBottom: `1px solid ${theme.border}`,
+          }}
+        >
+          {(["#ff5f56", "#ffbd2e", "#27c93f"] as const).map((c) => (
+            <div key={c} style={{ width: 12, height: 12, borderRadius: "50%", background: c }} />
+          ))}
+          <div
+            style={{
+              flex: 1,
+              marginLeft: 16,
+              background: theme.bg,
+              borderRadius: 6,
+              padding: "6px 16px",
+              fontFamily: theme.fontMono,
+              fontSize: 15,
+              color: theme.textMuted,
+              border: `1px solid ${theme.border}`,
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <span style={{ color: theme.textMuted, marginRight: 4, opacity: 0.5 }}>https://</span>
+            <span style={{ color: theme.text }}>{visibleUrl}</span>
+            {isCursorVisible && (
+              <span
+                style={{
+                  display: "inline-block",
+                  width: 8,
+                  height: "1em",
+                  background: theme.accent,
+                  verticalAlign: "text-bottom",
+                  marginLeft: 1,
+                }}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Content area */}
+        <div
+          style={{
+            background: "#0d1117",
+            height: 500,
+            overflow: "hidden",
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {scene.image ? (
+            <Img
+              src={staticFile(scene.image)}
+              style={{ width: "100%", height: "100%", objectFit: "cover" }}
+            />
+          ) : (
+            // Wireframe placeholder
+            <div style={{ width: "100%", height: "100%", padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
+              {/* Nav */}
+              <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+                <div style={{ width: 80, height: 28, background: theme.surface, borderRadius: 6, border: `1px solid ${theme.border}` }} />
+                <div style={{ flex: 1 }} />
+                {[60, 60, 80].map((w, i) => (
+                  <div key={i} style={{ width: w, height: 28, background: theme.surface, borderRadius: 6, border: `1px solid ${theme.border}` }} />
+                ))}
+                <div style={{ width: 100, height: 28, background: theme.accentMuted, borderRadius: 6, border: `1px solid ${theme.accent}` }} />
+              </div>
+              {/* Hero */}
+              <div style={{ flex: 2, background: theme.surface, borderRadius: 8, border: `1px solid ${theme.border}`, display: "flex", alignItems: "center", justifyContent: "center", gap: 16 }}>
+                <div style={{ width: 200, height: 24, background: theme.border, borderRadius: 4 }} />
+              </div>
+              {/* Cards */}
+              <div style={{ flex: 1, display: "flex", gap: 12 }}>
+                {[1, 2, 3].map((i) => (
+                  <div key={i} style={{ flex: 1, background: theme.surface, borderRadius: 8, border: `1px solid ${theme.border}` }} />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={60} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,118 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate, Img, staticFile } from "remotion";
+import { CTAScene as CTABrief, ProjectMeta } from "../../brief";
+import { Theme } from "../../theme";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: CTABrief;
+  theme: Theme;
+  project: ProjectMeta;
+}
+
+const SNAP_OFFSET = 8;
+
+export const CTA: React.FC<Props> = ({ scene, theme, project }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  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 });
+  const cmdProgress = spring({ frame: frame + SNAP_OFFSET - (project.logo ? 32 : 16), fps, config: theme.motion });
+  const urlProgress = spring({ frame: frame + SNAP_OFFSET - (project.logo ? 48 : 31), fps, config: theme.motion });
+
+  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 isAnnouncement = project.mode === "announcement";
+  const displayName = isAnnouncement && project.version
+    ? `${project.name} ${project.version}`
+    : project.name;
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: theme.accent,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 32,
+        padding: "0 120px",
+      }}
+    >
+      {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>
+      )}
+
+      <div
+        style={{
+          opacity: titleOpacity,
+          transform: `translateY(${titleY}px)`,
+          fontFamily: theme.fontSans,
+          fontSize: 56,
+          fontWeight: 700,
+          color: theme.textInverse,
+          letterSpacing: "-0.02em",
+          textAlign: "center",
+        }}
+      >
+        {isAnnouncement ? "" : "Get started with "}
+        <span style={{ color: theme.textInverse, 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}
+      </div>
+
+      {scene.repoUrl && (
+        <div
+          style={{
+            opacity: urlFade,
+            fontFamily: theme.fontMono,
+            fontSize: 20,
+            color: theme.textInverse,
+          }}
+        >
+          {scene.repoUrl}
+        </div>
+      )}
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={60} />}
+    </AbsoluteFill>
+  );
+};