reelme 0.2.0

package/template/src/index.ts

@@ -0,0 +1,106 @@
+import { registerRoot, Composition } from "remotion";
+import React from "react";
+import { Reel } from "./Root";
+import { calcTotalDuration, TEASER_MAX_FRAMES } from "./duration";
+import { Brief, Scene } from "./brief";
+import { PLATFORMS, cutForPlatform } from "./platforms";
+import briefJson from "./brief.json";
+
+const brief = briefJson as unknown as Brief;
+
+const VALID_PLATFORMS = Object.keys(PLATFORMS).join(", ");
+
+const platformIds = brief.project?.platforms;
+if (!Array.isArray(platformIds) || platformIds.length === 0) {
+  throw new Error(
+    `reelme: project.platforms is missing or empty in the brief. ` +
+      `Select at least one platform: ${VALID_PLATFORMS}.`
+  );
+}
+const unknown = platformIds.filter((id) => !PLATFORMS[id]);
+if (unknown.length > 0) {
+  throw new Error(
+    `reelme: unknown platform(s) in the brief: ${unknown.join(", ")}. ` +
+      `Valid platforms: ${VALID_PLATFORMS}.`
+  );
+}
+if (!brief.cuts || !Array.isArray(brief.cuts.main) || brief.cuts.main.length === 0) {
+  throw new Error(
+    "reelme: cuts.main is missing or empty in the brief. " +
+      "Brief schema v2 requires cuts: { main: Scene[] } (the v1 top-level scenes array is no longer supported)."
+  );
+}
+
+// A vertical platform without cuts.vertical falls back to the main cut.
+function scenesForCut(cut: "main" | "vertical"): Scene[] {
+  if (cut === "vertical") return brief.cuts.vertical ?? brief.cuts.main;
+  return brief.cuts.main;
+}
+
+const verticalFallback = platformIds.filter(
+  (id) => cutForPlatform(id) === "vertical" && !brief.cuts.vertical
+);
+if (verticalFallback.length > 0) {
+  console.warn(
+    `reelme: no cuts.vertical in the brief — ${verticalFallback.join(", ")} will render the main cut ` +
+      `letterboxed into 9:16. Author a vertical cut for better results.`
+  );
+}
+
+const compositions = platformIds.map((id) => {
+  const preset = PLATFORMS[id];
+  const scenes = scenesForCut(cutForPlatform(id));
+  if (preset.maxDurationSec !== undefined) {
+    const seconds = calcTotalDuration(scenes) / preset.fps;
+    if (seconds > preset.maxDurationSec) {
+      console.warn(
+        `reelme: the ${preset.label} cut runs ${seconds.toFixed(1)}s, over the platform's ` +
+          `${preset.maxDurationSec}s ceiling. Rendering anyway — consider trimming scenes.`
+      );
+    }
+  }
+  return React.createElement(Composition, {
+    key: `Reel-${id}`,
+    id: `Reel-${id}`,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    component: Reel as React.FC<any>,
+    durationInFrames: calcTotalDuration(scenes),
+    fps: preset.fps,
+    width: preset.width,
+    height: preset.height,
+    defaultProps: { brief, platform: preset },
+  });
+});
+
+// Teaser pass: one Reel-<platform>-teaser composition per selected social
+// platform (gif outputs excluded), same dimensions as the platform preset.
+const teaser = brief.cuts.teaser;
+if (teaser && teaser.length > 0 && calcTotalDuration(teaser) > TEASER_MAX_FRAMES) {
+  console.warn(
+    `reelme: the teaser cut runs ${calcTotalDuration(teaser)} frames, over the ${TEASER_MAX_FRAMES}-frame ` +
+      `(10s) ceiling. Rendering anyway — a teaser should be hook + CTA, nothing more.`
+  );
+}
+const teaserCompositions =
+  teaser && teaser.length > 0
+    ? platformIds
+        .filter((id) => PLATFORMS[id].output.codec !== "gif")
+        .map((id) => {
+          const preset = PLATFORMS[id];
+          return React.createElement(Composition, {
+            key: `Reel-${id}-teaser`,
+            id: `Reel-${id}-teaser`,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            component: Reel as React.FC<any>,
+            durationInFrames: calcTotalDuration(teaser),
+            fps: preset.fps,
+            width: preset.width,
+            height: preset.height,
+            defaultProps: { brief, platform: preset, cut: "teaser" as const },
+          });
+        })
+    : [];
+
+registerRoot(() => {
+  return React.createElement(React.Fragment, null, ...compositions, ...teaserCompositions);
+});

package/template/src/platforms.json

@@ -0,0 +1,78 @@
+{
+  "x": {
+    "id": "x",
+    "label": "X",
+    "cut": "main",
+    "width": 1920,
+    "height": 1080,
+    "fps": 30,
+    "output": { "file": "reelme-out/x.mp4", "codec": "h264" }
+  },
+  "linkedin": {
+    "id": "linkedin",
+    "label": "LinkedIn",
+    "cut": "main",
+    "width": 1920,
+    "height": 1080,
+    "fps": 30,
+    "output": { "file": "reelme-out/linkedin.mp4", "codec": "h264" }
+  },
+  "youtube": {
+    "id": "youtube",
+    "label": "YouTube",
+    "cut": "main",
+    "width": 1920,
+    "height": 1080,
+    "fps": 30,
+    "output": { "file": "reelme-out/youtube.mp4", "codec": "h264" }
+  },
+  "instagram-feed": {
+    "id": "instagram-feed",
+    "label": "Instagram Feed",
+    "cut": "main",
+    "width": 1080,
+    "height": 1080,
+    "fps": 30,
+    "output": { "file": "reelme-out/instagram-feed.mp4", "codec": "h264" }
+  },
+  "tiktok": {
+    "id": "tiktok",
+    "label": "TikTok",
+    "cut": "vertical",
+    "width": 1080,
+    "height": 1920,
+    "fps": 30,
+    "maxDurationSec": 60,
+    "safeArea": { "top": 160, "bottom": 320 },
+    "output": { "file": "reelme-out/tiktok.mp4", "codec": "h264" }
+  },
+  "instagram-reel": {
+    "id": "instagram-reel",
+    "label": "Instagram Reel",
+    "cut": "vertical",
+    "width": 1080,
+    "height": 1920,
+    "fps": 30,
+    "safeArea": { "top": 220, "bottom": 420 },
+    "output": { "file": "reelme-out/instagram-reel.mp4", "codec": "h264" }
+  },
+  "instagram-story": {
+    "id": "instagram-story",
+    "label": "Instagram Story",
+    "cut": "vertical",
+    "width": 1080,
+    "height": 1920,
+    "fps": 30,
+    "safeArea": { "top": 250, "bottom": 250 },
+    "output": { "file": "reelme-out/instagram-story.mp4", "codec": "h264" }
+  },
+  "github-readme": {
+    "id": "github-readme",
+    "label": "GitHub README",
+    "cut": "main",
+    "width": 1920,
+    "height": 1080,
+    "fps": 30,
+    "output": { "file": "reelme-out/github-readme.gif", "codec": "gif" }
+  }
+}

package/template/src/platforms.ts

@@ -0,0 +1,36 @@
+// Platform presets: turn a PlatformId into concrete render parameters.
+// Users pick platforms by name; aspect ratio, fps, duration ceilings, and
+// safe areas are internal preset details, never user-facing questions.
+//
+// The data lives in platforms.json — the single source of truth shared with
+// the CLI (which reads the JSON directly; it has no TypeScript build step).
+
+import presets from "./platforms.json";
+
+export type PlatformId =
+  | "x"
+  | "linkedin"
+  | "youtube"
+  | "tiktok"
+  | "instagram-reel"
+  | "instagram-story"
+  | "instagram-feed"
+  | "github-readme";
+
+export interface PlatformPreset {
+  id: PlatformId;
+  label: string;
+  cut: "main" | "vertical";
+  width: number;
+  height: number;
+  fps: number;
+  maxDurationSec?: number;
+  safeArea?: { top: number; bottom: number }; // px insets at preset resolution
+  output: { file: string; codec: "h264" | "gif" };
+}
+
+export const PLATFORMS = presets as Record<PlatformId, PlatformPreset>;
+
+export function cutForPlatform(id: PlatformId): "main" | "vertical" {
+  return PLATFORMS[id].cut;
+}

package/template/src/theme.ts

@@ -0,0 +1,88 @@
+import chroma from "chroma-js";
+import { resolveSansFont, resolveMonoFont } from "./fonts";
+
+export interface MotionProfile {
+  damping: number;
+  stiffness: number;
+  mass: number;
+}
+
+export interface Theme {
+  bg: string;
+  surface: string;
+  accent: string;
+  accentMuted: string;
+  text: string;
+  textMuted: string;
+  textInverse: string;
+  border: string;
+  fontMono: string;
+  fontSans: string;
+  motion: MotionProfile;
+}
+
+const MOTION_PROFILES: Record<string, MotionProfile> = {
+  professional: { damping: 22, stiffness: 100, mass: 1.0 },
+  playful:      { damping: 11, stiffness: 130, mass: 0.7 },
+  technical:    { damping: 30, stiffness: 140, mass: 1.2 },
+};
+
+const TONE_FONTS: Record<string, { sans: string; mono: string }> = {
+  professional: { sans: "Inter",        mono: "JetBrains Mono" },
+  playful:      { sans: "Nunito",        mono: "JetBrains Mono" },
+  technical:    { sans: "IBM Plex Sans", mono: "Space Mono" },
+};
+
+export function buildTheme(
+  primaryHex: string,
+  font?: string,
+  monoFont?: string,
+  tone?: string,
+  bgStyle?: "deep" | "branded" | "light",
+): Theme {
+  const accent = chroma(primaryHex);
+  const isLightBg = bgStyle === "light";
+
+  let bg: string;
+  let surface: string;
+  let text: string;
+  let textMuted: string;
+  let textInverse: string;
+  let border: string;
+
+  if (isLightBg) {
+    bg = chroma.mix(accent, "#fafafa", 0.9, "lab").hex();
+    surface = chroma.mix(accent, "#efefef", 0.85, "lab").hex();
+    border = chroma.mix(accent, "#000000", 0.12, "lab").hex();
+    text = "#111118";
+    textMuted = "#555566";
+    textInverse = "#f0f0f6";
+  } else {
+    const mixRatio = bgStyle === "branded" ? 0.76 : 0.92;
+    bg = chroma.mix(accent, "#0f0f13", mixRatio, "lab").hex();
+    surface = chroma.mix(accent, "#1a1a24", mixRatio - 0.04, "lab").hex();
+    border = chroma.mix(accent, "#ffffff", 0.1, "lab").hex();
+    text = "#f0f0f6";
+    textMuted = "#888899";
+    textInverse = "#111118";
+  }
+
+  const accentMuted = accent.alpha(0.18).css();
+  const toneKey = tone ?? "professional";
+  const motion = MOTION_PROFILES[toneKey] ?? MOTION_PROFILES.professional;
+  const toneFont = TONE_FONTS[toneKey] ?? TONE_FONTS.professional;
+
+  return {
+    bg,
+    surface,
+    accent: accent.hex(),
+    accentMuted,
+    text,
+    textMuted,
+    textInverse,
+    border,
+    fontMono: resolveMonoFont(monoFont ?? toneFont.mono),
+    fontSans: resolveSansFont(font ?? toneFont.sans),
+    motion,
+  };
+}

package/template/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "resolveJsonModule": true
+  },
+  "include": ["src"]
+}