reelkit-cli 0.6.0 → 0.10.0

package/src/testing/fake-api.ts

@@ -7,7 +7,7 @@ import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { MAX_UPLOAD_BYTES, routes, type ErrorCode, type LibraryItem, type RouteName, type Voice } from "../contract";
 import { staticCheck } from "../render/validate";
-import { PIXEL_PNG, silentWav } from "./fixtures";
+import { FAKE_SVG, PIXEL_PNG, silentWav } from "./fixtures";
 
 type Blob = { filename: string; contentType: string; bytes: Uint8Array };
 // owner is the uploader's user id; a seeded item has none. An upload is not an item for anyone until it is committed.
@@ -212,15 +212,15 @@ export async function startFakeApi(opts: { voiceoverCharLimit?: number; imageLim
       const durationSec = list.length * WORD_SEC;
       return { url: fileUrl({ filename: "vo.wav", contentType: "audio/wav", bytes: silentWav(durationSec) }), ext: "wav", contentType: "audio/wav", durationSec, words: list, chars: text.length };
     },
-    images: ({ prompt, aspect, shareable, tags }, { userId }) => {
+    images: ({ prompt, aspect, shareable, tags, format }, { userId }) => {
       const m = meter(userId);
       if (m.images + 1 > limits.images) throw new Fail(429, "quota_exceeded", `Image quota used up. It resets on ${resetDate().slice(0, 10)}.`);
       m.images++;
       usage.images++;
       const id = nextId("image");
-      const file = { filename: "image.png", contentType: "image/png", bytes: PIXEL_PNG };
+      const file = format === "svg" ? { filename: "image.svg", contentType: "image/svg+xml", bytes: new TextEncoder().encode(FAKE_SVG) } : { filename: "image.png", contentType: "image/png", bytes: PIXEL_PNG };
       if (shareable) store.set(id, { item: { id, kind: "image", title: cut(prompt, 60), description: prompt, tags, meta: { aspect }, visibility: "review" }, file, filename: file.filename, contentType: file.contentType, owner: userId, committed: true });
-      return { url: fileUrl(file), ext: "png", contentType: "image/png", ...(shareable ? { libraryId: id } : {}) };
+      return { url: fileUrl(file), ext: format === "svg" ? "svg" : "png", contentType: file.contentType, ...(shareable ? { libraryId: id } : {}) };
     },
     clipStart: (input, { userId }) => {
       if (opts.noClipProvider) throw new Fail(400, "invalid_request", "Clip generation is not available on this server yet.");

package/src/testing/fixtures.ts

@@ -12,7 +12,7 @@ export const PIXEL_PNG = new Uint8Array(Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAE
 
 // A known-good composition, used as the worked example for composition authors.
 export const FIXTURE_COMPOSITION = `import React from "react";
-import { AbsoluteFill, useVideoConfig } from "remotion";
+import { AbsoluteFill, useVideoConfig } from "reelkit/frame";
 import { BgMesh, Captions, FootageLayer, fonts, Grade, Grain, KenBurnsImage, palettes, SceneFrame, Vignette, Voiceover, WordReveal } from "reelkit/kit";
 import type { VideoProps } from "reelkit/kit";
 
@@ -42,3 +42,6 @@ export const Video: React.FC<VideoProps> = ({ manifest, urls }) => {
   );
 };
 `;
+
+// A tiny valid vector graphic, what the fake API returns for format "svg".
+export const FAKE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#e02020"/><rect x="30" y="30" width="40" height="40" fill="#2040e0"/></svg>';

package/src/remotion/Root.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import { Composition } from "remotion";
-import { ManifestContext, UrlsContext } from "./kit/media";
-import type { VideoProps } from "./types";
-
-const EMPTY: VideoProps = { manifest: { fps: 30, width: 1080, height: 1920, totalFrames: 1, scenes: [] }, urls: {} };
-
-export const makeRoot = (Video: React.FC<VideoProps>): React.FC => {
-  const WithMedia: React.FC<VideoProps> = (props) => (
-    <UrlsContext.Provider value={props.urls}>
-      <ManifestContext.Provider value={props.manifest}>
-        <Video {...props} />
-      </ManifestContext.Provider>
-    </UrlsContext.Provider>
-  );
-  return () => (
-  <Composition
-    id="Video"
-    component={WithMedia as unknown as React.FC<Record<string, unknown>>}
-    durationInFrames={1}
-    fps={30}
-    width={1080}
-    height={1920}
-    defaultProps={EMPTY as unknown as Record<string, unknown>}
-    calculateMetadata={({ props }) => {
-      const m = (props as unknown as VideoProps).manifest;
-      return { durationInFrames: m.totalFrames, fps: m.fps, width: m.width, height: m.height };
-    }}
-  />
-);
-};

package/src/remotion/kit/Music.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { Audio, useVideoConfig } from "remotion";
-import { musicVolume, speechSpans, type SpeechScene } from "./music-math";
-import { useGain, useManifest, useMedia } from "./media";
-
-// The video's music track. Place it once, outside the scenes. It sits at `duckTo` while the voiceover is heard and comes up to `volume`
-// in the gaps, loops when the video is longer than the track, and fades out over the last second. `scenes` defaults to the manifest's.
-export const Music: React.FC<{ src: string; volume?: number; duckTo?: number; scenes?: SpeechScene[] }> = ({ src, volume = 0.5, duckTo = 0.12, scenes }) => {
-  const { fps, durationInFrames } = useVideoConfig();
-  const manifest = useManifest();
-  const gain = useGain(src);
-  const spans = React.useMemo(() => speechSpans(scenes ?? manifest?.scenes ?? [], fps), [scenes, manifest, fps]);
-  return (
-    <Audio
-      src={useMedia(src)} loop loopVolumeCurveBehavior="extend"
-      volume={(f) => musicVolume(f, { fps, totalFrames: durationInFrames, volume, duckTo, spans, gain })}
-    />
-  );
-};

package/src/remotion/kit/SceneFrame.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { AbsoluteFill, interpolate, Sequence, useCurrentFrame } from "remotion";
-
-const Fade: React.FC<{ durationInFrames: number; children: React.ReactNode }> = ({ durationInFrames, children }) => {
-  const frame = useCurrentFrame();
-  const edge = Math.min(8, Math.floor(durationInFrames / 2));
-  const opacity = interpolate(frame, [0, edge, durationInFrames - edge, durationInFrames], [0, 1, 1, 0], {
-    extrapolateLeft: "clamp", extrapolateRight: "clamp",
-  });
-  return <AbsoluteFill style={{ opacity }}>{children}</AbsoluteFill>;
-};
-
-export const SceneFrame: React.FC<{ from: number; durationInFrames: number; children: React.ReactNode }> = ({
-  from, durationInFrames, children,
-}) => (
-  <Sequence from={from} durationInFrames={durationInFrames}>
-    <Fade durationInFrames={durationInFrames}>{children}</Fade>
-  </Sequence>
-);

package/src/remotion/kit/docs.ts

@@ -1,124 +0,0 @@
-export const KIT_DOCS = `
-Import from "reelkit/kit". Media props (src) take urls[key]; the kit components also accept the bare project path. For your own <Img>, <Audio> or <OffthreadVideo>, always pass urls[key]. Inside a SceneFrame, useCurrentFrame() starts at 0 for that scene.
-
-SceneFrame { from: number; durationInFrames: number; children }
-  Wraps one scene. Places children on the timeline and fades them in and out.
-  <SceneFrame from={s.startFrame} durationInFrames={s.durationFrames}>...</SceneFrame>
-
-TitleCard { text: string; subtitle?: string; color?: string; background?: string }
-  Large centred title that springs in.
-  <TitleCard text="Ship faster" subtitle="in three steps" background="#101020" />
-
-LowerThird { title: string; subtitle?: string; accent?: string }
-  Name/label strip that slides in from the left, low on the screen.
-  <LowerThird title="Step 1" subtitle="Connect your account" />
-
-Captions { words: WordTiming[]; mode?: "highlight" | "pop" | "karaoke"; highlight?: string; color?: string; perLine?: number; group?: "none" | "word" | "phrase"; uppercase?: boolean; bottom?: number; face?: string; rtl?: boolean }
-  Word-timed captions near the bottom. Pass the scene's words from the manifest. Pick one mode for the whole video:
-  "highlight" (a line, spoken word coloured), "pop" (1-3 words popping in as spoken), "karaoke" (a line filling with colour).
-  group decides which words share the screen: "word" is one word at a time, "phrase" groups words as they are spoken (a group ends at a sentence end, at a comma after three words, at a pause of 0.35 s, and never holds more than 6 words or about 32 characters), "none" draws nothing. Pass the plan's choice straight through: group={manifest.captions}. Without group, perLine counts the words as before.
-  bottom is the distance from the bottom edge as a fraction of the height (default 0.16).
-  For Hebrew narration pass face={font("heebo")} and rtl.
-  <Captions words={s.words} mode="pop" highlight={palette.hero} uppercase />
-
-Counter { from?: number; to: number; durationFrames?: number; prefix?: string; suffix?: string; color?: string }
-  Centred number that counts up.
-  <Counter to={10000} suffix="+" durationFrames={45} />
-
-KenBurnsImage { src: string; zoom?: number; direction?: "in" | "out" }
-  Full-frame image with a slow zoom and pan. src must come from urls[...]. Alternate direction between consecutive image scenes.
-  <KenBurnsImage src={urls[s.imageKey]} />
-
-FootageLayer { src: string; muted?: boolean; dim?: number }
-  Full-frame user footage. Place it once, outside the scenes, as the bottom layer. dim (0-1) darkens it for legibility.
-  <FootageLayer src={urls[manifest.footageKey]} dim={0.25} />
-
-ClipLayer { src: string; muted?: boolean; dim?: number }
-  Full-frame generated or library video clip as a scene's picture (treatment "clip"). Place it inside the scene's SceneFrame as the bottom layer, so it starts with the scene. When the scene is longer than the clip it holds the last frame; it never loops. dim (0-1) darkens it for legibility.
-  <ClipLayer src={urls[s.clipKey]} dim={0.2} />
-
-KeyedClip { src: string; x?: number; y?: number; scale?: number; muted?: boolean }
-  A green-screen clip with the green keyed out (the transparent .webm, s.clipKeyedKey). Lay it over your own background or screenshot, below the captions. x and y place its bottom centre as fractions of the frame (default x 0.5, y 1: bottom centre); scale is its width as a fraction of the frame width (default 1). Holds its last frame when the scene is longer.
-  <KeyedClip src={urls[s.clipKeyedKey]} x={0.5} y={1} scale={0.8} />
-
-BgMesh { bg: string; hero: string; accent?: string }
-  The bottom layer of the video: the base colour with two slow-drifting soft colour fields. Use it instead of a flat background.
-  <BgMesh bg={palette.bg} hero={palette.hero} accent={palette.accent} />
-
-Grade { color: string; strength?: number }   Grain { opacity?: number; blend?: "multiply" | "overlay" }   Vignette { strength?: number }
-  Finishing layers, placed once at the very top of the video in this order: Grade, Grain, Vignette.
-  Grade tints everything toward the hero colour so images and graphics read as one look (strength 0.10-0.15 on light themes, 0.18-0.25 on dark).
-  Grain uses blend "multiply" on light themes and "overlay" on dark ones.
-  <Grade color={palette.hero} /><Grain blend="overlay" /><Vignette />
-
-Entrance { delay?: number; exitAt?: number; rise?: number; breathe?: boolean; style?; children }
-  The standard way to bring anything in: fade + rise + scale on a spring, then a slow idle breathe. delay and exitAt are frames from the scene start; exitAt adds a faster exit.
-  <Entrance delay={8} exitAt={s.durationFrames - 14}><Card /></Entrance>
-
-WordReveal { text: string; delay?: number; per?: number; highlight?: string; highlightColor?: string; style? }
-  Headline that rises in word by word from behind a mask. highlight colours one word.
-  <WordReveal text="Stretch first, phone second" highlight="first" highlightColor={palette.hero} style={{ fontFamily: fonts.display, fontWeight: 800, fontSize: width * 0.09, color: palette.ink }} />
-
-Carry { keys: { frame: number; x: number; y: number; width: number; height: number; radius?: number; opacity?: number; rotate?: number }[]; lead?: number; stiffness?: number; damping?: number; children | (box) => children }
-  One element held through several scenes. Place it once, beside the SceneFrames and above them, so it is still on screen when a scene changes. Each key says where the box must have arrived by an absolute composition frame: x, y are its centre and width, height are fractions of the frame (0 to 1); radius is the corner radius as a fraction of the frame width; rotate is in degrees. The move toward a key starts lead frames before the key's frame (default 12, or at the previous key's frame when the keys are closer) on a spring (default springs.smooth) and lands on the key's frame exactly; between moves the box holds. Before the first key nothing is drawn unless that key sets an opacity; after the last the box holds. Children fill the box; a function child gets { x, y, width, height, radius, opacity, rotate, widthPx, heightPx } for the current moment, so the content can change as the box does.
-  <Carry keys={[{ frame: a.startFrame + 6, x: 0.5, y: 0.45, width: 0.8, height: 0.3 }, { frame: b.startFrame, x: 0.5, y: 0.5, width: 1, height: 1, radius: 0 }]}>{(box) => <Card compact={box.width < 0.5} />}</Carry>
-
-Camera { keys: { frame: number; x?: number; y?: number; zoom?: number; rotate?: number }[]; drift?: number; lead?: number; stiffness?: number; damping?: number; children }
-  Moves the whole picture. Wrap all the scenes for one camera that never cuts, or wrap one scene's content. x, y are the point of the content, as fractions, that sits at the middle of the frame (default 0.5, 0.5); zoom 1 shows the content as it fits; rotate is in degrees. A key that leaves a value out keeps the one before it. The timing rule is the same as Carry's: the move toward a key starts lead frames before its frame and lands on it. drift is a very slow continuous push, as a fraction of the zoom per second (0.02 is two percent a second), so a held shot is never perfectly still.
-  <Camera keys={[{ frame: 0, zoom: 1 }, { frame: b.startFrame, x: 0.7, y: 0.4, zoom: 4 }]} drift={0.01}>{scenes}</Camera>
-
-fonts { display: string; body: string }
-  Loaded font families. Use fonts.display (weights 600-800) for headlines and numbers, fonts.body for supporting text. Never leave hero text on a default font.
-
-Icon { name: IconName; size: number; color?: string }     brandColor(name): string
-  A platform's real logo mark, or a plain interface glyph. size is in pixels. color "brand" uses the platform's own colour.
-  Brands: instagram, tiktok, youtube, x, facebook, whatsapp, telegram, twitch, discord, spotify, snapchat, pinterest, messenger, threads,
-  reddit, github, gmail, soundcloud, behance, vimeo, dribbble, imessage, apple, googlemessages, signal, googlecalendar, stripe, paypal,
-  applepay, shopify, notion, zoom.  Glyphs: message, mail, bell, phone, calendar, cart, heart, star, user, play.
-  Use Icon for any platform logo. Never draw a logo yourself, never use a letter or an emoji in its place, and only show a
-  platform's mark when the video really refers to that platform.
-  <Icon name="instagram" size={width * 0.06} color="brand" />
-
-font(name): string
-  Loads one extra typeface and returns its family name. Call it once at the top of a file: const heavy = font("montserrat").
-  montserrat (300, 800, 900), montserratItalic (800, 900), kanit (600), roboto (300, 500, 700, 900), robotoSlab (700),
-  bebasNeue (tall condensed caps), archivoBlack (very heavy), unbounded (wide heavy display, 800, 900), modak (chunky rounded),
-  greatVibes (formal script), sacramento (monoline script), outfit (geometric sans 100, 300, 500, 900), syne (wide heavy 800),
-  lilitaOne (heavy rounded), kaushanScript (bold brush script), yellowtail (flowing brush script), mrsSaintDelafield (signature script),
-  permanentMarker (marker lettering), bungeeShade (outlined sign capitals), cinzel (Roman capitals 700, 900: epic),
-  playfairDisplay (elegant serif 700, 900), orbitron (sci-fi 700, 900), rye (western), creepster (horror).
-  Hebrew text must use a Hebrew face; every face above is Latin only and Hebrew would fall back to a default font. Hebrew faces
-  (all also cover Latin): heebo, rubik, notoSansHebrew (400, 700, 900: neutral sans), assistant (400, 700, 800), alef (400, 700),
-  secularOne (strong headline), varelaRound (soft rounded), fredoka (playful rounded 500, 700), karantina (tall condensed 400, 700),
-  suezOne (heavy serif headline), frankRuhlLibre (book serif 400, 700, 900), davidLibre (traditional serif 400, 700),
-  amaticSC (hand-lettered 400, 700).
-  Use at most two typefaces in one video.
-
-springs { snappy, smooth, heavy }    ease { out, in, inOut }
-  Spring configs for spring({ frame, fps, config: springs.smooth }) and easings for interpolate(..., { easing: ease.out, extrapolateLeft: "clamp", extrapolateRight: "clamp" }).
-
-palettes { darkTech, warmEditorial, warmPremium, cleanLight }   each is a Palette { bg, ink, hero, accent, dim }
-  Proven starting palettes. Pick one that suits the topic, or define your own Palette object. Declare it once at the top of Video.tsx and take every colour from it.
-
-ScreenOverlay { src: string; durationSec?: number; opacity?: number }
-  Lays a shared overlay clip (film marks, HUD frames) over the video with a screen blend. Pull one with: reelkit assets search "<description>" --kind overlay, then reelkit assets pull <id>; the clip's durationSec is in its entry in assets/library.json.
-  Place it once, above the scenes and below Grade. Works best on dark themes.
-  <ScreenOverlay src={urls["assets/lib/<id>/clip.mp4"]} durationSec={5} opacity={0.5} />
-
-Sfx { src: string; at?: number; volume?: number }
-  Plays one sound effect from the shared library, starting at the frame given by "at", counted from the start of the enclosing scene. Pull one with: reelkit assets search "<description>" --kind sfx, then reelkit assets pull <id>.
-  A pulled sound is levelled when it is pulled (the manifest's soundGain), and Sfx and Music apply that by themselves: the same volume sounds equally loud for every file. Nothing to pass.
-  <Sfx src={urls["assets/lib/<id>/clip.mp3"]} at={10} volume={0.35} />
-
-Music { src: string; volume?: number; duckTo?: number }
-  The video's one music track (pull it with: reelkit assets pull <id> --music). Place it once, outside the scenes. It sits at duckTo (default 0.12) while the voiceover is heard and comes up to volume (default 0.5) in gaps longer than 0.6 s, loops if the video is longer than the track, and fades out over the last second. It follows the manifest, so nothing else is passed.
-  <Music src={urls[manifest.music.key]} />
-
-nearestBeat(beatFrames, frame): number | undefined    nextBeat(beatFrames, frame): number | undefined    beatPulse(beatFrames, frame, decayFrames = 10): number
-  Beat helpers; beatFrames is manifest.music.beatFrames (composition frames). nearestBeat is the closest beat, nextBeat the first at or after the frame, beatPulse a number from 0 to 1 that is 1 on a beat and falls to 0 after it. Inside a scene, subtract s.startFrame from a beat to get a frame for that scene's own clock.
-  const b = nextBeat(manifest.music?.beatFrames ?? [], s.startFrame + 20) ?? s.startFrame + 20;  // <Entrance delay={b - s.startFrame}>
-
-Voiceover { src: string; volume?: number }
-  The scene's narration audio. One per narrated scene, inside its SceneFrame. Guard it with s.voiceoverKey so a scene without a recording still renders.
-  {s.voiceoverKey ? <Voiceover src={urls[s.voiceoverKey]} /> : null}
-`.trim();

package/src/remotion/kit/index.ts

@@ -1,29 +0,0 @@
-export { Camera } from "./Camera";
-export { Captions } from "./Captions";
-export { Carry } from "./Carry";
-export type { CarryBox } from "./Carry";
-export { ClipLayer } from "./ClipLayer";
-export { Counter } from "./Counter";
-export { Entrance, WordReveal } from "./Entrance";
-export { FootageLayer } from "./FootageLayer";
-export { brandColor, Icon } from "./Icon";
-export type { GlyphName, IconName } from "./Icon";
-export type { BrandName } from "./brand-icons";
-export { KenBurnsImage } from "./KenBurnsImage";
-export { KeyedClip } from "./KeyedClip";
-export { BgMesh, Grade, Grain, Vignette } from "./Layers";
-export { LowerThird } from "./LowerThird";
-export { SceneFrame } from "./SceneFrame";
-export { ScreenOverlay } from "./ScreenOverlay";
-export { useMedia } from "./media";
-export { Music } from "./Music";
-export { beatPulse, nearestBeat, nextBeat } from "./beat";
-export { Sfx } from "./Sfx";
-export { TitleCard } from "./TitleCard";
-export { Voiceover } from "./Voiceover";
-export type { VideoProps } from "../types";
-export { ease, font, fonts, palettes, springs } from "./theme";
-export type { CaptionMode } from "./Captions";
-export type { CaptionGroup } from "./caption-groups";
-export type { BoxKey, CameraKey } from "./motion-math";
-export type { KitFont, Palette } from "./theme";

package/src/remotion/kit/music-math.ts

@@ -1,42 +0,0 @@
-import type { WordTiming } from "../../pipeline/schema";
-
-export const DUCK_PAD_SEC = 0.25;
-export const DUCK_RAMP_SEC = 0.2;
-// A gap between words at least this long lets the music come back up; a shorter one keeps it down so it does not pump.
-export const DUCK_GAP_SEC = 0.6;
-export const FADE_OUT_SEC = 1;
-
-export type SpeechScene = { startFrame: number; words: WordTiming[] };
-
-// The stretches of the video, in seconds, during which a voice is heard (with the padding around each word); words closer than
-// DUCK_GAP_SEC are one stretch.
-export function speechSpans(scenes: SpeechScene[], fps: number): [number, number][] {
-  const words = scenes.flatMap((s) => s.words.map((w) => [s.startFrame / fps + w.startSec, s.startFrame / fps + w.endSec] as const)).sort((a, b) => a[0] - b[0]);
-  const spans: [number, number][] = [];
-  for (const [start, end] of words) {
-    const last = spans[spans.length - 1];
-    if (last && start - (last[1] - DUCK_PAD_SEC) <= DUCK_GAP_SEC) last[1] = Math.max(last[1], end + DUCK_PAD_SEC);
-    else spans.push([start - DUCK_PAD_SEC, end + DUCK_PAD_SEC]);
-  }
-  return spans;
-}
-
-// How far down the music is at `t` seconds, 0 (not at all) to 1 (fully): full inside a stretch, ramping over DUCK_RAMP_SEC just outside its edges.
-function duckAmount(spans: [number, number][], t: number): number {
-  let amount = 0;
-  for (const [a, b] of spans) {
-    const edge = Math.min((t - a) / DUCK_RAMP_SEC + 1, (b - t) / DUCK_RAMP_SEC + 1);
-    amount = Math.max(amount, Math.max(0, Math.min(1, edge)));
-  }
-  return amount;
-}
-
-// The music's volume at a composition frame: `volume` in gaps, `duckTo` under a voice, and a fade to nothing over the last second.
-// `gain` is the track's levelling (linear). Looping needs no handling here: the frame is the composition's, not the track's.
-export function musicVolume(frame: number, o: { fps: number; totalFrames: number; volume: number; duckTo: number; spans: [number, number][]; gain?: number }): number {
-  const t = frame / o.fps;
-  const duck = duckAmount(o.spans, t);
-  const base = o.volume + (Math.min(o.duckTo, o.volume) - o.volume) * duck;
-  const fade = Math.max(0, Math.min(1, (o.totalFrames - frame) / (FADE_OUT_SEC * o.fps)));
-  return base * fade * (o.gain ?? 1);
-}