reelkit-cli 0.8.0 → 0.10.0

package/src/{remotion → hyperframes}/kit/ScreenOverlay.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useMedia } from "./media";
-import { AbsoluteFill, Loop, OffthreadVideo, useVideoConfig } from "remotion";
+import { AbsoluteFill, Loop, OffthreadVideo, useVideoConfig } from "../frame";
 
 // Lays a white-on-black overlay clip (film marks, HUD frames) over the video. The "screen" blend drops the black.
 // Pass durationSec from the overlay's record to loop it for the whole video; without it the clip plays once.

package/src/{remotion → hyperframes}/kit/Sfx.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useGain, useMedia } from "./media";
-import { Audio, Sequence } from "remotion";
+import { Audio, Sequence } from "../frame";
 
 // Plays one sound effect starting at a frame. at is counted from the start of the enclosing scene, or of the video
 // when placed outside the scenes. Keep volume well under the voiceover.

package/src/{remotion → hyperframes}/kit/SoundCues.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { Audio, Sequence } from "remotion";
+import { Audio, Sequence } from "../frame";
 import { gainFor, ManifestContext, UrlsContext } from "./media";
 import { resolveCues, type SoundCue } from "./sound-cues";
 

package/src/{remotion → hyperframes}/kit/TerminalLog.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { interpolate, spring, useCurrentFrame, useVideoConfig } from "../frame";
 import { Place } from "./Place";
 import { font as loadFont, fonts, springs } from "./theme";
 import { DEFAULT_HERO, rgba, uiColors, type UiTheme } from "./ui-theme";

package/src/{remotion → hyperframes}/kit/Text3D.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useCurrentFrame, useVideoConfig } from "remotion";
+import { useCurrentFrame, useVideoConfig } from "../frame";
 import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
 import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
 import { interBoldTypeface } from "./inter-bold-typeface";

package/src/{remotion → hyperframes}/kit/TextOnImage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { createPortal } from "react-dom";
-import { AbsoluteFill, useVideoConfig } from "remotion";
+import { AbsoluteFill, useVideoConfig } from "../frame";
 import { ImageLayersContext, TextInkContext } from "./ImageLayers";
 import { inkFor, placementOf, REGIONS, zoneRect, type ImageLayersRecord, type Rect, type Region } from "./image-layers-math";
 

package/src/{remotion → hyperframes}/kit/TitleCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { fonts } from "./theme";
-import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "../frame";
 
 export const TitleCard: React.FC<{ text: string; subtitle?: string; color?: string; background?: string }> = ({
   text, subtitle, color = "#ffffff", background = "transparent",

package/src/{remotion → hyperframes}/kit/Voiceover.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 import { useMedia } from "./media";
-import { Audio } from "remotion";
+import { Audio } from "../frame";
 
 export const Voiceover: React.FC<{ src: string; volume?: number }> = ({ src, volume = 1 }) => <Audio src={useMedia(src)} volume={volume} />;

package/src/{remotion → hyperframes}/kit/Warp3D.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useCurrentFrame, useVideoConfig } from "remotion";
+import { useCurrentFrame, useVideoConfig } from "../frame";
 import { AdditiveBlending, BufferAttribute, Color, DoubleSide, type BufferGeometry } from "three";
 import { warpSpeed, warpStreaks, warpTravel, type SpeedKey } from "./three-fx-math";
 import type { Vec3 } from "./three-math";

package/src/hyperframes/kit/brand-transform.ts

@@ -0,0 +1,25 @@
+import { spring } from "../math";
+import type { Vec3 } from "./three-math";
+
+export const BRAND_TRANSFORMS = ["turn", "arc", "launch"] as const;
+export type BrandTransform = (typeof BRAND_TRANSFORMS)[number];
+export type BrandTransformTiming = { from?: number; frames?: number };
+export function brandTransformFrames({ from = 0, frames = 32 }: BrandTransformTiming = {}) {
+  const start = Math.max(0, Math.round(from));
+  return { start, settle: start + Math.max(2, Math.round(frames)) };
+}
+
+// A pose for any frame, including a seek straight to the hold. The final pose is exactly neutral.
+export function brandTransformAt(frame: number, fps: number, options: BrandTransformTiming & { mode?: BrandTransform; strength?: number } = {}): { visible: boolean; position: Vec3; rotation: Vec3; scale: number } {
+  const { start, settle } = brandTransformFrames(options);
+  const strength = Math.max(0, Math.min(1, options.strength ?? 1));
+  const p = spring({ frame: frame - start, fps, durationInFrames: settle - start, config: { stiffness: 120, damping: 24, overshootClamping: true } });
+  if (p >= 1) return { visible: true, position: [0, 0, 0], rotation: [0, 0, 0], scale: 1 };
+  const rest = (1 - p) * strength;
+  if (options.mode === "arc") {
+    const angle = (1 - p) * Math.PI * 0.75;
+    return { visible: frame >= start, position: [Math.sin(angle) * 0.65 * strength, Math.sin(angle / 2) * 0.22 * strength, -rest * 1.2], rotation: [rest * 0.06, -rest * 0.95, rest * 0.04], scale: 1 - rest * 0.28 };
+  }
+  if (options.mode === "launch") return { visible: frame >= start, position: [0, -rest * 0.28, -rest * 3], rotation: [0, rest * 0.2, rest * 0.08], scale: 1 - rest * 0.55 };
+  return { visible: frame >= start, position: [-rest * 0.35, -rest * 0.12, -rest * 0.5], rotation: [rest * 0.1, -rest * 1.2, rest * 0.03], scale: 1 - rest * 0.2 };
+}

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

@@ -123,6 +123,10 @@ Scene3D { camera?: { keys: { frame: number; x?: number; y?: number; z?: number;
   A three.js scene at the size of the frame, for real depth. Transparent unless background is set, so it lays over a 2D ground; a soft three-point light is placed for you (lights={false} to place your own); mood ("studio", "night", "sunset" or "neon") chooses the light colours, their intensities and the fog tint together instead, so lights are never hand-tuned. Put it inside a SceneFrame, with captions and small labels in 2D above it. camera.keys move the camera with the same timing as Camera (a spring that starts 12 frames before the key's frame and lands on it); the default camera is at z 6, looking at the origin, fov 50, and a key that leaves a value out keeps the one before. What it sees: at fov 50 the height is 0.93 times the distance to the object and the width that times width over height, so 3.1 units across at z 6 on 9:16 (4.7 at z 9), 5.6 on 1:1 and 9.9 on 16:9 (not "5.5"). Text3D and Orbit3D read the camera keys and size themselves to fit at the key where the camera is closest: leave their sizes out. visibleWidth(distance, aspect, fov?) and visibleHeight(distance, fov?) give the same numbers. No GL context is made unless a Scene3D is on screen. A 3D scene renders slower: use it only for the shots that need it. See reference/three-d.md.
   <Scene3D camera={{ keys: [{ frame: 0, z: 7.5 }, { frame: 40, z: 6 }] }}><Text3D text="Reelkit" color={palette.hero} enter="rise" /></Scene3D>
 
+BrandTransform3D { mode?: "turn" | "arc" | "launch"; from?: number (0); frames?: number (32); strength?: number (0 to 1, default 1); children }
+  A deterministic arrival for a branded object inside Scene3D: turn exposes its face, arc carries it on a curved path, launch approaches from depth. Wrap Text3D, Card3D or Hero3D; the final pose is neutral and holds exactly. Keep the supplied identity intact and allow a readable hold after landing. A transformation has no built-in audio. brandTransformFrames({ from, frames }) returns { start, settle } in the same local clock; cuesFor([start, settle], "transform", { offset: scene.startFrame, voice, sweepFrames }) places the transform-sweep role before the landing and transform-lock on it. Map both roles to pulled sound files. sweepFrames is the chosen sound's attack in frames (default 10). brandTransformAt(frame, fps, options) returns { visible, position, rotation, scale }; BRAND_TRANSFORMS lists the modes. See reference/brand-motion.md for when and why to choose each.
+  <BrandTransform3D mode="turn" from={6} frames={32}><Text3D text="Reelkit" fit={0.72} /></BrandTransform3D>
+
 Text3D { text: string; fit?: number (0.8); size?: number; depth?: number; color?: string; position?: [x, y, z]; rotation?: [x, y, z] (degrees); enter?: "rise" | "turn" | "fly" | "none"; delay?: number }
   Extruded text, centred on its position, inside a Scene3D. Latin letters, digits and common punctuation only (one bundled typeface, Inter Bold): Hebrew and other scripts stay 2D. Leave size out: the word is measured on its own letters and sized to fill fit (default 0.8) of the frame's width at the closest the Scene3D camera comes, so it is whole at every moment on any aspect; a line break in the text makes a second line, and the height is held to fit of the frame's height. A size you give wins (scene units, the height of a capital-ish line). A push-in starts the word smaller in proportion: z 7.5 to 6 is a gentle one. depth is how far it is extruded (default a quarter of the size). enter is how it arrives, starting delay frames into the scene; "none" is there from the start. Keep type that must be read facing the camera and held at least 1.5 seconds.
   <Text3D text="Meet Reelkit" color="#ffffff" position={[0, 1, 0]} enter="turn" delay={6} />
@@ -223,8 +227,8 @@ cuesOnChanges(scenes, { impact?: { sound, volume? }, whoosh?: { sound, volume?,
   Sounds for the scene changes, placed where the eye sees them. A SceneFrame transition is complete on the boundary but the picture changes most half the transition's frames before it (4 for the default 8, 3 for transitionFrames={6}; none for "cut"), and a hit on the boundary lands after the change. scenes are the manifest's scenes, each with the exit and transitionFrames its SceneFrame has: cuesOnChanges gives an impact on that peak and a whoosh (frames long, from the search line's duration times 30) that ENDS on it, for every change but the one after the last scene; skip lists scene indices to leave silent. changeFrame(scene) is the peak for one scene. A camera zoom, zoomTo or punch is a picture change too: cueOnCamera(frame) is the frame where the Camera move to the key at "frame" is fastest (about 9 frames before it); with punch: true, the fastest frame of a punch (just after its frame). The Camera counts frames from the scene's start when it is inside a SceneFrame, so add the scene's startFrame for an absolute cue.
   const exits = [{ exit: "zoom-through" as const }, { exit: "whip-left" as const, transitionFrames: 6 }, {}];  const cues = cuesOnChanges(manifest.scenes.map((s, i) => ({ ...s, ...exits[i] })), { impact: { sound: "thud", volume: 0.55 }, whoosh: { sound: "whoosh", frames: 24, volume: 0.3 } });
 
-cuesFor(events, kind, { offset?, fps?, voice?, volume?, seed?, riserFrames? }): { at, sound, volume }[]    clearBefore(cues, frame, { seconds?, fps?, riserFrames? }): cues
-  Turns the event frames a component reports into SoundCues with a sensible sound role, level and density for the kind: "type" (promptFrames(...).type: a tick on every 2nd or 3rd character, at most 12 a second, a little different in level each, and a thock one frame after the last), "click" (clickFrames), "snap" (panelSettleFrame: a card or panel landing), "pop" (chapterFrames(...).badges), "count" ([start, settleFrame]: a train of ticks that speeds up and ends on a chime ON settleFrame), "stream" (terminalFrames(...).lines: one soft tick per line, at most 6 a second), "assemble" ([start, lockFrame]: a rising run that gets louder and a lock hit on lockFrame) and "resolve" ([frame] the logo or end card lands: a riser that ends on the chime, which is on the frame). offset is the scene's startFrame when the events are in the scene's own clock. voice: true gives the quieter levels for a film with a narrator (never over 0.3). Each cue's sound is a role: type-tick, type-return, click, snap, pop, count-tick, count-settle, stream, assemble-run, assemble-lock, resolve-riser, resolve-chime. Map each role to a pulled file in sounds, searching with: type-tick "mouse click"; type-return "glass tap"; click "mouse click"; snap "soft impact"; pop "bubble pop"; count-tick "counter ticks"; count-settle "success chime"; stream "glass tap"; assemble-run "counter ticks"; assemble-lock "soft impact"; resolve-riser "whoosh buildup"; resolve-chime "sparkle shimmer" (reelkit assets search "<words>" --kind sfx; the interface pack's names begin with sfx-ui-). clearBefore(cues, chimeFrame) removes every other cue in the second before the riser so the end card has a clear second of nothing; give the music a dip there (Music dips).
+cuesFor(events, kind, { offset?, fps?, voice?, volume?, seed?, sweepFrames?, riserFrames? }): { at, sound, volume }[]    clearBefore(cues, frame, { seconds?, fps?, riserFrames? }): cues
+  Turns the event frames a component reports into SoundCues with a sensible sound role, level and density for the kind: "type" (promptFrames(...).type: a tick on every 2nd or 3rd character, at most 12 a second, a little different in level each, and a thock one frame after the last), "click" (clickFrames), "snap" (panelSettleFrame: a card or panel landing), "pop" (chapterFrames(...).badges), "count" ([start, settleFrame]: a train of ticks that speeds up and ends on a chime ON settleFrame), "stream" (terminalFrames(...).lines: one soft tick per line, at most 6 a second), "assemble" ([start, lockFrame]: a rising run that gets louder and a lock hit on lockFrame), "transform" ([start, settle]: transform-sweep begins sweepFrames before settle, never before start, and transform-lock lands on settle) and "resolve" ([frame] the logo or end card lands: a riser that ends on the chime, which is on the frame). offset is the scene's startFrame when the events are in the scene's own clock. voice: true gives the quieter levels for a film with a narrator (never over 0.3). Each cue's sound is a role: type-tick, type-return, click, snap, pop, count-tick, count-settle, stream, assemble-run, assemble-lock, transform-sweep, transform-lock, resolve-riser, resolve-chime. Map each role to a pulled file in sounds, searching with: type-tick "mouse click"; type-return "glass tap"; click "mouse click"; snap "soft impact"; pop "bubble pop"; count-tick "counter ticks"; count-settle "success chime"; stream "glass tap"; assemble-run "counter ticks"; assemble-lock "soft impact"; transform-sweep "soft ui whoosh"; transform-lock "soft impact"; resolve-riser "whoosh buildup"; resolve-chime "sparkle shimmer" (reelkit assets search "<words>" --kind sfx; the interface pack's names begin with sfx-ui-). clearBefore(cues, chimeFrame) removes every other cue in the second before the riser so the end card has a clear second of nothing; give the music a dip there (Music dips).
   const p = promptFrames({ text, reply }, fps);  const cues = [...cuesFor(p.type, "type", { offset: s.startFrame }), ...cuesFor([p.send], "click", { offset: s.startFrame }), ...cuesFor([settleFrame({ delay: 20 })], "snap", { offset: s.startFrame })];
 
 Music { src: string; volume?: number; duckTo?: number; dips?: { from: number; to: number; volume: number }[] }

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

@@ -8,6 +8,9 @@ export type { CarryBox } from "./Carry";
 export { ClipLayer } from "./ClipLayer";
 export { Card3D } from "./Card3D";
 export { Assemble3D } from "./Assemble3D";
+export { BrandTransform3D } from "./BrandTransform3D";
+export { BRAND_TRANSFORMS, brandTransformAt, brandTransformFrames } from "./brand-transform";
+export type { BrandTransform, BrandTransformTiming } from "./brand-transform";
 export { Hero3D, Screen3D } from "./Hero3D";
 export { Particles3D } from "./Particles3D";
 export { Warp3D } from "./Warp3D";

package/src/{remotion → hyperframes}/kit/sound-cues.ts

@@ -1,4 +1,4 @@
-// The pure parts of SoundCues: nothing here needs React or Remotion, so it can be tested and used in a composition's own timing code.
+// The pure parts of SoundCues: nothing here needs React or HyperFrames, so it can be tested and used in a composition's own timing code.
 import { travel } from "./motion-math";
 import { PEAKS_ON_BOUNDARY, transitionSpan, type TransitionKind } from "./transition-math";
 import { punchEnvelope, type Punch } from "./motion-math";

package/src/{remotion → hyperframes}/kit/sound-kinds.ts

@@ -4,7 +4,7 @@
 import { hash01 } from "./seeded";
 import type { SoundCue } from "./sound-cues";
 
-export const CUE_KINDS = ["type", "click", "snap", "pop", "count", "stream", "assemble", "resolve"] as const;
+export const CUE_KINDS = ["type", "click", "snap", "pop", "count", "stream", "assemble", "transform", "resolve"] as const;
 export type CueKind = (typeof CUE_KINDS)[number];
 
 // `volume` is [without a narrator, under a narrator]: films with no voice use 0.35 to 0.6 for the main hits and less for small ticks; under a voice nothing is over 0.3.
@@ -32,6 +32,11 @@ export const CUE_TABLE: Record<CueKind, { about: string; per10s: string; roles:
     per10s: "0 to 1",
     roles: { "assemble-run": { search: "counter ticks", seconds: 0.1, volume: [0.25, 0.12] }, "assemble-lock": { search: "soft impact", seconds: 0.7, volume: [0.55, 0.3] } },
   },
+  transform: {
+    about: "a brand or product moving into its readable pose: one sweep into the landing, then one lock hit",
+    per10s: "0 to 2, on changes that explain the product or reveal the brand",
+    roles: { "transform-sweep": { search: "soft ui whoosh", seconds: 0.5, volume: [0.3, 0.16] }, "transform-lock": { search: "soft impact", seconds: 0.7, volume: [0.45, 0.25] } },
+  },
   resolve: {
     about: "the logo or the end card: a riser that ends on a chime, with a clear second of nothing before the riser",
     per10s: "1 per film, at the end",
@@ -54,6 +59,8 @@ export type CueOptions = {
   seed?: number;
   // "resolve" only: how long the riser is in frames (default 36: it ends on the chime).
   riserFrames?: number;
+  // "transform" only: frames from the sweep's start to its audible landing (default 10). Measure the chosen sound's attack.
+  sweepFrames?: number;
 };
 
 const level = (kind: CueKind, role: string, o: CueOptions) => CUE_TABLE[kind].roles[role]!.volume[o.voice ? 1 : 0] * (o.volume ?? 1);
@@ -74,6 +81,7 @@ const spaced = (frames: number[], gap: number): number[] => { const out: number[
 //   "count": [startFrame, settleFrame] (rollStart and settleFrame of CounterRoll): a speeding tick train, then the chime ON settleFrame
 //   "stream": the frame of every line (terminalFrames(...).lines): one soft tick per line, at most 6 a second
 //   "assemble": [startFrame, lockFrame] (assembleProgress start and the frame the last piece lands): a rising run, then the lock ON lockFrame
+//   "transform": [startFrame, settleFrame]: a sweep leading by sweepFrames, then a lock ON settleFrame
 //   "resolve": [frame] the frame the logo lands: the riser ends on it and the chime is ON it (use clearBefore to keep the second before the riser silent)
 export function cuesFor(events: readonly number[], kind: CueKind, o: CueOptions = {}): SoundCue[] {
   if (!CUE_KINDS.includes(kind)) throw new Error(`cuesFor: unknown kind "${kind}". The kinds are: ${CUE_KINDS.join(", ")}.`);
@@ -107,6 +115,11 @@ export function cuesFor(events: readonly number[], kind: CueKind, o: CueOptions
       const run = frames.map((fr, i) => cue(fr, role[0]!, kind === "assemble" ? base * (0.5 + 1.0 * (i / Math.max(1, frames.length - 1))) : base * (0.85 + 0.3 * hash01(i, seed))));
       return unique([...run, cue(end, role[1]!, level(kind, role[1]!, o))]);
     }
+    case "transform": {
+      const start = f[0]!, end = f[f.length - 1]!;
+      const sweep = Math.max(0, Math.round(o.sweepFrames ?? 10));
+      return unique([cue(Math.max(start, end - sweep), "transform-sweep", level("transform", "transform-sweep", o)), cue(end, "transform-lock", level("transform", "transform-lock", o))]);
+    }
     case "resolve": {
       const end = f[0]!, rise = o.riserFrames ?? 36;
       return unique([cue(Math.max(0, end - rise), "resolve-riser", level("resolve", "resolve-riser", o)), cue(end, "resolve-chime", level("resolve", "resolve-chime", o))]);

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 }); }
 }