reelkit-cli 0.8.0 → 0.10.2

package/src/{remotion → hyperframes}/kit/theme.ts

@@ -1,43 +1,44 @@
-import { loadFont as loadBody } from "@remotion/google-fonts/Inter";
-import { loadFont as loadDisplay } from "@remotion/google-fonts/Sora";
-import { loadFont as loadArchivoBlack } from "@remotion/google-fonts/ArchivoBlack";
-import { loadFont as loadBebasNeue } from "@remotion/google-fonts/BebasNeue";
-import { loadFont as loadGreatVibes } from "@remotion/google-fonts/GreatVibes";
-import { loadFont as loadJetBrainsMono } from "@remotion/google-fonts/JetBrainsMono";
-import { loadFont as loadKanit } from "@remotion/google-fonts/Kanit";
-import { loadFont as loadModak } from "@remotion/google-fonts/Modak";
-import { loadFont as loadMontserrat } from "@remotion/google-fonts/Montserrat";
-import { loadFont as loadRoboto } from "@remotion/google-fonts/Roboto";
-import { loadFont as loadRobotoSlab } from "@remotion/google-fonts/RobotoSlab";
-import { loadFont as loadSacramento } from "@remotion/google-fonts/Sacramento";
-import { loadFont as loadUnbounded } from "@remotion/google-fonts/Unbounded";
-import { loadFont as loadBungeeShade } from "@remotion/google-fonts/BungeeShade";
-import { loadFont as loadCinzel } from "@remotion/google-fonts/Cinzel";
-import { loadFont as loadCreepster } from "@remotion/google-fonts/Creepster";
-import { loadFont as loadHeebo } from "@remotion/google-fonts/Heebo";
-import { loadFont as loadKaushanScript } from "@remotion/google-fonts/KaushanScript";
-import { loadFont as loadLilitaOne } from "@remotion/google-fonts/LilitaOne";
-import { loadFont as loadMrsSaintDelafield } from "@remotion/google-fonts/MrsSaintDelafield";
-import { loadFont as loadOrbitron } from "@remotion/google-fonts/Orbitron";
-import { loadFont as loadOutfit } from "@remotion/google-fonts/Outfit";
-import { loadFont as loadPermanentMarker } from "@remotion/google-fonts/PermanentMarker";
-import { loadFont as loadPlayfairDisplay } from "@remotion/google-fonts/PlayfairDisplay";
-import { loadFont as loadRubik } from "@remotion/google-fonts/Rubik";
-import { loadFont as loadRye } from "@remotion/google-fonts/Rye";
-import { loadFont as loadSyne } from "@remotion/google-fonts/Syne";
-import { loadFont as loadYellowtail } from "@remotion/google-fonts/Yellowtail";
-import { loadFont as loadAlef } from "@remotion/google-fonts/Alef";
-import { loadFont as loadAmaticSC } from "@remotion/google-fonts/AmaticSC";
-import { loadFont as loadAssistant } from "@remotion/google-fonts/Assistant";
-import { loadFont as loadDavidLibre } from "@remotion/google-fonts/DavidLibre";
-import { loadFont as loadFrankRuhlLibre } from "@remotion/google-fonts/FrankRuhlLibre";
-import { loadFont as loadFredoka } from "@remotion/google-fonts/Fredoka";
-import { loadFont as loadKarantina } from "@remotion/google-fonts/Karantina";
-import { loadFont as loadNotoSansHebrew } from "@remotion/google-fonts/NotoSansHebrew";
-import { loadFont as loadSecularOne } from "@remotion/google-fonts/SecularOne";
-import { loadFont as loadSuezOne } from "@remotion/google-fonts/SuezOne";
-import { loadFont as loadVarelaRound } from "@remotion/google-fonts/VarelaRound";
-import { Easing } from "remotion";
+import { loadFont } from "../fonts";
+const loadBody = (_style: string, _options: unknown) => loadFont("Inter", "inter");
+const loadDisplay = (_style: string, _options: unknown) => loadFont("Sora", "sora");
+const loadArchivoBlack = (_style: string, _options: unknown) => loadFont("Archivo Black", "archivo-black");
+const loadBebasNeue = (_style: string, _options: unknown) => loadFont("Bebas Neue", "bebas-neue");
+const loadGreatVibes = (_style: string, _options: unknown) => loadFont("Great Vibes", "great-vibes");
+const loadJetBrainsMono = (_style: string, _options: unknown) => loadFont("JetBrains Mono", "jetbrains-mono");
+const loadKanit = (_style: string, _options: unknown) => loadFont("Kanit", "kanit");
+const loadModak = (_style: string, _options: unknown) => loadFont("Modak", "modak");
+const loadMontserrat = (_style: string, _options: unknown) => loadFont("Montserrat", "montserrat");
+const loadRoboto = (_style: string, _options: unknown) => loadFont("Roboto", "roboto");
+const loadRobotoSlab = (_style: string, _options: unknown) => loadFont("Roboto Slab", "roboto-slab");
+const loadSacramento = (_style: string, _options: unknown) => loadFont("Sacramento", "sacramento");
+const loadUnbounded = (_style: string, _options: unknown) => loadFont("Unbounded", "unbounded");
+const loadBungeeShade = (_style: string, _options: unknown) => loadFont("Bungee Shade", "bungee-shade");
+const loadCinzel = (_style: string, _options: unknown) => loadFont("Cinzel", "cinzel");
+const loadCreepster = (_style: string, _options: unknown) => loadFont("Creepster", "creepster");
+const loadHeebo = (_style: string, _options: unknown) => loadFont("Heebo", "heebo");
+const loadKaushanScript = (_style: string, _options: unknown) => loadFont("Kaushan Script", "kaushan-script");
+const loadLilitaOne = (_style: string, _options: unknown) => loadFont("Lilita One", "lilita-one");
+const loadMrsSaintDelafield = (_style: string, _options: unknown) => loadFont("Mrs Saint Delafield", "mrs-saint-delafield");
+const loadOrbitron = (_style: string, _options: unknown) => loadFont("Orbitron", "orbitron");
+const loadOutfit = (_style: string, _options: unknown) => loadFont("Outfit", "outfit");
+const loadPermanentMarker = (_style: string, _options: unknown) => loadFont("Permanent Marker", "permanent-marker");
+const loadPlayfairDisplay = (_style: string, _options: unknown) => loadFont("Playfair Display", "playfair-display");
+const loadRubik = (_style: string, _options: unknown) => loadFont("Rubik", "rubik");
+const loadRye = (_style: string, _options: unknown) => loadFont("Rye", "rye");
+const loadSyne = (_style: string, _options: unknown) => loadFont("Syne", "syne");
+const loadYellowtail = (_style: string, _options: unknown) => loadFont("Yellowtail", "yellowtail");
+const loadAlef = (_style: string, _options: unknown) => loadFont("Alef", "alef");
+const loadAmaticSC = (_style: string, _options: unknown) => loadFont("Amatic SC", "amatic-sc");
+const loadAssistant = (_style: string, _options: unknown) => loadFont("Assistant", "assistant");
+const loadDavidLibre = (_style: string, _options: unknown) => loadFont("David Libre", "david-libre");
+const loadFrankRuhlLibre = (_style: string, _options: unknown) => loadFont("Frank Ruhl Libre", "frank-ruhl-libre");
+const loadFredoka = (_style: string, _options: unknown) => loadFont("Fredoka", "fredoka");
+const loadKarantina = (_style: string, _options: unknown) => loadFont("Karantina", "karantina");
+const loadNotoSansHebrew = (_style: string, _options: unknown) => loadFont("Noto Sans Hebrew", "noto-sans-hebrew");
+const loadSecularOne = (_style: string, _options: unknown) => loadFont("Secular One", "secular-one");
+const loadSuezOne = (_style: string, _options: unknown) => loadFont("Suez One", "suez-one");
+const loadVarelaRound = (_style: string, _options: unknown) => loadFont("Varela Round", "varela-round");
+import { Easing } from "../frame";
 
 // Loaded once for every video. Hero text must never fall back to a system default font.
 const display = loadDisplay("normal", { weights: ["600", "700", "800"], subsets: ["latin"] });
@@ -98,6 +99,7 @@ const loaders = {
   amaticSC: () => loadAmaticSC("normal", { weights: ["400", "700"], ...hebrew }), // hand-lettered capitals
 };
 export type KitFont = keyof typeof loaders;
+export const KIT_FONTS = Object.keys(loaders) as KitFont[];
 const loaded = new Map<KitFont, string>();
 export function font(name: KitFont): string {
   let family = loaded.get(name);

package/src/{remotion → hyperframes}/kit/ui-math.ts

@@ -2,7 +2,7 @@
 // mount: the frame useCurrentFrame() gives where the component stands (inside a SceneFrame, the scene's own frame; inside a Sequence, the sequence's).
 // Each component has a companion function here that takes the SAME props and returns the frames of its events, in that same clock, so a sound can be
 // placed on them: add the scene's startFrame (or pass it as `offset` to cuesFor) to make them absolute.
-import { measureSpring } from "remotion";
+import { measureSpring } from "../frame";
 
 export const clamp01 = (n: number) => (n > 0 ? (n < 1 ? n : 1) : 0);
 export const outCubic = (t: number) => 1 - (1 - clamp01(t)) ** 3;

package/src/hyperframes/math.ts

@@ -0,0 +1,62 @@
+// Seekable animation math. These functions have no browser or React dependency.
+export type SpringConfig = { damping?: number; stiffness?: number; mass?: number; overshootClamping?: boolean };
+export function spring({ frame, fps, config = {}, from = 0, to = 1, delay = 0, durationInFrames, durationRestThreshold = 0.005, reverse = false }: { frame: number; fps: number; config?: SpringConfig; from?: number; to?: number; delay?: number; durationInFrames?: number; durationRestThreshold?: number; reverse?: boolean }): number {
+  const length = durationInFrames ?? measureSpring({ fps, config, threshold: durationRestThreshold });
+  let f = frame - delay;
+  if (reverse) f = length - f;
+  if (f <= 0) return from;
+  if (durationInFrames && f >= durationInFrames) return to;
+  const t = f / fps * (durationInFrames ? measureSpring({ fps, config, threshold: durationRestThreshold }) / durationInFrames : 1);
+  const m = config.mass ?? 1, k = config.stiffness ?? 100, c = config.damping ?? 10;
+  const w = Math.sqrt(k / m), z = c / (2 * Math.sqrt(k * m));
+  let p: number;
+  if (z < 1) { const wd = w * Math.sqrt(1 - z * z); p = 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + z * w / wd * Math.sin(wd * t)); }
+  else if (z === 1) p = 1 - (1 + w * t) * Math.exp(-w * t);
+  else { const r = Math.sqrt(z * z - 1), a = -w * (z - r), b = -w * (z + r); p = 1 - (b * Math.exp(a * t) - a * Math.exp(b * t)) / (b - a); }
+  return from + (to - from) * (config.overshootClamping ? Math.min(1, p) : p);
+}
+export function measureSpring({ fps, config = {}, threshold = 0.005 }: { fps: number; config?: SpringConfig; threshold?: number }): number {
+  const m = config.mass ?? 1, k = config.stiffness ?? 100, c = config.damping ?? 10;
+  const w = Math.sqrt(k / m), z = c / (2 * Math.sqrt(k * m));
+  // Require a full second inside the rest band so an oscillation's zero crossing cannot end the spring.
+  let last = 0;
+  for (let f = 0; f < fps * 60; f++) {
+    const t = f / fps;
+    let error: number;
+    if (z < 1) { const wd = w * Math.sqrt(1 - z * z); error = Math.exp(-z * w * t) * (Math.cos(wd * t) + z * w / wd * Math.sin(wd * t)); }
+    else if (z === 1) error = (1 + w * t) * Math.exp(-w * t);
+    else { const r = Math.sqrt(z * z - 1), a = -w * (z - r), b = -w * (z + r); error = (b * Math.exp(a * t) - a * Math.exp(b * t)) / (b - a); }
+    if (Math.abs(error) > threshold) last = f;
+    if (f - last >= fps) return last + 1;
+  }
+  throw new Error("Spring did not settle within 60 seconds.");
+}
+type Extrapolate = "extend" | "clamp" | "identity" | "wrap";
+export function interpolate(value: number, input: readonly number[], output: readonly number[], options: { easing?: (t: number) => number; extrapolateLeft?: Extrapolate; extrapolateRight?: Extrapolate } = {}): number {
+  if (input.length !== output.length || input.length < 2 || input.some((n, i) => i > 0 && n <= input[i - 1]!)) throw new Error("Interpolation ranges must have equal length and increasing input values.");
+  const lo = input[0]!, hi = input[input.length - 1]!;
+  if (value < lo || value > hi) { const mode = value < lo ? options.extrapolateLeft : options.extrapolateRight; if (mode === "identity") return value; if (mode === "clamp") value = Math.min(hi, Math.max(lo, value)); if (mode === "wrap") value = lo + ((value - lo) % (hi - lo) + hi - lo) % (hi - lo); }
+  let i = 0; while (i < input.length - 2 && value > input[i + 1]!) i++;
+  const t = (value - input[i]!) / (input[i + 1]! - input[i]!);
+  return output[i]! + (output[i + 1]! - output[i]!) * (options.easing ?? Easing.linear)(t);
+}
+export const Easing = {
+  linear: (t: number) => t, quad: (t: number) => t * t, cubic: (t: number) => t ** 3,
+  sin: (t: number) => 1 - Math.cos(t * Math.PI / 2), exp: (t: number) => t === 0 ? 0 : 2 ** (10 * (t - 1)),
+  in: (fn: (t: number) => number) => fn,
+  out: (fn: (t: number) => number) => (t: number) => 1 - fn(1 - t),
+  inOut: (fn: (t: number) => number) => (t: number) => t < 0.5 ? fn(t * 2) / 2 : 1 - fn((1 - t) * 2) / 2,
+  bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => {
+    if (t <= 0 || t >= 1) return t;
+    const curve = (u: number, a: number, b: number) => 3 * (1 - u) ** 2 * u * a + 3 * (1 - u) * u * u * b + u ** 3;
+    let lo = 0, hi = 1;
+    for (let i = 0; i < 40; i++) { const u = (lo + hi) / 2; if (curve(u, x1, x2) < t) lo = u; else hi = u; }
+    return curve((lo + hi) / 2, y1, y2);
+  },
+};
+export function random(seed: string | number): number {
+  let h = 2166136261;
+  for (const c of String(seed)) h = Math.imul(h ^ c.charCodeAt(0), 16777619);
+  h ^= h >>> 16; h = Math.imul(h, 0x7feb352d); h ^= h >>> 15; h = Math.imul(h, 0x846ca68b);
+  return ((h ^ h >>> 16) >>> 0) / 4294967296;
+}

package/src/hyperframes/three.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Canvas, useThree, type CanvasProps } from "@react-three/fiber";
+import { FrameContext, useCurrentFrame, delayRender, continueRender } from "./frame";
+const Draw: React.FC = () => { const f = useCurrentFrame(), s = useThree(); React.useLayoutEffect(() => { s.invalidate(); }, [f, s]); return null; };
+export const ThreeCanvas: React.FC<CanvasProps & { width: number; height: number }> = ({ width, height, children, style, ...props }) => {
+  const state = React.useContext(FrameContext);
+  const [handle] = React.useState(() => delayRender("3D canvas"));
+  React.useEffect(() => () => continueRender(handle), [handle]);
+  return <Canvas {...props} onCreated={() => continueRender(handle)} frameloop="demand" gl={{ preserveDrawingBuffer: true, alpha: true }} style={{ width, height, ...style }}><FrameContext.Provider value={state}>{children}<Draw /></FrameContext.Provider></Canvas>;
+};

package/src/project/chromakey.ts

@@ -41,7 +41,7 @@ async function cornerGreen(input: string): Promise<{ colour: string; saturated:
   return { colour: `0x${[r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("")}`, saturated: g - Math.max(r, b) >= 60 };
 }
 
-// Turns the green of a green-screen clip into transparency: VP9 with an alpha channel, which Remotion plays with `transparent`.
+// Turns the green of a green-screen clip into transparency: VP9 with an alpha channel, which HyperFrames plays with `transparent`.
 // The key is on the green found in the frame's corners, with some give for noise and uneven light; the despill pulls the green glow
 // off the subject's edges. The original is left alone.
 export async function keyGreen(input: string, output: string, opts: KeyOptions = {}): Promise<void> {

package/src/project/layers.ts

@@ -3,7 +3,7 @@ import { mkdtempSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { promisify } from "node:util";
-import { coverageOf, subjectBoxOf, textZoneOf, type ImageLayersRecord, type Rect, type TextZone } from "../remotion/kit/image-layers-math";
+import { coverageOf, subjectBoxOf, textZoneOf, type ImageLayersRecord, type Rect, type TextZone } from "../hyperframes/kit/image-layers-math";
 
 const run = promisify(execFile);
 const GRID = 48;

package/src/project/serve.ts

@@ -12,9 +12,9 @@ const TYPES: Record<string, string> = {
 
 export type MediaServer = { url(rel: string): string; close(): Promise<void> };
 
-// Remotion loads media over HTTP, so the project's media is served on a local port while a build runs.
+// HyperFrames loads media over HTTP, so the project's media is served on a local port while a build runs.
 // Only files under <project>/assets/ are served, never .json, and only under a random per-run path prefix: access-control-allow-origin
-// has to be * for Remotion's renderer, so the unguessable prefix is what keeps other web pages from reading the files.
+// has to be * for HyperFrames's renderer, so the unguessable prefix is what keeps other web pages from reading the files.
 export async function serveDir(root: string): Promise<MediaServer> {
   const assets = join(resolve(root), "assets");
   const prefix = randomBytes(16).toString("hex");

package/src/render/component-preview.ts

@@ -1,65 +1,21 @@
-import { execFile } from "node:child_process";
-import { mkdir, mkdtemp, rename, rm, writeFile } from "node:fs/promises";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { dirname, join } from "node:path";
-import { promisify } from "node:util";
-import { renderMedia, selectComposition } from "@remotion/renderer";
-import { bundleProject, disposeBundle } from "./render";
-
-const run = promisify(execFile);
-const NAME = /^[A-Z][A-Za-z0-9]*$/;
-
+import { bundleProject, disposeBundle, renderVideo } from "./render";
+import { migrateFrameImports } from "./static-check";
 export const PREVIEW = { width: 960, height: 600, fps: 30, frames: 105 } as const;
-
-// The generated entry: the kit's default dark background with the example filling the frame. Importing the kit also loads
-// its fonts, which is what makes text render in the kit fonts. `name` is checked against NAME and `example` starts with `<name`,
-// because both are interpolated into this code; the example is trusted seed text from the owner's own repository.
-const entrySource = (name: string, example: string) => `import React from "react";
-import { AbsoluteFill, Composition, registerRoot } from "remotion";
-import { palettes } from "reelkit/kit";
-import { ${name} } from "./${name}";
-
-void ${name};
-const Preview: React.FC = () => (
-  <AbsoluteFill style={{ background: palettes.darkTech.bg }}>
-    ${example}
-  </AbsoluteFill>
-);
-
-registerRoot(() => (
-  <Composition id="Preview" component={Preview} durationInFrames={${PREVIEW.frames}} fps={${PREVIEW.fps}} width={${PREVIEW.width}} height={${PREVIEW.height}} />
-));
-`;
-
-// Renders one component with its example to a short silent MP4 (960x600, 30 fps, 3.5 s, H.264, yuv420p, CRF 28).
-// Everything it creates besides outPath (the temp folder and the bundle) is removed again, also when it fails.
+const NAME = /^[A-Z][A-Za-z0-9]*$/;
 export async function renderComponentPreview(input: { name: string; source: string; example: string }, outPath: string): Promise<void> {
   const { name, source, example } = input;
   if (!NAME.test(name)) throw new Error(`Component name "${name}" must be PascalCase letters and digits.`);
   if (!example.trimStart().startsWith(`<${name}`)) throw new Error(`The example for ${name} must start with <${name}.`);
-
-  const work = await mkdtemp(join(tmpdir(), "rk-cmp-preview-"));
-  let serveUrl: string | undefined;
+  const work = await mkdtemp(join(tmpdir(), "rk-cmp-preview-")); let bundle: string | undefined;
+  const props = { manifest: { width: PREVIEW.width, height: PREVIEW.height, fps: PREVIEW.fps, totalFrames: PREVIEW.frames, scenes: [] }, urls: {} };
   try {
-    await writeFile(join(work, `${name}.tsx`), source);
+    await writeFile(join(work, `${name}.tsx`), migrateFrameImports(source));
     const entry = join(work, "index.tsx");
-    await writeFile(entry, entrySource(name, example.trim()));
-    serveUrl = await bundleProject(entry);
-    const composition = await selectComposition({ serveUrl, id: "Preview" });
-    const rendered = join(work, "rendered.mp4");
-    await renderMedia({
-      composition, serveUrl, codec: "h264", outputLocation: rendered, crf: 28, pixelFormat: "yuv420p", colorSpace: "bt709", muted: true, logLevel: "error",
-    });
-    // The last pass guarantees no audio stream and the index at the front, whatever Remotion wrote; the video is copied, not re-encoded.
-    const finished = join(work, "final.mp4");
-    await run("ffmpeg", ["-y", "-v", "error", "-i", rendered, "-an", "-movflags", "+faststart", "-c:v", "copy", finished]);
-    await mkdir(dirname(outPath), { recursive: true });
-    await rename(finished, outPath).catch(async () => {
-      // A different file system than the temp folder: copy instead.
-      await run("ffmpeg", ["-y", "-v", "error", "-i", finished, "-c", "copy", "-movflags", "+faststart", outPath]);
-    });
-  } finally {
-    if (serveUrl) await disposeBundle(serveUrl).catch(() => {});
-    await rm(work, { recursive: true, force: true });
-  }
+    await writeFile(entry, `import React from "react";\nimport { AbsoluteFill } from "reelkit/frame";\nimport { mountVideo } from "reelkit/host";\nimport { palettes } from "reelkit/kit";\nimport { ${name} } from "./${name}";\nmountVideo(() => <AbsoluteFill style={{background: palettes.darkTech.bg}}>${example.trim()}</AbsoluteFill>);\n`);
+    bundle = await bundleProject(entry); await mkdir(dirname(outPath), { recursive: true });
+    await renderVideo(bundle, props, outPath, { silent: true, crf: 28 });
+  } finally { if (bundle) await disposeBundle(bundle).catch(() => {}); await rm(work, { recursive: true, force: true }); }
 }

package/src/render/render.ts

@@ -1,81 +1,79 @@
-import { mkdir, rm, writeFile } from "node:fs/promises";
-import { dirname, join } from "node:path";
-import { bundle } from "@remotion/bundler";
-import { ensureBrowser, renderMedia, renderStill, selectComposition } from "@remotion/renderer";
-import type { VideoProps } from "../remotion/types";
+import { execFile } from "node:child_process";
+import { cp, mkdir, mkdtemp, rm, writeFile, readdir, readFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join, basename } from "node:path";
+import { promisify } from "node:util";
+import { build } from "esbuild";
+import type { VideoProps } from "../hyperframes/types";
+import { fontFamilies } from "../hyperframes/fonts";
 import { packageDir } from "./deps";
-import { KIT_INDEX, ROOT_FILE } from "./validate";
+import { KIT_INDEX, PKG_ROOT } from "./validate";
 
-const ENTRY_SOURCE = `import { registerRoot } from "remotion";
-import { makeRoot } from "reelkit/root";
-import { Video } from "../../src/Video";
-
-registerRoot(makeRoot(Video));
-`;
-
-// The project folder has no node_modules. Each dependency is pinned to the one copy installed with this package, so the
-// kit, Root and the user's composition all share a single react and remotion (a second react breaks hooks), and the 3D layer a single three
-// (two copies of three break instanceof checks). User code still may not import them: only the kit does.
+const run = promisify(execFile);
+const HOST = join(PKG_ROOT, "src/hyperframes/host.tsx");
+const FRAME = join(PKG_ROOT, "src/hyperframes/frame.tsx");
 export function dependencyAliases(): Record<string, string> {
-  return Object.fromEntries(["react", "react-dom", "remotion", "three", "@react-three/fiber", "@remotion/three"].map((n) => [n, packageDir(n)]));
+  return Object.fromEntries(["react", "react-dom", "three", "@react-three/fiber"].map((name) => [name, packageDir(name)]));
 }
-
-// Writes the bundler's entry file into the project. The composition itself stays where the user's Claude wrote it.
 export async function writeEntry(projectDir: string): Promise<string> {
   const dir = join(projectDir, ".reelkit", "build");
-  await rm(dir, { recursive: true, force: true });
-  await mkdir(dir, { recursive: true });
+  await rm(dir, { recursive: true, force: true }); await mkdir(dir, { recursive: true });
   const entry = join(dir, "index.ts");
-  await writeFile(entry, ENTRY_SOURCE);
+  await writeFile(entry, 'import { mountVideo } from "reelkit/host";\nimport { Video } from "../../src/Video";\nmountVideo(Video);\n');
   return entry;
 }
-
-// Webpack's on-disk cache would only grow, by tens of megabytes per render. It is switched off, and each bundle
-// is deleted by disposeBundle once it has been used.
+// A self-contained HyperFrames page using the package's copies of React and Three.
 export async function bundleProject(entry: string): Promise<string> {
-  return bundle({
-    entryPoint: entry,
-    enableCaching: false,
-    webpackOverride: (config) => ({
-      ...config,
-      resolve: {
-        ...config.resolve,
-        alias: { ...(config.resolve?.alias as Record<string, string> | undefined), ...dependencyAliases(), "reelkit/kit": KIT_INDEX, "reelkit/root": ROOT_FILE },
-      },
-    }),
-  });
+  const dir = await mkdtemp(join(tmpdir(), "reelkit-hyperframes-"));
+  try {
+    await build({ entryPoints: [entry], bundle: true, outfile: join(dir, "composition.js"), platform: "browser", format: "iife", jsx: "automatic", logLevel: "silent", loader: { ".woff2": "file", ".woff": "file", ".ttf": "file" }, define: { "process.env.NODE_ENV": '"production"' }, alias: { ...dependencyAliases(), "reelkit/kit": KIT_INDEX, "reelkit/frame": FRAME, "reelkit/host": HOST } });
+    await mkdir(join(dir, "fonts"));
+    for (const slug of Object.values(fontFamilies)) {
+      const source = packageDir(`@fontsource/${slug}`);
+      await cp(join(source, "files"), join(dir, "fonts", "files"), { recursive: true });
+      const sheets = (await readdir(source)).filter((name) => /^\d+(?:-italic)?\.css$/.test(name));
+      await writeFile(join(dir, "fonts", `${slug}.css`), (await Promise.all(sheets.map((name) => readFile(join(source, name), "utf8")))).join("\n"));
+    }
+    await writeFile(join(dir, "index.html"), '<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;overflow:hidden}#stage{position:relative;overflow:hidden}</style></head><body><div id="stage"></div><script src="props.js"></script><script src="composition.js"></script></body></html>');
+    return dir;
+  } catch (error) { await rm(dir, { recursive: true, force: true }); throw error; }
 }
-
-export async function disposeBundle(serveUrl: string): Promise<void> {
-  // Only ever remove a folder that is one of Remotion's own temporary bundles.
-  if (/remotion-webpack-bundle-/.test(serveUrl)) await rm(serveUrl, { recursive: true, force: true });
+export async function disposeBundle(dir: string): Promise<void> {
+  if (dirname(dir) === tmpdir() && basename(dir).startsWith("reelkit-hyperframes-")) await rm(dir, { recursive: true, force: true });
 }
-
-// Makes sure Remotion's headless browser is installed. onDownload is called once, only when a download is about to begin.
-// Remotion's own progress bar is replaced because it writes to stdout, which --json keeps for the result alone.
 export type EnsureBrowser = (onDownload: () => void) => Promise<void>;
+export const GL_BACKEND = "software" as const;
+export type RenderOptions = { uses3D?: boolean; silent?: boolean; crf?: number };
+export function browserPath(): string | undefined {
+  if (process.env.REELKIT_CHROME_PATH) return process.env.REELKIT_CHROME_PATH;
+  const paths = process.platform === "darwin" ? ["/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", "/Applications/Chromium.app/Contents/MacOS/Chromium"] : process.platform === "linux" ? ["/usr/bin/chromium", "/usr/bin/chromium-browser", "/usr/bin/google-chrome"] : [];
+  return paths.find(existsSync);
+}
 export const ensureRenderBrowser: EnsureBrowser = async (onDownload) => {
-  await ensureBrowser({ onBrowserDownload: () => { onDownload(); return { version: null, onProgress: () => {} }; } });
+  if (browserPath()) return;
+  const { resolveHeadlessShellPath } = await import("@hyperframes/engine");
+  const cached = resolveHeadlessShellPath({}) ?? resolveHeadlessShellPath({ chromePath: undefined });
+  if (cached) { process.env.REELKIT_CHROME_PATH = cached; return; }
+  const { install, Browser, resolveBuildId, detectBrowserPlatform, getInstalledBrowsers } = await import("@puppeteer/browsers");
+  const installed = (await getInstalledBrowsers({ cacheDir: join(PKG_ROOT, ".browser") })).find((b) => b.browser === Browser.CHROMEHEADLESSSHELL && existsSync(b.executablePath));
+  if (installed) { process.env.REELKIT_CHROME_PATH = installed.executablePath; return; }
+  const platform = detectBrowserPlatform(); if (!platform) throw new Error("No supported Chrome platform. Set REELKIT_CHROME_PATH.");
+  onDownload();
+  const browser = await install({ browser: Browser.CHROMEHEADLESSSHELL, buildId: await resolveBuildId(Browser.CHROMEHEADLESSSHELL, platform, "stable"), cacheDir: join(PKG_ROOT, ".browser"), platform });
+  process.env.REELKIT_CHROME_PATH = browser.executablePath;
 };
-
-// Remotion's headless browser has no GPU, so three.js needs a software GL. "angle" is the setting that draws WebGL here; it is used only for a film that
-// has a 3D scene, so every 2D render keeps the browser's own defaults and looks exactly as before. This is the one place that says it.
-export const GL_BACKEND = "angle" as const;
-export type RenderOptions = { uses3D?: boolean };
-const chromium = (o?: RenderOptions) => (o?.uses3D ? { chromiumOptions: { gl: GL_BACKEND } } : {});
-
-const asInput = (props: VideoProps) => props as unknown as Record<string, unknown>;
-
-export async function renderStills(serveUrl: string, props: VideoProps, frames: number[], outDir: string, options?: RenderOptions) {
-  await mkdir(outDir, { recursive: true });
-  const composition = await selectComposition({ serveUrl, id: "Video", inputProps: asInput(props), ...chromium(options) });
-  for (const frame of frames) {
-    await renderStill({ composition, serveUrl, frame, output: join(outDir, `still-${frame}.png`), inputProps: asInput(props), ...chromium(options) });
-  }
+async function render(dir: string, props: VideoProps, mode: "stills" | "video", output: string, frames: number[], options?: RenderOptions) {
+  await ensureRenderBrowser(() => {});
+  await writeFile(join(dir, "props.js"), `window.__reelkitProps=${JSON.stringify(props).replace(/</g, "\\u003c")};`);
+  // Isolate engine diagnostics from the CLI's JSON stdout.
+  const request = join(dir, "render-request.json");
+  await writeFile(request, JSON.stringify({ dir, props, mode, output, frames, options, chromePath: browserPath() }));
+  await run(process.execPath, ["--import", join(packageDir("tsx"), "dist/loader.mjs"), join(PKG_ROOT, "src/render/worker.ts"), request], { maxBuffer: 16 * 1024 * 1024 });
 }
-
-export async function renderVideo(serveUrl: string, props: VideoProps, outPath: string, options?: RenderOptions) {
-  await mkdir(dirname(outPath), { recursive: true });
-  const composition = await selectComposition({ serveUrl, id: "Video", inputProps: asInput(props), ...chromium(options) });
-  await renderMedia({ composition, serveUrl, codec: "h264", outputLocation: outPath, inputProps: asInput(props), ...chromium(options) });
+export async function renderStills(dir: string, props: VideoProps, frames: number[], outDir: string, options?: RenderOptions) {
+  await mkdir(outDir, { recursive: true }); await render(dir, props, "stills", outDir, frames, options);
+}
+export async function renderVideo(dir: string, props: VideoProps, outPath: string, options?: RenderOptions) {
+  await mkdir(dirname(outPath), { recursive: true }); await render(dir, props, "video", outPath, [], options);
 }

package/src/render/serve.ts

@@ -0,0 +1,31 @@
+import { randomBytes } from "node:crypto";
+import { createReadStream, statSync } from "node:fs";
+import { createServer } from "node:http";
+import type { AddressInfo } from "node:net";
+import { extname, resolve, sep } from "node:path";
+
+const TYPES: Record<string, string> = {
+  ".html": "text/html; charset=utf-8", ".js": "application/javascript", ".css": "text/css",
+  ".json": "application/json", ".woff2": "font/woff2", ".woff": "font/woff", ".ttf": "font/ttf",
+  ".png": "image/png", ".jpg": "image/jpeg", ".svg": "image/svg+xml",
+};
+
+// Serve the generated composition only to localhost, under an unguessable per-render prefix.
+// The generic HyperFrames file server listens on all interfaces; project copy and media URLs stay private here.
+export async function serveComposition(dir: string): Promise<{ url: string; close(): Promise<void> }> {
+  const root = resolve(dir), prefix = `/${randomBytes(16).toString("hex")}/`;
+  const server = createServer((req, res) => {
+    let path: string;
+    try { path = decodeURIComponent((req.url ?? "").split("?")[0]!); } catch { res.writeHead(400).end(); return; }
+    if (!path.startsWith(prefix)) { res.writeHead(404).end(); return; }
+    const file = resolve(root, path.slice(prefix.length) || "index.html");
+    try {
+      if (!file.startsWith(root + sep) || !statSync(file).isFile()) { res.writeHead(404).end(); return; }
+      res.writeHead(200, { "content-type": TYPES[extname(file)] ?? "application/octet-stream", "cache-control": "no-store" });
+      const stream = createReadStream(file); stream.on("error", () => res.destroy()); stream.pipe(res);
+    } catch { res.writeHead(404).end(); }
+  });
+  await new Promise<void>((ready, reject) => { server.once("error", reject); server.listen(0, "127.0.0.1", ready); });
+  const port = (server.address() as AddressInfo).port;
+  return { url: `http://127.0.0.1:${port}${prefix}`, close: () => new Promise<void>((ready) => { server.closeAllConnections(); server.close(() => ready()); }) };
+}

package/src/render/static-check.ts

@@ -7,8 +7,19 @@ export const MAIN_FILE = "Video.tsx";
 export const FILE_NAME = /^[A-Z][A-Za-z0-9]*\.tsx$/;
 export const componentName = (file: string) => file.replace(/\.tsx$/, "");
 
+// Upgrade previously published library components without touching on-screen copy or comments.
+export function migrateFrameImports(source: string): string {
+  const parsed = sourceFile(source);
+  const edits: { start: number; end: number }[] = [];
+  for (const node of parsed.statements) {
+    if ((ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text === "remotion") edits.push({ start: node.moduleSpecifier.getStart(parsed), end: node.moduleSpecifier.getEnd() });
+  }
+  for (const edit of edits.reverse()) source = source.slice(0, edit.start) + '"reelkit/frame"' + source.slice(edit.end);
+  return source;
+}
+
 export const KIT = "reelkit/kit";
-const BASE_IMPORTS = new Set(["react", "remotion", KIT]);
+const BASE_IMPORTS = new Set(["react", "reelkit/frame", KIT]);
 
 // This check keeps honest compositions deterministic and self-contained. It is NOT a security boundary:
 // code in src/ runs on the user's machine when it is bundled and rendered, and anyone determined can get around a list of names.
@@ -77,7 +88,7 @@ function inspectSource(source: string, file?: string): Finding {
     return Boolean(x && ts.isIdentifier(x) && x.text === name && !declared(x));
   };
   const flagMember = (object: ts.Expression | undefined, member: string | undefined) => {
-    if (isGlobal(object, "Math") && member === "random") forbidden.add("Math.random (use random(seed) from remotion)");
+    if (isGlobal(object, "Math") && member === "random") forbidden.add("Math.random (use random(seed) from reelkit/frame)");
     if (isGlobal(object, "Date") && member === "now") forbidden.add("the clock (Date)");
   };
   // The key a destructuring element reads: `random` in `{ random }` and in `{ random: r }`, "random" in `{ ["random"]: r }`.
@@ -140,8 +151,8 @@ export function staticCheck(source: string, file: string, siblings: string[]): s
     if (BASE_IMPORTS.has(s) || allowedSiblings.has(s)) continue;
     errors.push(
       isMain
-        ? `${file}: import not allowed: "${s}". Use react, remotion, ${KIT}, or a component file that exists ("./Name").`
-        : `${file}: import not allowed: "${s}". A component may only import react, remotion and ${KIT}.`,
+        ? `${file}: import not allowed: "${s}". Use react, reelkit/frame, ${KIT}, or a component file that exists ("./Name").`
+        : `${file}: import not allowed: "${s}". A component may only import react, reelkit/frame and ${KIT}.`,
     );
   }
   for (const name of found.forbidden) errors.push(`${file}: not allowed: ${name}.`);

package/src/render/validate.ts

@@ -4,15 +4,15 @@ import ts from "typescript";
 import { packageDir } from "./deps";
 
 export const PKG_ROOT = fileURLToPath(new URL("../..", import.meta.url));
-export const KIT_INDEX = join(PKG_ROOT, "src", "remotion", "kit", "index.ts");
-export const ROOT_FILE = join(PKG_ROOT, "src", "remotion", "Root.tsx");
+export const KIT_INDEX = join(PKG_ROOT, "src", "hyperframes", "kit", "index.ts");
+export const ROOT_FILE = join(PKG_ROOT, "src", "hyperframes", "Root.tsx");
 
 // The static check lives in its own module, which a server can bundle; everything it exports is available from here as before.
 export { FILE_NAME, MAIN_FILE, componentName, importSpecifiers, staticCheck } from "./static-check";
 import { KIT, sourceFile, unwrap } from "./static-check";
 
 const typesReact = packageDir("@types/react");
-export const remotionDir = packageDir("remotion");
+export const frameFile = join(PKG_ROOT, "src", "hyperframes", "frame.tsx");
 
 export function typecheck(files: string[]): string[] {
   const program = ts.createProgram(files, {
@@ -30,7 +30,7 @@ export function typecheck(files: string[]): string[] {
       [KIT]: [KIT_INDEX],
       react: [typesReact],
       "react/*": [join(typesReact, "*")],
-      remotion: [remotionDir],
+      "reelkit/frame": [frameFile],
     },
   });
   const wanted = new Set(files);

package/src/render/word-check.ts

@@ -2,7 +2,7 @@
 // the word is in that scene's narration. Pure text in, findings out (the TypeScript syntax tree, never regular expressions on code), so `check`
 // and `preview` can both use it.
 import ts from "typescript";
-import { normalizeWord, wordFrame, type WordScene } from "../remotion/kit/word-anchor";
+import { normalizeWord, wordFrame, type WordScene } from "../hyperframes/kit/word-anchor";
 import { sourceFile, unwrap } from "./static-check";
 
 export const WORD_HELPERS = ["wordFrame", "wordFrames", "onWord", "onWordBeat"] as const;