reelme 0.2.0

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { CodeRevealScene as CodeRevealBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { CodeBlock } from "../primitives/CodeBlock";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: CodeRevealBrief;
+  theme: Theme;
+}
+
+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;
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: theme.bg,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "60px 100px",
+      }}
+    >
+      <div style={{ width: "100%" }}>
+        <CodeBlock
+          code={scene.code}
+          language={scene.language}
+          highlightLine={scene.highlightLine}
+          theme={theme}
+          startFrame={14}
+          framesPerLine={9}
+        />
+      </div>
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,102 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { DataFlowScene as DataFlowBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { Arrow } from "../primitives/Arrow";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: DataFlowBrief;
+  theme: Theme;
+}
+
+const NODE_W = 200;
+const NODE_H = 64;
+
+export const DataFlow: React.FC<Props> = ({ scene, theme }) => {
+  const frame = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+
+  const nodeCount = scene.nodes.length;
+  const spacing = Math.min(320, (width - 240) / nodeCount);
+  const startX = (width - spacing * (nodeCount - 1) - NODE_W) / 2;
+  const centerY = height / 2 - NODE_H / 2;
+
+  const positions: Record<string, { x: number; y: number }> = {};
+  scene.nodes.forEach((node, i) => {
+    positions[node.id] = { x: startX + i * spacing, y: centerY };
+  });
+
+  const NODE_SETTLE = 18;
+  const ARROW_DRAW = 22;
+  const STEP = NODE_SETTLE + ARROW_DRAW; // 40 frames per pair
+
+  const nodeStartFrame = (i: number) => i * STEP;
+  const arrowStartFrame = (i: number) => i * STEP + NODE_SETTLE;
+
+  // Caption appears after the last node settles
+  const captionStart = (nodeCount - 1) * STEP + NODE_SETTLE + 20;
+
+  return (
+    <AbsoluteFill style={{ background: theme.bg }}>
+      {/* SVG layer for arrows */}
+      <svg width={width} height={height} style={{ position: "absolute", inset: 0 }}>
+        {scene.edges.map((edge, i) => {
+          const from = positions[edge.from];
+          const to = positions[edge.to];
+          if (!from || !to) return null;
+          return (
+            <Arrow
+              key={i}
+              x1={from.x + NODE_W}
+              y1={from.y + NODE_H / 2}
+              x2={to.x}
+              y2={to.y + NODE_H / 2}
+              label={edge.label}
+              theme={theme}
+              startFrame={arrowStartFrame(i)}
+            />
+          );
+        })}
+      </svg>
+
+      {/* Node boxes */}
+      {scene.nodes.map((node, i) => {
+        const pos = positions[node.id];
+        const progress = spring({ frame: frame - nodeStartFrame(i), fps, config: theme.motion });
+        const opacity = interpolate(progress, [0, 1], [0, 1]);
+        const scale = interpolate(progress, [0, 1], [0.85, 1]);
+
+        return (
+          <div
+            key={node.id}
+            style={{
+              position: "absolute",
+              left: pos.x,
+              top: pos.y,
+              width: NODE_W,
+              height: NODE_H,
+              background: theme.surface,
+              border: `1.5px solid ${theme.border}`,
+              borderRadius: 10,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontFamily: theme.fontSans,
+              fontSize: 18,
+              fontWeight: 600,
+              color: theme.text,
+              opacity,
+              transform: `scale(${scale})`,
+              boxShadow: `0 4px 24px rgba(0,0,0,0.3)`,
+            }}
+          >
+            {node.label}
+          </div>
+        );
+      })}
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,110 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { FeatureListScene as FeatureListBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { Label } from "../primitives/Label";
+import { Caption } from "../primitives/Caption";
+import { Icon } from "../primitives/Icon";
+
+interface Props {
+  scene: FeatureListBrief;
+  theme: Theme;
+}
+
+const HEADLINE_FRAMES = 20;
+const FRAMES_PER_ITEM = 25;
+
+export const FeatureList: React.FC<Props> = ({ scene, theme }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const captionStart = HEADLINE_FRAMES + scene.items.length * FRAMES_PER_ITEM + 20;
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: theme.bg,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0 200px",
+      }}
+    >
+      {scene.headline && (
+        <div style={{ marginBottom: 48 }}>
+          <Label text={scene.headline} theme={theme} size="lg" startFrame={0} />
+        </div>
+      )}
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 28, width: "100%" }}>
+        {scene.items.map((item, i) => {
+          const text = typeof item === "string" ? item : item.text;
+          const icon = typeof item === "string" ? undefined : item.icon;
+
+          const itemStart = HEADLINE_FRAMES + i * FRAMES_PER_ITEM;
+          const progress = spring({ frame: frame - itemStart, fps, config: theme.motion });
+          const opacity = interpolate(Math.max(0, progress), [0, 1], [0, 1]);
+          const translateX = interpolate(Math.max(0, progress), [0, 1], [-24, 0]);
+
+          return (
+            <div
+              key={i}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 24,
+                opacity,
+                transform: `translateX(${translateX}px)`,
+              }}
+            >
+              <div
+                style={{
+                  width: 36,
+                  height: 36,
+                  borderRadius: "50%",
+                  background: theme.accentMuted,
+                  border: `1.5px solid ${theme.accent}`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                }}
+              >
+                {icon ? (
+                  <Icon name={icon} size={18} color={theme.accent} />
+                ) : (
+                  <span
+                    style={{
+                      fontFamily: theme.fontMono,
+                      fontSize: 14,
+                      fontWeight: 700,
+                      color: theme.accent,
+                      lineHeight: 1,
+                    }}
+                  >
+                    {i + 1}
+                  </span>
+                )}
+              </div>
+              <span
+                style={{
+                  fontFamily: theme.fontSans,
+                  fontSize: 28,
+                  fontWeight: 500,
+                  color: theme.text,
+                  lineHeight: 1.4,
+                  letterSpacing: "-0.01em",
+                }}
+              >
+                {text}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,125 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { FileTreeScene as FileTreeBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { Label } from "../primitives/Label";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: FileTreeBrief;
+  theme: Theme;
+}
+
+const HEADLINE_FRAMES = 20;
+const FRAMES_PER_ENTRY = 20;
+const INDENT = 28;
+
+function getDepth(path: string): number {
+  const clean = path.endsWith("/") ? path.slice(0, -1) : path;
+  const segments = clean.split("/").filter(Boolean);
+  return Math.max(0, segments.length - 1);
+}
+
+function getName(path: string): string {
+  const clean = path.endsWith("/") ? path.slice(0, -1) : path;
+  const parts = clean.split("/").filter(Boolean);
+  return parts[parts.length - 1] ?? path;
+}
+
+const FolderIcon: React.FC<{ color: string }> = ({ color }) => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path
+      d="M1 4.5C1 3.67 1.67 3 2.5 3H7L9 5h6.5c.83 0 1.5.67 1.5 1.5v7c0 .83-.67 1.5-1.5 1.5h-13C1.67 15 1 14.33 1 13.5v-9z"
+      fill={color}
+      opacity={0.9}
+    />
+  </svg>
+);
+
+const FileIcon: React.FC<{ color: string }> = ({ color }) => (
+  <svg width="15" height="18" viewBox="0 0 15 18" fill="none">
+    <path d="M2 1h8l4 4v12a1 1 0 01-1 1H2a1 1 0 01-1-1V2a1 1 0 011-1z" stroke={color} strokeWidth="1.5" fill="none" />
+    <path d="M9 1v5h5" stroke={color} strokeWidth="1.5" />
+  </svg>
+);
+
+export const FileTree: React.FC<Props> = ({ scene, theme }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const captionStart = HEADLINE_FRAMES + scene.entries.length * FRAMES_PER_ENTRY + 20;
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: theme.bg,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "60px 240px",
+      }}
+    >
+      {scene.headline && (
+        <div style={{ marginBottom: 48, alignSelf: "flex-start" }}>
+          <Label text={scene.headline} theme={theme} size="lg" startFrame={0} align="left" />
+        </div>
+      )}
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 2, width: "100%" }}>
+        {scene.entries.map((entry, i) => {
+          const entryStart = HEADLINE_FRAMES + i * FRAMES_PER_ENTRY;
+          const progress = spring({
+            frame: frame - entryStart,
+            fps,
+            config: theme.motion,
+          });
+          const opacity = interpolate(Math.max(0, progress), [0, 1], [0, 1]);
+          const translateX = interpolate(Math.max(0, progress), [0, 1], [-20, 0]);
+
+          const depth = getDepth(entry.path);
+          const name = getName(entry.path);
+          const isDir = entry.type === "dir" || entry.path.endsWith("/");
+          const isHighlighted = !!entry.highlight;
+          const textColor = isHighlighted ? theme.accent : isDir ? theme.text : theme.textMuted;
+          const iconColor = isHighlighted ? theme.accent : isDir ? theme.accent : theme.textMuted;
+
+          return (
+            <div
+              key={i}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                opacity,
+                transform: `translateX(${translateX}px)`,
+                paddingTop: isHighlighted ? 6 : 4,
+                paddingBottom: isHighlighted ? 6 : 4,
+                paddingLeft: depth * INDENT + 8,
+                paddingRight: 12,
+                background: isHighlighted ? theme.accentMuted : "transparent",
+                borderRadius: isHighlighted ? 6 : 0,
+                border: isHighlighted ? `1px solid ${theme.accent}` : "1px solid transparent",
+              }}
+            >
+              {isDir ? <FolderIcon color={iconColor} /> : <FileIcon color={iconColor} />}
+              <span
+                style={{
+                  fontFamily: theme.fontMono,
+                  fontSize: 22,
+                  fontWeight: isDir ? 600 : 400,
+                  color: textColor,
+                  letterSpacing: "-0.01em",
+                }}
+              >
+                {name}{isDir ? "/" : ""}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,77 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { HotkeyScene as HotkeyBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { KeyPill } from "../primitives/KeyPill";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: HotkeyBrief;
+  theme: Theme;
+}
+
+const FRAMES_PER_KEY = 20;
+const ACTION_DELAY = 15;
+
+export const Hotkey: React.FC<Props> = ({ scene, theme }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const actionStart = scene.keys.length * FRAMES_PER_KEY + ACTION_DELAY;
+  const captionStart = actionStart + 50;
+
+  const actionProgress = spring({ frame: frame - actionStart, fps, config: theme.motion });
+  const actionOpacity = interpolate(Math.max(0, actionProgress), [0, 1], [0, 1]);
+  const actionY = interpolate(Math.max(0, actionProgress), [0, 1], [16, 0]);
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: theme.bg,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 40,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        {scene.keys.map((key, i) => (
+          <React.Fragment key={i}>
+            {i > 0 && (
+              <span
+                style={{
+                  fontFamily: theme.fontSans,
+                  fontSize: 28,
+                  color: theme.textMuted,
+                  opacity: frame >= i * FRAMES_PER_KEY ? 1 : 0,
+                }}
+              >
+                +
+              </span>
+            )}
+            <KeyPill label={key} theme={theme} startFrame={i * FRAMES_PER_KEY} />
+          </React.Fragment>
+        ))}
+      </div>
+
+      {scene.action && (
+        <div
+          style={{
+            opacity: actionOpacity,
+            transform: `translateY(${actionY}px)`,
+            fontFamily: theme.fontSans,
+            fontSize: 28,
+            fontWeight: 400,
+            color: theme.textMuted,
+            letterSpacing: "-0.01em",
+          }}
+        >
+          {scene.action}
+        </div>
+      )}
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,212 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate, Img, staticFile } from "remotion";
+import { MobileScene as MobileBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: MobileBrief;
+  theme: Theme;
+}
+
+const PHONE_W = 340;
+const PHONE_H = 720;
+const NOTCH_H = 30;
+const RADIUS = 40;
+
+export const MobileScreen: React.FC<Props> = ({ scene, theme }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const progress = spring({ frame, fps, config: theme.motion });
+  const opacity = interpolate(progress, [0, 1], [0, 1]);
+  const translateY = interpolate(progress, [0, 1], [60, 0]);
+  const scale = interpolate(progress, [0, 1], [0.88, 1]);
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: theme.bg,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          width: PHONE_W,
+          height: PHONE_H,
+          borderRadius: RADIUS,
+          border: `3px solid ${theme.border}`,
+          background: theme.surface,
+          boxShadow: `0 40px 100px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.05)`,
+          position: "relative",
+          overflow: "hidden",
+          opacity,
+          transform: `translateY(${translateY}px) scale(${scale})`,
+        }}
+      >
+        {/* Notch */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: "50%",
+            transform: "translateX(-50%)",
+            width: 110,
+            height: NOTCH_H,
+            background: theme.surface,
+            borderBottomLeftRadius: 16,
+            borderBottomRightRadius: 16,
+            zIndex: 10,
+          }}
+        />
+
+        {/* Screen */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            background: theme.bg,
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          {/* Status bar */}
+          <div
+            style={{
+              height: NOTCH_H + 2,
+              display: "flex",
+              alignItems: "flex-end",
+              justifyContent: "space-between",
+              paddingLeft: 20,
+              paddingRight: 20,
+              paddingBottom: 4,
+              fontFamily: theme.fontSans,
+              fontSize: 11,
+              fontWeight: 600,
+              color: theme.textMuted,
+            }}
+          >
+            <span>9:41</span>
+            <span>●●●</span>
+          </div>
+
+          {/* App header */}
+          {scene.title && (
+            <div
+              style={{
+                height: 48,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                borderBottom: `1px solid ${theme.border}`,
+                fontFamily: theme.fontSans,
+                fontSize: 16,
+                fontWeight: 600,
+                color: theme.text,
+                flexShrink: 0,
+              }}
+            >
+              {scene.title}
+            </div>
+          )}
+
+          {/* Content */}
+          <div style={{ flex: 1, overflow: "hidden", position: "relative" }}>
+            {scene.image ? (
+              <Img
+                src={staticFile(scene.image)}
+                style={{ width: "100%", height: "100%", objectFit: "cover" }}
+              />
+            ) : (
+              <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
+                {/* Search bar */}
+                <div
+                  style={{
+                    height: 34,
+                    background: theme.surface,
+                    borderRadius: 8,
+                    border: `1px solid ${theme.border}`,
+                    display: "flex",
+                    alignItems: "center",
+                    paddingLeft: 12,
+                    paddingRight: 12,
+                    fontFamily: theme.fontSans,
+                    fontSize: 12,
+                    color: theme.textMuted,
+                  }}
+                >
+                  Search...
+                </div>
+                {/* List items */}
+                {[72, 56, 60, 54, 58].map((_, i) => (
+                  <div
+                    key={i}
+                    style={{
+                      height: 58,
+                      background: theme.surface,
+                      borderRadius: 10,
+                      border: `1px solid ${theme.border}`,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 10,
+                      paddingLeft: 10,
+                      paddingRight: 10,
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: 32,
+                        height: 32,
+                        borderRadius: "50%",
+                        background: theme.accentMuted,
+                        border: `1.5px solid ${theme.accent}`,
+                        flexShrink: 0,
+                      }}
+                    />
+                    <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6 }}>
+                      <div style={{ height: 11, background: theme.border, borderRadius: 4, width: `${58 + i * 8}%` }} />
+                      <div style={{ height: 9, background: theme.border, borderRadius: 4, width: `${38 + i * 6}%`, opacity: 0.6 }} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Bottom nav */}
+          <div
+            style={{
+              height: 52,
+              borderTop: `1px solid ${theme.border}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-around",
+              flexShrink: 0,
+            }}
+          >
+            {["⌂", "⊞", "♡", "◉"].map((icon, i) => (
+              <div
+                key={i}
+                style={{
+                  width: 36,
+                  height: 36,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 18,
+                  color: i === 0 ? theme.accent : theme.textMuted,
+                }}
+              >
+                {icon}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} />}
+    </AbsoluteFill>
+  );
+};