reelkit-cli 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Daniel Livshin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+# Reelkit
+
+A CLI and a Claude skill for making short-form video. Claude plans the video and writes the motion design; `reelkit` searches a shared asset library, records voiceover, generates what is missing, checks the composition and renders it on your machine with Remotion.
+
+## Requirements
+
+- Node 20 or newer
+- ffmpeg
+- A Reelkit account (accounts open when the service launches)
+
+## Install
+
+```bash
+npm install -g reelkit-cli
+```
+
+This puts the `reelkit` command on your path. Then put the skill, and a `/reelkit-video` command where the agent supports one, into your coding agents (Claude Code, Codex, Cursor, Gemini CLI and the shared `.agents` folder):
+
+```bash
+reelkit install
+reelkit auth login
+```
+
+It installs for every agent it finds on your machine. Name one with `--agent claude`, or use `--agent all`. `reelkit init` and `reelkit auth login` keep the installed skill up to date on their own; set `REELKIT_NO_AUTO_INSTALL=1` to turn that off.
+
+## Use
+
+Ask Claude to make a video. The skill takes it from there. To drive it by hand:
+
+```bash
+reelkit auth login        # a person: opens the login page in your browser and waits while you approve it
+reelkit init my-video --aspect 9:16
+cd my-video
+reelkit assets upload ./logo.png --describe "Acme logo"
+# write plan.json
+reelkit plan check
+reelkit assets voiceover --all
+reelkit assets search "city skyline at night" --kind image
+reelkit assets gen image --scene intro
+# write src/Video.tsx
+reelkit check
+reelkit preview
+reelkit render
+```
+
+`reelkit auth login` prints the login link and the code, and opens the link in your browser when you run it in a terminal. It does not open a browser with `--no-browser`, with `REELKIT_NO_BROWSER=1`, with `--json`, or when its output is not a terminal; it also does not open a login page that is on a different site than the API (it says so and leaves the link for you to check). The link is printed either way. Logging in from an agent that cannot wait: `reelkit auth login --start` prints the link (the code is already filled in) and returns at once without opening a browser; after you approve it in the browser, `reelkit auth login --finish` completes the login (it waits up to a minute, and can be run again if you were slow).
+
+## Commands
+
+| Command | What it does |
+|---|---|
+| `reelkit auth login` / `logout` | Log in or out. `login` opens the login page in your browser (`--no-browser` to only print the link) and waits while you approve it; an agent uses `login --start`, shows you the link, then `login --finish` |
+| `reelkit whoami` | Account, quota, contributions |
+| `reelkit install` | Install the skill into your coding agents (`--agent <id>`, `--force`) |
+| `reelkit init [name]` | Set up a video project, in a new folder named after it |
+| `reelkit assets upload <file>` | Add one of your own files (private unless `--share`) |
+| `reelkit assets search "<query>"` | Search the shared library by meaning; each result shows a match percentage |
+| `reelkit assets pull <id>` | Download a library item (a component lands in `src/`) |
+| `reelkit assets voices` | List narration voices |
+| `reelkit assets voiceover` | Record narration from `plan.json` |
+| `reelkit assets gen image` | Generate a scene's illustration |
+| `reelkit plan check` | Validate `plan.json` |
+| `reelkit check` | Check the composition without rendering |
+| `reelkit preview` | One test frame per scene |
+| `reelkit render` | Render `out/video.mp4` |
+
+## What is shared
+
+Your own files, your plan and your video stay on your machine. Illustrations that the plan marks as generic, and anything you add with `--share`, go to the shared library for review, where other people can reuse them.
+
+A component you pull from the library is code, and it runs on your machine when you preview or render. The library only serves components published by Reelkit.
+
+The CLI talks to `https://reelkit-kohl.vercel.app/api/v1` by default. Set `REELKIT_API_URL` to point it at a different API. To use a local API while developing, set `REELKIT_API_URL=http://localhost:3000/api/v1`.
+
+## Development
+
+To run from source instead of the npm package:
+
+```bash
+git clone https://github.com/Livshind15/reelkit.git
+cd reelkit
+pnpm install
+node bin/reelkit.mjs --help   # or `npm link` to get the `reelkit` command
+pnpm test
+```
+
+Tests run against an in-process fake of the API (`src/testing/fake-api.ts`), so they need no account and no network.
+
+## Licence
+
+MIT. Parts of the skill and starter kit are adapted from other open-source work; see `skill/THIRD_PARTY.md`.

package/bin/reelkit.mjs

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+import { register } from "tsx/esm/api";
+register();
+const { main } = await import("../src/cli.ts");
+await main(process.argv);

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "reelkit-cli",
+  "version": "0.1.0",
+  "description": "CLI and Claude skill for making short-form video with a shared asset library.",
+  "license": "MIT",
+  "author": "Daniel Livshin",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Livshind15/reelkit.git"
+  },
+  "homepage": "https://github.com/Livshind15/reelkit#readme",
+  "bugs": {
+    "url": "https://github.com/Livshind15/reelkit/issues"
+  },
+  "keywords": [
+    "video",
+    "short-form",
+    "reels",
+    "tiktok",
+    "remotion",
+    "cli",
+    "ai-agents",
+    "claude-code",
+    "skill",
+    "voiceover"
+  ],
+  "type": "module",
+  "bin": {
+    "reelkit": "./bin/reelkit.mjs"
+  },
+  "exports": {
+    ".": "./src/contract/index.ts",
+    "./kit": "./src/remotion/kit/index.ts",
+    "./root": "./src/remotion/Root.tsx",
+    "./validate": "./src/render/validate.ts",
+    "./component-preview": "./src/render/component-preview.ts",
+    "./testing": "./src/testing/fake-api.ts",
+    "./schema": "./src/pipeline/schema.ts",
+    "./client": "./src/api/client.ts",
+    "./context": "./src/context.ts",
+    "./commands/*": "./src/commands/*.ts",
+    "./testing/conformance": "./src/testing/conformance.ts"
+  },
+  "files": [
+    "bin",
+    "src",
+    "skill"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "reelkit": "node bin/reelkit.mjs",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@remotion/bundler": "^4.0.532",
+    "@remotion/google-fonts": "4.0.532",
+    "@remotion/renderer": "^4.0.532",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "commander": "^15.0.0",
+    "ink": "^8.0.0",
+    "ink-spinner": "^5.0.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "remotion": "^4.0.532",
+    "tsx": "^4.23.15",
+    "typescript": "^5.9.3",
+    "zod": "^4.6.5"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.4",
+    "ink-testing-library": "^4.0.0",
+    "vitest": "^5.0.3"
+  },
+  "peerDependencies": {
+    "vitest": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "vitest": {
+      "optional": true
+    }
+  }
+}

package/skill/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: reelkit
+description: Produce short-form and explainer videos from an idea plus the user's own screenshots, logo, clips or footage. Searches a shared asset library first, generates only what is missing, and renders locally with Remotion. Use when the user wants to create, edit or assemble a video, turn an app or idea into a demo, or make a promo.
+---
+
+# Reelkit
+
+You make the video. The `reelkit` CLI gives you the tools: it holds no model and makes no creative decisions. You write the plan and the motion code yourself, check them with the CLI, and show the user your work at two checkpoints before anything is rendered.
+
+Every command takes `--json` for machine-readable output and exits non-zero with a one-line reason when something is wrong. Read the reason and act on it.
+
+## Setup (once per machine, then once per video)
+
+1. `reelkit whoami`. If it says you are not logged in, run `reelkit auth login --start` (it returns at once and never opens a browser; plain `reelkit auth login` would wait for a person and block you). Show the user the link it prints (the code is already in it) and wait for them to say they have approved it, then run `reelkit auth login --finish`. If that says it is not approved yet, ask the user again and re-run it. (Plain `reelkit auth login` opens a browser on the user's machine when run in a terminal; `--no-browser` stops that. Still prefer `--start`.)
+2. Run `reelkit init <project-name> --aspect 9:16` (`16:9` or `1:1` for other shapes), then work in the folder it prints.
+
+The folder holds everything: `plan.json`, `assets/`, `src/` (your composition and any components you pull), `out/`.
+
+## The loop
+
+### 1. Inputs
+Find out what the video is about and collect what the user has. Ask for nothing you can infer.
+
+For each file the user gives, look at it, then register it with a description of what it shows:
+`reelkit assets upload ./logo.png --describe "Acme logo, white wordmark on blue"`
+Add `--footage` for a video the motion design should be laid over. User files stay on this machine.
+
+### 2. Plan
+Read `reference/scriptwriting.md` and `reference/scene-treatments.md`. Run `reelkit assets voices` and choose a voice that fits the idea, audience and language.
+
+Write `plan.json`:
+
+```json
+{
+  "title": "string",
+  "aspect": "9:16",
+  "mode": "motion",
+  "voiceId": "an id from reelkit assets voices",
+  "pace": "normal",
+  "scenes": [
+    {
+      "id": "hook",
+      "narration": "the words spoken in this scene",
+      "treatment": "motion-graphic",
+      "onScreenText": ["up to three short items"],
+      "imagePrompt": null,
+      "shareable": false,
+      "imageTags": [],
+      "userAssetIds": [],
+      "notes": "visual direction for yourself when you write the code"
+    }
+  ]
+}
+```
+
+- 3 to 8 scenes. Scene ids are short, unique, lowercase with dashes.
+- `treatment` is `motion-graphic`, `illustration` or `footage-overlay`. With footage, `mode` is `"footage"` and every scene is `footage-overlay`; otherwise `mode` is `"motion"` and no scene is.
+- `imagePrompt` is set only for `illustration` scenes, with 3 to 6 `imageTags`. Set `shareable` to true only when the prompt is fully generic: no brand, product, person or detail specific to this user.
+- `userAssetIds` lists the ids of the user's files shown in that scene.
+- `pace` is `slow`, `normal` or `fast`.
+
+Run `reelkit plan check`. Fix everything under "Fix these". Act on "Worth improving" unless you have a good reason not to.
+
+**Checkpoint.** Show the user the title, the estimated length, and each scene's narration, on-screen text and one line on the visual. Wait for a clear yes. A question or a comment is not approval: answer it and ask again.
+
+### 3. Voice
+`reelkit assets voiceover --all`. It records each scene and prints the real length of the video. If the user wants a different voice, change `voiceId` in `plan.json` and run it again with `--redo`.
+
+### 4. Images
+Read `reference/asset-reuse.md`. For each illustration scene, search first:
+`reelkit assets search "<what the scene needs>" --kind image`
+Each result starts with a match percentage: how likely it is good enough to reuse. Pull the best result (`reelkit assets pull <id> --scene <sceneId>`) when its match is 60% or more and, reading its description, it fits the scene. Otherwise generate: `reelkit assets gen image --scene <sceneId>`. Never give two scenes the same image.
+
+### 5. Composition
+Read `reference/kit.md`, `reference/remotion-composition.md`, `reference/motion-design.md` and `reference/captions.md`.
+
+- Search the library before writing a component: `reelkit assets search "<what it shows>" --kind component`. To use one, `reelkit assets pull <id>`: it lands in `src/` and the command prints the import line and an example.
+- Read `reference/sound-design.md`, then find the few sounds the video needs: `reelkit assets search "whoosh" --kind sfx`, `reelkit assets pull <id>`. The pull prints how to reference the file.
+- Before writing a new component, read `reference/component-authoring.md`.
+- Write `src/Video.tsx` and any component files beside it. `Video.tsx` may import only `react`, `remotion`, `reelkit/kit` and sibling components (`./Name`).
+- `manifest.json` is the exact object passed to `Video` as the `manifest` prop. Media is referenced as `urls[path]`, where `path` is the file's path in the project, such as `urls[scene.voiceoverKey]` or `urls["assets/lib/<id>/clip.mp3"]`.
+
+Run `reelkit check` and fix every error until it passes. Then `reelkit preview` and look at each frame in `out/preview/`. Look for: text cut off or overflowing, text overlapping other text or the captions, text too small or too low-contrast for a phone, an empty or broken frame, content hidden behind another layer, and any number, price or quote on screen that is not in the plan. A frame is one moment: an element mid-animation is not a problem. Fix real problems and preview again.
+
+**Checkpoint.** Show the user the preview frames. Wait for a clear yes. For changes, edit the code, `reelkit check`, `reelkit preview`, and show them again.
+
+### 6. Render
+`reelkit render`. Give the user the path it prints.
+
+If the render fails, read the error, fix the composition, and run `reelkit check` before rendering again.
+
+## Rules
+
+- Search before generating. Reuse beats regenerate.
+- Never generate app UI. Use the user's real screenshots.
+- The user's own files are private. Do not pass `--share` unless they ask you to contribute a file.
+- Pass the user's facts through unchanged. Never invent a number, statistic, price or quote.
+- Keep components driven by props, not hardcoded, so they can be reused.
+- One stage at a time. Do not render before the user has approved the preview.
+- If a command reports that a quota is used up, tell the user what ran out and when it resets. Do not work around it. A message that says to wait a minute or an hour ("Too many searches", "Too many uploads started") is a throttle, not a used-up quota: wait and retry once instead of stopping.
+- Reply in the user's language.

package/skill/THIRD_PARTY.md

@@ -0,0 +1,20 @@
+# Third-party sources
+
+Some guidance in these skills, and some starter-kit components, are adapted from three open-source motion-design skills. The first two target a different renderer (HTML pages captured with Playwright), so their engines, scripts and workflows are not used here; only renderer-independent design principles were taken and rewritten for Remotion.
+
+- **Barty-Bart/motion-graphics** (`skills/motion-broll`), MIT License, Copyright (c) 2026 Bart.
+  https://github.com/Barty-Bart/motion-graphics
+  Adapted: pacing changes to spoken words, one idea per clip, never inventing data, and the list of banned effects.
+
+- **howseen-ai/claude-motion-design** (`skill/motion-design`), MIT License.
+  https://github.com/howseen-ai/claude-motion-design
+  Adapted: spring presets, one accent colour, one thing moving at a time, no frozen frames, masked text reveals, determinism, truthfulness rules, and the idea of checking frames before calling a video done.
+
+- **haidrrrry/claude-remotion-skill** (`remotion-motion-graphics`), MIT License.
+  https://github.com/haidrrrry/claude-remotion-skill
+  This one targets Remotion, so more carried over. Adapted into the starter kit (`src/remotion/kit`): the layer stack (background mesh, grade, grain, vignette), the combined entrance, the word-by-word reveal, Ken Burns with pan, spring and easing presets, and the starting palettes. Adapted into the skills: the animation rules, hero-colour rule, hit-hold-build rhythm, safe zones and common layout bugs. Its setup, render and sound-effect steps are not used; this project has its own pipeline.
+
+- **A "CapCut-style animated captions" skill** supplied by the project owner as pasted text, source repository not stated.
+  It burns captions in with FFmpeg subtitle files, which this project does not do. Adapted into the kit's `Captions` component (the pop, highlight and karaoke modes) and the `captions` skill (words per screen, timing, safe zones, contrast, shake and flash limits). Its engagement statistics were left out because they are unsourced.
+
+Used in: `motion-design`, `remotion-composition`, `scriptwriting`, `scene-treatments`, the starter kit, and the preview checklist in `SKILL.md`.

package/skill/command.md

@@ -0,0 +1,5 @@
+---
+description: Make a short-form video with Reelkit
+---
+
+Use the reelkit skill to make this video: $ARGUMENTS

package/skill/reference/asset-reuse.md

@@ -0,0 +1,31 @@
+---
+name: asset-reuse
+description: Use when deciding whether to reuse a shared library image or generate a new one, and whether a new image may be shared.
+---
+
+# Reusing and generating images
+
+## Order of work
+For each scene that needs an image:
+1. `reelkit assets search "<description>" --kind image` with the key subject and style words. Try a second, broader query if the first returns nothing.
+2. Each result starts with a match percentage, the chance it is good enough to reuse. Pull the best one (`reelkit assets pull <id> --scene <sceneId>`) when its match is 60% or more and its description fits the scene. Otherwise `reelkit assets gen image --scene <sceneId>`.
+3. When every scene is resolved, run `reelkit check` (it lists scenes with no image).
+
+## When a candidate is close enough to reuse
+The match is a guide, not the decision: read the description too. Reuse when the match is 60% or more and all of these hold:
+- Same main subject (a glass of water is a glass of water).
+- A compatible mood and style with the rest of this video.
+- Nothing in its prompt contradicts the narration.
+
+A slightly imperfect existing image is usually fine, and it is free, but below 60% generate. When every result is under 60%, generate a new image rather than lowering your bar to reuse the best of a weak set. Do not reuse when the subject differs, or when the same image is already used by another scene in this video (never give two scenes the same image).
+
+## Generating
+- Start from the scene's wanted prompt. Keep one consistent style across the video's images.
+- Never ask for text, letters, logos or UI in the picture.
+- Generate one image per scene. Do not regenerate to chase small improvements.
+
+## What may be shared
+- shareable: true only for generic imagery with nothing specific to this user. Write those prompts in generic terms.
+- shareable: false if the prompt mentions or depends on a brand, product, person, place or anything the user uploaded.
+- If the user says a scene may not be shared, it stays private whatever you pass.
+- Give 3 to 6 short lowercase tags (subject, style, mood); they are how later videos find the image.

package/skill/reference/captions.md

@@ -0,0 +1,57 @@
+---
+name: captions
+description: Use when choosing and placing the spoken-word captions for a video - which caption style fits, how many words per screen, timing, position, contrast and accessibility limits.
+---
+
+# Captions
+
+Most short video is watched with the sound off, so the captions carry the message. Captions are drawn by the kit's `<Captions>` component from the scene's word timings (`s.words`); nothing is burned in afterwards.
+
+## Pick one style for the whole video
+
+| mode | What it does | Use for |
+|---|---|---|
+| `highlight` (default) | A line of words; the spoken one takes the highlight colour | Calm, educational, professional |
+| `pop` | One to three words at a time, each popping in as it is spoken | High energy, hooks, punchy lists |
+| `karaoke` | A line that fills with colour as it is spoken | Voiceover-led, music, storytelling |
+
+```tsx
+<Captions words={s.words} mode="pop" highlight={palette.hero} uppercase />
+```
+
+Do not mix modes between scenes. Set `highlight` to the palette's hero colour (captions are the one exception to the one-hero-element rule) or to a high-contrast yellow on busy footage.
+
+## Words per screen
+- `pop`: 1 to 3 words (`perLine` 1 to 3). Short words can share a screen.
+- `highlight` and `karaoke`: 3 to 5 words for vertical video, up to 6 for landscape.
+- Never show a full sentence at once. Word-level timing reads better than sentence captions.
+
+## Timing
+- A word lights on the frame it starts, never before. The component does this from the word timings; do not offset it.
+- Entrance of a popped word: roughly 80 to 250 ms. A small overshoot is fine for captions; keep it under about 110 percent.
+- Reading speed: no more than about 3.3 words per second on screen. If the narration is faster than that, use fewer words per screen rather than smaller text.
+- No caption group should flash by in under about 0.25 seconds.
+
+## Position and safe zone
+- Vertical video (1080 by 1920): keep captions at least 200 to 300 px above the bottom edge and 40 to 60 px from the sides; platform buttons and descriptions cover the rest. The component's `bottom` prop (a fraction of the height, default 0.16) controls this.
+- Keep the top 150 to 200 px clear as well.
+- Captions must never overlap other on-screen text. If a scene has a low headline or a lower-third, raise `bottom` or move the graphic.
+- In footage mode, do not cover the subject's face.
+
+## Legibility
+- Heavy sans-serif weight, large: about 5.5 percent of the width for line captions, 7.5 percent for pop. The component sets these.
+- Contrast of at least 4.5 to 1 against whatever is behind. The component adds a dark outline and shadow; on very bright footage also dim the footage.
+- `uppercase` suits `pop` and short hooks; avoid it for long lines.
+
+## Emphasis effects, with limits
+- Shake: only on a single impact word, amplitude under about 10 px and under 15 percent of the font size, decaying within 0.3 seconds.
+- Pulse: scale between 100 and at most 108 percent.
+- Never flash anything more than three times a second, and no rapid colour strobing. This is an accessibility limit, not a style choice.
+
+## Hebrew
+For Hebrew narration pass `face={font("heebo")}` (or `assistant`, `rubik`) and `rtl` to `<Captions>`. Do not use `uppercase`; Hebrew has no capitals.
+
+## Do not
+- Do not add emoji to captions; they ignore the palette and render differently per platform.
+- Do not write your own caption component unless the kit one cannot do what the scene needs.
+- Do not re-time or paraphrase the words: captions show exactly what is spoken.

package/skill/reference/component-authoring.md

@@ -0,0 +1,26 @@
+---
+name: component-authoring
+description: Use when writing a new reusable component file for a video's src/ folder.
+---
+
+# Authoring reusable components
+
+## First, do not write one
+Run `reelkit assets search "<description>" --kind component`. If a library component does the job with different props, `reelkit assets pull <id>` it (it lands in `src/`) and use it. Write a new component only when nothing fits.
+
+## Rules for a component file
+- One component per file. File `NumberBadge.tsx` exports `export const NumberBadge: React.FC<NumberBadgeProps>`.
+- Imports only from `react`, `remotion` and `reelkit/kit`. A component never imports another component file.
+- Everything specific comes in through props: text, numbers, colours, timing. No baked-in copy, brand names, user details or asset paths.
+- Give every visual prop a sensible default so `<NumberBadge value={1} />` works on its own.
+- Size relative to `useVideoConfig()`, never fixed pixels.
+- Animate from the local `useCurrentFrame()`, and accept an optional `delay` prop in frames.
+- Declare the props type in the same file and export it.
+
+## Keep it reusable
+Write each component so it would suit a video on an unrelated topic:
+- **Generic** - nothing in it is specific to this video.
+- **Structural** - a badge, checklist, chart, progress bar, callout, quote card, icon animation, transition.
+- **Passing** - `reelkit check` passes with it in use.
+
+Avoid one-off layouts, anything with content baked in, or a near-duplicate of a library component. Sharing components back to the library is not available yet.

package/skill/reference/kit.md

@@ -0,0 +1,135 @@
+# The starter kit
+
+```
+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; 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).
+  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} />
+
+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 }} />
+
+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>.
+  <Sfx src={urls["assets/lib/<id>/clip.mp3"]} at={10} volume={0.35} />
+
+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}
+```
+
+## A minimal working Video.tsx
+
+```tsx
+import React from "react";
+import { AbsoluteFill, useVideoConfig } from "remotion";
+import { BgMesh, Captions, FootageLayer, fonts, Grade, Grain, KenBurnsImage, palettes, SceneFrame, Vignette, Voiceover, WordReveal } from "reelkit/kit";
+import type { VideoProps } from "reelkit/kit";
+
+const palette = palettes.darkTech;
+
+export const Video: React.FC<VideoProps> = ({ manifest, urls }) => {
+  const { width } = useVideoConfig();
+  return (
+    <AbsoluteFill>
+      {manifest.footageKey ? <FootageLayer src={urls[manifest.footageKey]} dim={0.2} /> : <BgMesh bg={palette.bg} hero={palette.hero} accent={palette.accent} />}
+      {manifest.scenes.map((s, i) => (
+        <SceneFrame key={s.id} from={s.startFrame} durationInFrames={s.durationFrames}>
+          {s.imageKey ? <KenBurnsImage src={urls[s.imageKey]} direction={i % 2 ? "out" : "in"} /> : null}
+          {i === 0 && !manifest.footageKey ? (
+            <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", padding: width * 0.08 }}>
+              <WordReveal text="Demo video" highlight="Demo" highlightColor={palette.hero} style={{ fontFamily: fonts.display, fontWeight: 800, fontSize: width * 0.1, color: palette.ink }} />
+            </AbsoluteFill>
+          ) : null}
+          <Captions words={s.words} />
+          {s.voiceoverKey ? <Voiceover src={urls[s.voiceoverKey]} /> : null}
+        </SceneFrame>
+      ))}
+      {manifest.footageKey ? null : <Grade color={palette.hero} />}
+      <Grain blend="overlay" />
+      <Vignette />
+    </AbsoluteFill>
+  );
+};
+```