reelkit-cli 0.6.0 → 0.10.0

package/README.md

@@ -1,6 +1,8 @@
 # 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.
+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 HyperFrames.
+
+Rendering uses `@hyperframes/engine` with Reelkit's seekable React adapter. Author compositions and library components in TSX, importing animation primitives from `reelkit/frame` and the kit from `reelkit/kit`. The build produces an HTML page; HyperFrames captures its frames and encodes video with FFmpeg. Fonts are bundled locally, including Hebrew. Use `REELKIT_CHROME_PATH` to select a browser; an installed Chrome is detected automatically, with a downloaded headless browser as the fallback. Previously published components have their legacy imports upgraded when pulled.
 
 ## Requirements
 
@@ -14,7 +16,7 @@ A CLI and a Claude skill for making short-form video. Claude plans the video and
 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):
+This puts the `reelkit` command on your path. Then put the skill, and the `/reelkit-video` and `/reelkit-launch-film` commands where the agent supports them, into your coding agents (Claude Code, Codex, Cursor, Gemini CLI and the shared `.agents` folder):
 
 ```bash
 reelkit install
@@ -68,7 +70,7 @@ reelkit render
 
 ## 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. New components written for your video are sent for review after a render too (their source, a description and an example, nothing else); turn that off with `reelkit init <name> --private`, `reelkit render --no-share` or `REELKIT_NO_SHARE=1`.
+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. New components written for your video are sent for review after a render too (their source, a description and an example, nothing else); turn that off with `reelkit init <name> --private` (which also keeps generated images, clips and graphics out of the library), `reelkit render --no-share` or `REELKIT_NO_SHARE=1`.
 
 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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reelkit-cli",
-  "version": "0.6.0",
+  "version": "0.10.0",
   "description": "CLI and Claude skill for making short-form video with a shared asset library.",
   "license": "MIT",
   "author": "Daniel Livshin",
@@ -9,7 +9,7 @@
     "short-form",
     "reels",
     "tiktok",
-    "remotion",
+    "hyperframes",
     "cli",
     "ai-agents",
     "claude-code",
@@ -22,8 +22,8 @@
   },
   "exports": {
     ".": "./src/contract/index.ts",
-    "./kit": "./src/remotion/kit/index.ts",
-    "./root": "./src/remotion/Root.tsx",
+    "./kit": "./src/hyperframes/kit/index.ts",
+    "./root": "./src/hyperframes/Root.tsx",
     "./validate": "./src/render/validate.ts",
     "./component-preview": "./src/render/component-preview.ts",
     "./testing": "./src/testing/fake-api.ts",
@@ -32,7 +32,9 @@
     "./context": "./src/context.ts",
     "./commands/*": "./src/commands/*.ts",
     "./testing/conformance": "./src/testing/conformance.ts",
-    "./static-check": "./src/render/static-check.ts"
+    "./static-check": "./src/render/static-check.ts",
+    "./frame": "./src/hyperframes/frame.tsx",
+    "./host": "./src/hyperframes/host.tsx"
   },
   "files": [
     "bin",
@@ -51,17 +53,58 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@remotion/bundler": "^4.0.532",
-    "@remotion/google-fonts": "4.0.532",
-    "@remotion/renderer": "^4.0.532",
+    "@fontsource/alef": "^5.2.0",
+    "@fontsource/amatic-sc": "^5.2.0",
+    "@fontsource/archivo-black": "^5.2.0",
+    "@fontsource/assistant": "^5.2.0",
+    "@fontsource/bebas-neue": "^5.2.0",
+    "@fontsource/bungee-shade": "^5.2.0",
+    "@fontsource/cinzel": "^5.2.0",
+    "@fontsource/creepster": "^5.2.0",
+    "@fontsource/david-libre": "^5.2.0",
+    "@fontsource/frank-ruhl-libre": "^5.2.0",
+    "@fontsource/fredoka": "^5.2.0",
+    "@fontsource/great-vibes": "^5.2.0",
+    "@fontsource/heebo": "^5.2.0",
+    "@fontsource/inter": "^5.2.0",
+    "@fontsource/jetbrains-mono": "^5.2.0",
+    "@fontsource/kanit": "^5.2.0",
+    "@fontsource/karantina": "^5.2.0",
+    "@fontsource/kaushan-script": "^5.2.0",
+    "@fontsource/lilita-one": "^5.2.0",
+    "@fontsource/modak": "^5.2.0",
+    "@fontsource/montserrat": "^5.2.0",
+    "@fontsource/mrs-saint-delafield": "^5.2.0",
+    "@fontsource/noto-sans-hebrew": "^5.2.0",
+    "@fontsource/orbitron": "^5.2.0",
+    "@fontsource/outfit": "^5.2.0",
+    "@fontsource/permanent-marker": "^5.2.0",
+    "@fontsource/playfair-display": "^5.2.0",
+    "@fontsource/roboto": "^5.2.0",
+    "@fontsource/roboto-slab": "^5.2.0",
+    "@fontsource/rubik": "^5.2.0",
+    "@fontsource/rye": "^5.2.0",
+    "@fontsource/sacramento": "^5.2.0",
+    "@fontsource/secular-one": "^5.2.0",
+    "@fontsource/sora": "^5.2.0",
+    "@fontsource/suez-one": "^5.2.0",
+    "@fontsource/syne": "^5.2.0",
+    "@fontsource/unbounded": "^5.2.0",
+    "@fontsource/varela-round": "^5.2.0",
+    "@fontsource/yellowtail": "^5.2.0",
+    "@hyperframes/engine": "0.8.137",
+    "@puppeteer/browsers": "^3.2.3",
+    "@react-three/fiber": "^9.8.1",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
+    "@types/three": "^0.186.0",
     "commander": "^15.0.0",
+    "esbuild": "^0.28.2",
     "ink": "^8.0.0",
     "ink-spinner": "^5.0.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "remotion": "^4.0.532",
+    "three": "^0.186.1",
     "tsx": "^4.23.15",
     "typescript": "^5.9.3",
     "zod": "^4.6.5"

package/skill/SKILL.md

@@ -1,17 +1,25 @@
 ---
 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.
+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 HyperFrames. 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.
+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 and check them with the CLI. Show the plan and preview for approval when those decisions are still open; an explicit request to render, or approval already given in the conversation, authorizes that work. For a scoped edit or integration test, continue from the existing project instead of restarting the creative briefing.
+
+Read the material before choosing a treatment. Own routine editing decisions and explain the few that matter: the hook, visual thread, pacing and music direction. Ask only when missing information would materially change the result. Respect the user's chosen style and message; quality comes from a purposeful edit, not a quota of cuts, animations or effects.
+
+For footage, talking heads, screen recordings, mixed media, or an open creative brief, read `reference/studio-editing.md`. It explains how to choose the approach and what this CLI can actually edit. For final verification and platform variants, read `reference/delivery-review.md`.
+
+This skill targets `reelkit-cli` 0.10.0 and its HyperFrames kit. Check the installed version with `reelkit --version`; in a source checkout, invoke its `bin/reelkit.mjs` with Node. Use the matching CLI before authoring with `reelkit/frame`.
 
 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`.)
+Local checks, previews and renders need no account.
+
+1. For work that searches or pulls the shared library, generates media, or records voiceover, run `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/`.
@@ -28,14 +36,20 @@ Add `--footage` for a video the motion design should be laid over. User files st
 If the user points at an existing video ("make one like this", a link or a file), it is a reference: you learn how it is built and make something new in that spirit. Read `reference/references.md`, then `reelkit ref download <url-or-file>` and `reelkit ref analyze <id>`, and look at the frames it saves. Take its structure, pace and motion; never its footage, music or words. A link is fetched on the user's machine and they are responsible for the right to download it; ask before running `reelkit ref analyze` without `--no-transcript`, because the audio (never the video) is sent to Reelkit to be transcribed.
 
 ### 2. Look
-Read `reference/styles.md` and agree the video's look with the user: one of its looks, or their own. If they already described what they want, match it and confirm in one sentence. Ask anything still open in one message, each question with a default. If any on-screen text will be Hebrew, read `reference/hebrew-rtl.md` now: it changes how words may enter and how lines are written.
+Read `reference/styles.md` for techniques that fit the material, and `reference/art-styles.md` when the picture should be drawn. Recommend a direction with a short reason; present a catalogue only if the user asks to compare looks. If they already described what they want, use it. Bundle only consequential open questions. If any on-screen text will be Hebrew, read `reference/hebrew-rtl.md` now: it changes how words may enter and how lines are written.
 
-Ask whether they want captions, and which kind: none, one word at a time (`word`), or a phrase at a time (`phrase`, the default). Write the answer into the plan as `captions`.
+Infer whether the video needs a narrator from the request and source. Ask only if that choice is consequential and still unclear. For a product, feature or brand launch carried by music and sound effects, follow `reference/launch-film.md` and write `"voice": "none"` in the plan; skip voice generation. Existing recorded speech needs the footage workflow in `reference/studio-editing.md`, not a replacement narrator.
 
-Then read `reference/continuity.md` and offer the user three concepts for the video, each one sentence about the picture (not the product) with a different central idea, and say what carries each scene change. They pick one; write it into the first scene's `notes` beside the look.
+Honor the requested captions: none, one word at a time (`word`), or a few words at a time (`phrase`, the default for generated narration). "A few words at a time" is `phrase`, never `word`; see `reference/captions.md`. Use no speech captions in a silent film. Write the choice into the plan as `captions`.
+
+When the central visual idea is still open, read `reference/continuity.md` and propose the strongest fitting concept. If the user wants alternatives, offer up to three concepts, each one sentence about the picture and what carries the changes. If they already chose a concept or asked for a scoped revision, use that direction. Write the chosen idea into the first scene's `notes` beside the look.
 
 ### 3. Plan
-Read `reference/scriptwriting.md` and `reference/scene-treatments.md` (and `reference/clips.md` if any scene might be a video clip). Write the chosen look into the first scene's `notes`. Run `reelkit assets voices` and choose a voice that fits the idea, audience and language.
+For a film with no narrator, write the plan in the launch-film shape (`"voice": "none"` and a `seconds` for every scene, see `reference/launch-film.md`) and skip the voice choice below.
+
+Read `reference/scriptwriting.md` and `reference/scene-treatments.md` (and `reference/clips.md` if a scene needs a video clip). Write the chosen look into the first scene's `notes`. For generated narration, run `reelkit assets voices` and choose a voice that fits the language, tone and user's preference. Reuse an already chosen voice. Offer a short comparison only when the user asks or the voice is a consequential open decision; do not require a gender mix. For Hebrew, consider voices marked `he` first.
+
+Use the real material already supplied: screenshots, footage, numbers, logo and exact names. Ask for a missing item only when the shot depends on it. Demonstrate product claims with real screens and interactions (`reference/kit.md`, "Act the product out"); a personal story or documentary does not need an invented product surface. Keep a small number of main ideas, state the intended duration and visual thread in the first scene's `notes`, and choose grounds by meaning and contrast. A short promo often fits 15 to 40 seconds; honor a different requested length. A film with a narrator-less launch shape also follows `reference/launch-film.md`.
 
 Write `plan.json`:
 
@@ -46,6 +60,7 @@ Write `plan.json`:
   "mode": "motion",
   "voiceId": "an id from reelkit assets voices",
   "pace": "normal",
+  "gap": "normal",
   "scenes": [
     {
       "id": "hook",
@@ -63,48 +78,54 @@ Write `plan.json`:
 }
 ```
 
-- 3 to 8 scenes. Scene ids are short, unique, lowercase with dashes.
+- 3 to 8 scenes with generated narration; 3 to 16 with `voice: "none"`. These are current plan-schema limits, not an ideal number of edits. Scene ids are short, unique, lowercase with dashes.
 - `treatment` is `motion-graphic`, `illustration`, `clip` 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.
 - `clipPrompt` is set only for `clip` scenes (a generated or reused video clip is the scene's picture; the rest of the scene uses `imageTags` and `shareable` as an illustration does). Clips are scarce: most videos have none or one or two.
 - `userAssetIds` lists the ids of the user's files shown in that scene.
-- `pace` is `slow`, `normal` or `fast`.
-- `captions` is `none`, `word` or `phrase`, as the user chose; leave it out for `phrase`. The manifest carries it: `<Captions group={manifest.captions} />`.
+- `pace` is `slow`, `normal` or `fast`: how fast the voice speaks.
+- `gap` is the silence between one sentence and the next: `tight` (0.2 s, for a promo), `normal` (0.3 s, the default) or `relaxed` (0.5 s, for a calm or emotional film). The film's length follows from it: `plan check` estimates it and `reelkit assets voiceover` prints the real one.
+- `captions` is `none`, `word` or `phrase` (a few words, up to 3, never spanning two sentences), as the user chose; leave it out for `phrase`. The manifest carries it: `<Captions group={manifest.captions} />`.
 - When the video follows a reference, add `"reference": { "id": "<id>", "take": ["fast cuts every ~1.2s"] }` (1 to 6 notes on what you took).
 
 Run `reelkit plan check`; it prints the estimated length to tell the user. Fix everything under "Fix these". Act on "Worth improving" unless you have a good reason not to.
 
-**Checkpoint.** Tell the user, in one sentence, that new components you write are shared with the Reelkit library for review after the render (their code, a description and an example, nothing else), and that they can say no: then use `reelkit init <name> --private` or `reelkit render --no-share`, or set REELKIT_NO_SHARE=1. Show the user the look, the title, the estimated length, and each scene's narration, the exact on-screen text and one line on the visual, in plain words about what they will see. Wait for a clear yes. A question or a comment is not approval: answer it and ask again.
+**Checkpoint.** Tell the user, in one sentence, that new components you write are shared with the Reelkit library for review after the render (their code, a description and an example, nothing else), and that they can say no: then use `reelkit init <name> --private` (it also keeps the images, clips and graphics generated for the video out of the library, whatever `shareable` says) or `reelkit render --no-share`, or set REELKIT_NO_SHARE=1. Show the user the look, the title, the estimated length, and each scene's narration, the exact on-screen text and one line on the visual, in plain words about what they will see. If the plan is not already approved, wait for a clear yes. A question or a comment is not approval; answer it without treating it as permission to render.
 
 ### 4. 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`.
+For generated narration only, run `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`.
 
 ### 5. Images and clips
 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.
+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. For an icon, a mark or a diagram that must stay sharp, `reelkit assets gen svg "<prompt>"` makes a vector graphic instead (see `reference/asset-reuse.md`).
 
 For each clip scene, read `reference/clips.md`, then search `reelkit assets search "<what the clip shows>" --kind clip` and pull a 60% match (`reelkit assets pull <id> --scene <sceneId>`), or generate: `reelkit assets gen clip --scene <sceneId>` (add `--green` for a green-screen subject). It waits for the clip, which takes minutes; check what is left with `reelkit whoami`.
 
 ### 6. Composition
-Read `reference/kit.md`, `reference/remotion-composition.md`, `reference/motion-design.md`, `reference/continuity.md`, `reference/captions.md` and `reference/beat-sync.md`.
+Read `reference/hyperframes-composition.md` for the seekable HyperFrames timing and media rules. Consult `reference/kit.md` for the components you need, `reference/motion-design.md` and `reference/continuity.md` for new shots, `reference/captions.md` when adding captions, `reference/beat-sync.md` for music timing, and `reference/voice-sync.md` for narrated visuals.
 
+- **Fit the picture to the voice** (narrated films; the whole method is in `reference/voice-sync.md`). The voice is the clock: write the narration first, record it (step 4), and only then place visuals from the real word times with `onWord(s, "word")` (the frame to start an entrance so it lands on its word; `wordFrame` is the word's own frame, `onWordBeat` lets it land on a beat only within 3 frames after the word). Never count words by hand. One visual event per stressed word and at most one every 0.5 s; the thing a word names is on screen within 3 frames of the word starting, never before the previous sentence ends; numbers count up to finish on their word; a list ticks on each item's word; scene changes fall in the gaps between sentences, never inside one; the last word of a sentence is held for the gap, not longer; sound effects for a word's visual sit under the voice at 0.3 or less. `reelkit check` fails on a word the scene never says, and `reelkit preview` renders a frame 4 frames after each word you timed: each of those should already show the thing that word names.
 - Choose the music before you write the composition, and read `reference/beat-sync.md`: `reelkit assets search "<mood and tempo>" --kind music`, then `reelkit assets pull <id> --music`. Scene changes then land on its beat by themselves; bring each element in on a beat inside a scene as that file shows.
 - 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.
+- For a brand reveal, a transformation, or a shot with real depth, read `reference/brand-motion.md` and `reference/three-d.md`. Choose the move by what it explains, preserve the supplied identity, and share its event frames with the sound cues. Keep reading-heavy shots in 2D; a requested brand film or showreel may use several purposeful 3D moments.
+- For what sits behind the whole film (a video, a picture that changes, or an animated ground), read `reference/backgrounds.md`; pick one ground and keep it.
 - 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`).
+- Write `src/Video.tsx` and any component files beside it. `Video.tsx` may import only `react`, `reelkit/frame`, `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. Read its "Worth improving" notes as well: they say when no library component was used, when every scene is type and shapes, and when the opening has no picture. Then `reelkit preview` (the first preview on a machine downloads a browser once and can take a minute) and look at every frame in `out/preview/`: each scene has two, `early` (30% into the scene) and `late` (90%), so look at both frames of each scene. 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, but anything that should be fully on screen by the late frame and is not is. Fix real problems and preview again. Go round at least twice, and finish with the studio test in `reference/motion-design.md`. `reelkit preview` also reports continuity: how many scene changes carry something across. Fix every `cut` it names, or keep it as a deliberate choice (a burst of fast hits, the end card); see `reference/continuity.md`.
+Run `reelkit check` and fix every error. Treat "Worth improving" notes as diagnostics: a deliberate cut or a calm shot can be correct. Run `reelkit preview` (the first preview on a machine may download a browser), inspect the contact sheet and each scene's early, late, word-timed and boundary frames. Check cropped or overlapping text, phone readability, missing media, hidden layers, false claims and identity changes. A mid-animation frame is not a defect by itself; inspect the landing and hold. Fix observed problems, then recheck changed shots. Repeat only for a change or unresolved defect; finish with `reference/delivery-review.md`. Continuity notes should prompt a reason for a cut, not force every shot to morph.
 
-You only ever see frames, never the moving video, so the frames are your eyes: look at every one. And whoever built a video is the worst judge of it. If you can start a separate agent, give it only the user's original request and the preview frames (not your explanations) and ask for a score out of 100 per scene, a list of flaws, and a concrete fix for each, in numbers ("raise the title 60 px", "hold the label 0.4 s longer"). Fix, preview, and have the same reviewer look again until every scene passes 90. If two rounds leave a scene under 70, stop and show the user the gap instead of spending more rounds.
+Use frames to inspect layout and the moving video to judge timing and sound when playback is available. `reelkit preview` writes `out/preview/sheet.jpg`, one labelled picture of all of them: look at it first, then at every frame singly. And whoever built a video is the worst judge of it. If independent review is available and authorized, give the reviewer the original request and the preview frames without your explanations. Ask for observable defects and concrete fixes: a cropped logo, unreadable label, missed landing or unintended empty state. Fix those defects and recheck the changed shots; stop iterating when the requested result is achieved.
 
-**Checkpoint.** Show the user the preview frames (both of each scene). Wait for a clear yes. For changes, edit the code, `reelkit check`, `reelkit preview`, and show them again.
+**Checkpoint.** Show the preview frames when the user is choosing the final treatment. If they have already approved rendering or explicitly requested this edit and render, continue within that scope. For requested changes, edit the code, run `reelkit check` and `reelkit preview`, and inspect the updated frames.
 
 ### 7. Render
 `reelkit render`. Give the user the path it prints.
 
+Verify the finished export using `reference/delivery-review.md`; previews alone do not prove audio presence or synchronization. Report the deliverable path, the main creative choices and any verification limitation. Create extra platform variants only when requested or necessary for the stated destinations.
+
 If the render fails, read the error, fix the composition, and run `reelkit check` before rendering again.
 
 ## Rules
@@ -114,7 +135,7 @@ If the render fails, read the error, fix the composition, and run `reelkit check
 - The user's own files (images, footage, sounds) stay private: pass `--share` only when they ask you to contribute a file. Components are the opposite, by default: new components you write are sent to the library for review after the render (source, description and example only), unless the user says no; then use `reelkit init <name> --private` or `reelkit render --no-share` (or REELKIT_NO_SHARE=1).
 - 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: nothing of this user's text in them, and every new component starts with a one or two sentence comment saying what it shows and when to use it (`reference/component-authoring.md`).
-- One stage at a time. Do not write composition code before the user has approved the plan, and do not render before they have approved the preview.
+- Resolve open creative decisions before committing to them. Preserve earlier approvals and explicit requests to edit or render; do not add a new approval step for work already authorized.
 - Never say a video is done without having looked at its frames and checked that the file exists.
 - 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

@@ -12,9 +12,111 @@ Some guidance in these skills, and some starter-kit components, are adapted from
 
 - **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.
+  This one targets Remotion, so more carried over. Adapted into the starter kit (`src/hyperframes/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`.
+Used in: `motion-design`, `hyperframes-composition`, `scriptwriting`, `scene-treatments`, the starter kit, and the preview checklist in `SKILL.md`.
+
+## The 3D typeface
+
+- **Inter** (Bold weight), by the Inter Project Authors (https://github.com/rsms/inter), SIL Open Font License 1.1. It is the one typeface bundled for the kit's `Text3D`, converted to three.js's typeface JSON (the Latin letters, digits, punctuation and a few symbols) and kept as data in `src/remotion/kit/inter-bold-typeface.ts`. The three npm package ships no typeface files, so the glyph outlines were taken from the Inter font files in the `@fontsource/inter` package; the outlines are unchanged apart from scaling to 1000 units to the em. The licence text, as shipped with that package:
+
+```
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+```
+
+The 3D layer depends on `three` (MIT) and `@react-three/fiber` (MIT). Rendering uses `@hyperframes/engine` (Apache-2.0). Fonts are bundled locally from Fontsource; each family retains its original font licence in its installed package.

package/skill/commands/launch-film.md

@@ -0,0 +1,7 @@
+---
+description: Make a voiceless product launch film with Reelkit
+---
+
+Use the reelkit skill and follow `reference/launch-film.md` to make a launch film with no voice for this product: $ARGUMENTS
+
+Use the product's supplied screens and logo. Ask only for material a planned shot still needs; continue from the existing project for a revision.

package/skill/reference/art-styles.md

@@ -0,0 +1,70 @@
+---
+name: art-styles
+description: Use when the user wants a drawn, illustrated or art-directed film rather than a product or interface one, or names one of these fifteen styles (flat vector, line art, isometric, soft 3D, hand-drawn cel, collage, liquid, shape morph, Bauhaus, synthwave, aurora glass, variety captions, sticker explainer, pixel art, HUD) - each with when to use it, how it is built from the kit, its signature features, timing, sound, and what it forbids.
+---
+
+# Fifteen art styles
+
+These looks continue the catalogue in `reference/styles.md` (they are numbered 14 to 28 so you can offer them in the same list). They come from mg-styles-15 by Vincentwei1021 (MIT): fifteen 10-second films, each the canonical form of one motion-design style, made entirely from code. The originals were web pages rendered frame by frame with synthesised sound; here each one is translated into reelkit's kit, HyperFrames at 30 frames a second, library components and library sounds. The film of each style is at `https://vincentwei1021.github.io/mg-styles-15/#<name>` (the name is in each card's heading), and when the reelkit repository is checked out, the full original prompt is at `mg-styles-15/prompts/<name>.md` and the source at `mg-styles-15/demos/<name>/`. Read the prompt's Creative seed and Signature features when the user picks one of these looks and you have them; the card is enough when you do not.
+
+## What these looks share
+
+- One look for the whole film, as always: say it in the first scene's `notes`, declare one palette at the top of `Video.tsx`, and keep the hero colour on one element per frame unless the card says otherwise.
+- **The signature features are the style.** A viewer who knows motion design names the style in one second from them. Map every signature feature in the card to a moment in the plan and write it into that scene's `notes`; `reelkit plan check` cannot see them, so the plan checkpoint is where they are confirmed with the user.
+- The picture is drawn in code: SVG, CSS transforms, or a canvas redrawn each frame inside a sibling component. Generated images appear only where a card asks for a photograph (collage, sticker explainer) and the user's own pictures and footage where the card says so. Every drawing is a pure function of the frame, with `random(seed)` from reelkit/frame for any variation.
+- Timing is in frames at 30 a second. "On twos" means every drawing is held for two frames: quantise the clock once, `const f = Math.floor(frame / 2) * 2`, and read everything from `f`; "on threes" is the same with 3. A stepped look (cel, collage, pixel) moves in steps and does not breathe between them; that is the look, not a fault.
+- Where a card gives an easing as four numbers, use `Easing.bezier(...)` from reelkit/frame with those numbers in `interpolate`, both ends clamped. Where it gives a spring, use the kit presets.
+- Each card ends with **Bends:** the rules in `reference/motion-design.md` this look is allowed to break (a flat ground, visible overshoot, glow, stepped motion). Everything else in that file still holds, and the camera still moves as a group.
+- Sound comes from the library, never synthesised: `reelkit assets search "<words>" --kind sfx` and `--kind music` with the words in the card. Pops and clicks that repeat are graded quieter each time (`cuesFor(..., "pop")` does this).
+- Before the preview checkpoint, score the film 1 to 10 on the seven things a motion-design jury scores: style fidelity (the signature features are all there and correct), concept (a hook in the first half second, one unmistakable hero moment at 60 to 75 percent of the runtime, a composed end frame), motion craft (easing, overlap, anticipation, follow-through, no dead or jittery spans), design and type, finish (texture, grain, glow only where the style wants it, no banding or aliasing), sound and sync (hits on the frames the picture lands), technical (no fallback fonts, nothing clipped at the edges). Fix whatever scores lowest first; 6 is a template, 8 is agency work.
+
+## The catalogue, continued
+
+### 14. Flat vector (showreel) · `01-flat-vector`
+**When:** an explainer or a brand story told by shapes and a simple character; the classic software explainer, pushed to showreel polish. **How:** a flat solid colour field as the ground (this look's exception), five or six solid colours from one palette, no gradients, no strokes, no shadows; everything is SVG or plain divs in palette colours. One hero moves at a time. A drop-in has three phases: three frames of anticipation the other way, the move with a stretch of about 10 percent along its direction, a squash on landing and a settle on `springs.snappy`. A scene builds piece by piece with a 2 to 4 frame stagger, each piece with its own small overshoot. A character is a rig of simple shapes turning about anchors (`transformOrigin` at the shoulder, the hip), with a head bob and a blink every 2 to 3 seconds by frame number. The whole film can be one shot: a `Camera` that pushes into a window (`zoomTo`) until it is the next scene. Scene changes are shape wipes: `SceneFrame` exit `"color-push"` with `shape="circle"` and `origin` at the element that caused it, or an element flies out and carries the cut. Close on the user's logo: everything collapses into it, settles, holds 1.5 seconds. Components in the library: `FlatDropIn` (search "flat drop"), `ShapeRig` (search "shape rig"), `FlatSkyline` (search "flat skyline"). **Timing:** an entrance 10 to 14 frames; stagger 2 to 4; squash and stretch about 10 percent. **Sound:** music "upbeat pop" around 120 BPM; "pop", "boing" and "whoosh" on entrances, on the frame. **Forbidden:** gradients, outlines thicker than a hairline, photographs, drop shadows, two heroes moving at once. **Bends:** a flat solid ground; visible overshoot on entrances.
+
+### 15. Line art (restrained) · `02-line-art`
+**When:** luxury, architecture, finance, a logo reveal: one continuous line tells the story. **How:** a near-black or deep midnight ground (`BgGrain` at low intensity) and one line colour, champagne or the hero, at one constant width of 3 px at 1080 wide with round caps. Each figure is one SVG path drawn on with `stroke-dasharray` and `stroke-dashoffset` from its `pathLength`, and the tail of each figure is the start of the next, so the pen never lifts: a seed grows into a sapling, its branches become the lines of a building, the building's edge runs into a horizon, the horizon loops into the user's logo outline (from their SVG). A soft glowing dot leads the pen tip: the one glow in the film. The draw eases into corners with `Easing.bezier(0.65, 0, 0.35, 1)` per segment. The `Camera` follows the tip with a slow drift, then pulls back at the end to show the whole drawing composed as a poster; segments the camera has left dim to about 35 percent. Line to fill: when the logo outline closes, the same path's fill grows from its anchor (a `clip-path` circle growing), then a thin letter-spaced wordmark fades up (the one plain fade allowed). Components in the library: `LinePath` (search "line path"), `LineToFill` (search "line fill"). **Timing:** a figure draws in 30 to 60 frames, the fill in 12, the end held 1.5 seconds or more. **Sound:** music "felt piano" or "soft strings"; "pen on paper" under the draw, its volume following the tip's speed (louder on long fast segments); a "chime" on the fill. **Forbidden:** a second line width, more than two colours, a filled shape before the fill moment, shadows, a line that lifts and starts somewhere else. **Bends:** a glow on the pen tip; an opacity fade for the wordmark.
+
+### 16. Isometric (restrained) · `03-isometric`
+**When:** a city, a campus, an office, a data centre, an architecture diagram, a product's parts in a tiny world. **How:** a pale pastel ground (lavender, mint, peach, sky, white; a flat field is right here). True isometric faces from CSS transforms, without three.js: every box is three divs (top, left, right) and each face takes the same formula, `scaleY(0.866)` then `skewX(±30deg)` then `rotate(∓30deg)`; or one SVG with those matrices. Depth is the screen's y: sort the children by grid row plus column and draw in that order. Anything that moves along the grid keeps a 2:1 pixel slope. Build in this order: ground tiles drop in as a wave from the centre, each with a tiny bounce and a delay by its distance (2 frames per ring); buildings grow: the base lands, the walls `scaleY` from 0 with overshoot (`transformOrigin` at the bottom), the roof caps 2 to 3 frames later; trees pop; windows light in sequence; then life: cars loop on the roads, a drone carries a packet, a data stream pulses between buildings, a turbine turns. The camera is the group translating: `Camera` keys with x and y only, never `rotate`, over layers at 1 : 0.8 : 0.6 parallax (foreground clouds fastest). End: the camera pulls back to the whole island floating in the pastel void, and the title is set on the plane, skewed into the same iso space, or the user's logo flat and 2D above it. Components in the library: `IsoGrid` (search "iso grid"), `IsoBox` (search "iso box"), `IsoTitle` (search "iso title"). **Timing:** tiles 1 to 2 seconds, growth 3, life 3, pull-back 2. **Sound:** music "plucky marimba" tech; a "soft click" or "pop" on every tile and building landing (`cuesFor(..., "pop")` grades them); an "airy whoosh" on the pull-back. **Forbidden:** any vanishing point, a camera that rotates, hard black shadows, more than six colours, a building that appears whole. **Bends:** a flat ground; overshoot on growth.
+
+### 17. Soft 3D render (restrained) · `04-3d-render`
+**When:** a product ident, the user's logo or wordmark as a candy object, a "satisfying" brand film. Read `reference/three-d.md` first. **How:** `Scene3D` with `mood="studio"` over a pale pastel ground (`BgAurora` at intensity 0.3, or a flat pale field seen through the transparent scene). The hero is `Hero3D` (`kind="logo"` with the user's word, or `"device"` with their screenshot) dropping in on `poses` that land with a jiggle: a pose at `scale` 1.06 on the impact frame, 0.97 four frames later, 1 after ten, so it reads as a soft body settling. Under it a cloner field: `Assemble3D` with `shape="grid"` of rounded blocks, or `Particles3D` from `"plane"`, rippling with a wave the hero's arrival starts (each block offset by a sine of its distance from the impact minus time). Materials come from the mood: clearcoat, two coloured rim lights, a soft floor (`floor="soft"`). The camera moves with a long tail, 80 percent of the move in the first 20 percent: a camera key with a long `lead`. End on one clean hero composition held a second or more, hovering. Components in the library: `PastelCyc` (search "pastel cyc"), `SoftTitle` (search "soft title"). The example's picture is a Blender plate rendered from mg-styles-15/demos/04-3d-render (see the example's blender/README.md); the kit's 3D elements are the route when Blender is not available. **Sound:** "soft thud" and "squish" on the impact, "bubble pop" on the ripple, music "airy cinematic pad". **Forbidden:** hard shadows, saturated primaries, more than one hero object, extruded text beyond the one word, a logo that spins. **Bends:** none beyond the 3D layer itself; this is a restrained look.
+
+### 18. Hand-drawn cel (either mode) · `05-cel-boil`
+**When:** a playful, crafted, personal tone; a title that feels drawn by hand; a mascot. **How:** a warm paper ground (search "paper texture" `--kind image` as a `BgImage` with no dim, or `BgGrain` on a cream base) with `Grain` multiplied at 10 to 15 percent, one static layer on top. Every mark is a drawn line: SVG paths with two or three hand-drawn variants of each, switched by the frame (`variant = Math.floor(frame / 2) % 3`): that is the boil, and it is never random. Animate on twos; fast actions on ones; holds on threes. A fast move gets one smear frame: the shape stretched 150 to 300 percent along its path for exactly one frame. Cel effects over the action, each a cycle of 4 to 8 drawings: a smoke puff curling, sparks, speed lines, a star burst. Fills sit slightly off-register from the lines (2 to 3 px). Three or four colours: ink, one warm, one bright, paper. The title is hand-lettered (`font("permanentMarker")`, or `font("amaticSC")` for Hebrew) and keeps boiling on its hold. Components in the library: `BoilStroke` (search "boil stroke"), `CelFx` (search "cel fx"), `SmearMove` (search "smear move"), `PaperGround` (search "paper ground"). **Timing:** everything on twos; the end held a second or more on threes. **Sound:** music "jazzy pizzicato" or "xylophone"; cartoon effects "fwoosh", "pop", "poof", "sparkle", on the frame. **Forbidden:** smooth springs on the drawn lines (they move in steps), gradients, crisp geometric type, more than four colours, a boil driven by anything but the frame number. **Bends:** stepped motion instead of springs; a boil instead of a breathe.
+
+### 19. Collage cut-out (showreel) · `06-collage`
+**When:** music, street, editorial, a magazine-style surreal piece, a topic about ideas or the mind. **How:** a kraft or newsprint ground (search "newsprint" or "kraft paper" `--kind image` as a `BgImage` with no dim). The cut-outs are the user's own pictures with their subject cut out by `reelkit assets layers`, or public-domain pictures, each given a 2 to 4 px white scissor edge (four stacked `drop-shadow(0 0 0 white)` filters, or an SVG `feMorphology` dilate under the picture) and a halftone (an SVG dot pattern over it at 30 percent, multiply). Puppet joints: parts turn about anchors at the jaw, the shoulder, the elbow; a mouth is two or three replacement cut-outs swapped by frame. Motion in steps: action every third frame (10 a second), holds every fifth, with a ±2 px placement jitter per step from `random(seed)` so the pieces look hand-placed. Hands slap elements onto the page: a hand cut-out enters, the element appears under it, the hand leaves. Type is constructivist: `font("archivoBlack")` in red and black on a diagonal, torn-paper strips behind it. Scene changes: a hand slaps the next scene's element on, the page turns (`SceneFrame` `"turn"`), or a torn edge wipes. Layer order, bottom to top: paper, big colour blocks, cut-outs, scribbles and tape, grain. Components in the library: `CutoutSticker` (search "cutout sticker"), `PaperHand` (search "paper hand"), `TornStrip` (search "torn strip"). **Sound:** overlay "vinyl crackle" for the whole film; music "boom bap"; "paper rustle", "scissors", "slap", and a comic "pop" on the reveal. **Forbidden:** smooth motion, soft shadows, anyone's face but the user's, a cut-out without its edge, gradients. **Bends:** stepped motion; hard cuts carried by a hand.
+
+### 20. Liquid (showreel) · `07-liquid`
+**When:** a logo genesis, a drink or food brand, a music visual, a transition that floods the frame. **How:** a deep ground (plum, or the palette's base). Blobs are SVG circles under a gooey filter: `feGaussianBlur` with `stdDeviation` 20 or more, then `feColorMatrix` on alpha (`0 0 0 19 -9`) so blobs that come near fuse with a neck. Fake depth on each blob: a radial highlight and a rim of 20 percent white, so it reads as thick glossy liquid, never a flat disc. The beats: droplets fall and squash on landing (scaleX 1.3, scaleY 0.7 for 3 frames, then a rebound); blobs merge (the neck stretches, snaps, both ends rebound 2 to 3 frames); secondary droplets follow the main one 2 to 3 frames late; a wave floods the frame as the scene change (a path whose front has 3 to 5 bulges out of phase, sweeping across; `SceneFrame` `"color-push"` with `shape="diagonal"` behind it); the liquid gathers into the user's logo or a word in a heavy face placed under the same filter so it fuses with the blobs; a last drip falls from it and ripples; hold. Every move is flung, never uniform: `Easing.bezier(0.22, 1, 0.36, 1)`. Components in the library: `GooLayer` (search "goo layer"), `Droplet` (search "droplet"), `LiquidWave` (search "liquid wave"), `LiquidWord` (search "liquid word"). **Sound:** "gloop", "pour", "splash", "drip"; music "glossy synth" with a bass swell under the flood. **Forbidden:** a straight line or a corner on anything liquid, a uniform speed, blobs that overlap without fusing (that is a missing filter), particles. **Bends:** a highlight on every blob; strong overshoot.
+
+### 21. Shape morph (restrained) · `08-morph`
+**When:** a story told by one object becoming the next: a product's features, a journey, a chain of ideas, on the beat. **How:** a colour field ground that changes with each morph (`SceneFrame` `"color-push"` with `shape="bar"` or `"circle"` from the hero). One hero shape: write every icon in the chain as a polygon with the same number of points (64 is enough), the first point at the same clock position, and interpolate point by point. A complex A to B never goes direct: A closes into a circle or a capsule, then opens into B, 8 to 12 frames each half, with a slight turn and 10 to 15 percent squash and stretch through the morph; sub-parts morph in sync (steam into sun rays into waves). Ease `Easing.bezier(0.7, 0, 0.3, 1)` with 3-frame cushions at both ends. For a word, `Particles3D` from `"text"` to a shape does the same in light. Six to eight morphs, each landing on a beat (`nextBeat`). End: the last shape becomes the user's logo, traced as the same number of points, with the wordmark. Components in the library: `ShapeMorph` (search "shape morph"), `ColorFieldSwap` (search "color field"). **Sound:** music "plucky arpeggio"; a pitched "whoosh" per morph, ending on the landing frame. **Forbidden:** a cross-fade between shapes, two shapes morphing at once, a morph that knots (look at the midpoint frame of every morph in the preview), a hero that holds still between morphs. **Bends:** a flat colour field ground.
+
+### 22. Bauhaus grid (showreel) · `09-bauhaus`
+**When:** a kinetic poster, a festival or event opener, anything that wants to move to a beat. **How:** cream paper (`Grain` multiply on a cream base) and red, yellow, blue and black. A strict modular grid: a module is an eighth of the width on 16:9 and a fifth on 9:16; every size, position and move is a whole number of modules and every landing is on a grid line. Every move is on a beat (`manifest.music.beatFrames`; 120 BPM is every 15 frames): a quarter circle turns 90 degrees about a corner, a semicircle slides one module, a triangle flips, a square splits, and the pivot alternates between the shape's own centre, a corner and the frame's centre. 0 to 2 seconds: grid lines draw on and the first red circle lands; 2 to 6: the composition assembles into a poster; 6 to 8: on the drop, a cascade wave across the grid, each module's phase its row plus column; the rest: freeze into the poster with Swiss type, a heavy geometric sans (`font("archivoBlack")` or `font("unbounded")`) set vertically, a small-caps line under it. A slight print misregistration is allowed: a copy of one colour offset 2 px at 30 percent. Components in the library: `ModularGrid` (search "modular grid"), `GridShape` (search "grid shape"), `SwissTitle` (search "swiss title"). **Timing:** a move takes 8 to 10 frames with `Easing.inOut(Easing.quad)` or linear, then holds until the next beat; no overshoot ever. **Sound:** music "minimal techno click"; a "blip" or "click" on each flip (`cuesOnBeats`), a kick on quarters. **Forbidden:** overshoot, a diagonal off the grid, more than five colours, gradients, a move between beats. **Bends:** linear and quad moves without springs; a flat ground; nothing breathing between beats.
+
+### 23. Synthwave (showreel) · `10-synthwave`
+**When:** retro, nightlife, music, a game, an "80s" hook. **How:** `BgGrid` with a deep purple base and a magenta hero is the rushing perspective grid with its horizon glow. Over it a striped sun (a circle with horizontal bands cut out, magenta to orange to yellow: this look allows the multi-stop gradient on the sun and the chrome only), wireframe mountains as SVG polylines, palm silhouettes, a seeded starry sky. 0 to 1 second: VHS tracking noise and a "PLAY ▶" label in `font("jetbrainsMono")`; then the grid rushes (`BgGrid` speed up) and the sun rises; the title slams in as chrome, a multi-stop metallic gradient clipped to the text, a bevel highlight line, a star glint sweeping once, with `SceneFrame` `"flash"` on the slam; a pink neon script word (`font("yellowtail")` or `font("sacramento")`) writes on like a tube with two or three flickers (opacity stepped by frame) in double glow: `text-shadow` tight 4 px and wide 30 px at low opacity. A VHS pass over everything, one static layer: RGB split 1 to 2 px (two copies of the layer tinted red and blue, offset, screen blend), scanlines (a repeating 2 px gradient at 10 percent), one or two glitch frames a second (a 2 to 4 px horizontal shear on seeded frames). End on the hero frame with the ride sustained. Components in the library: `RetroSun` (search "retro sun"), `WireMountains` (search "wire mountains"), `ChromeTitle` (search "chrome title"), `NeonScript` (search "neon script"), `VhsPass` (search "vhs pass"). **Sound:** music "synthwave" (gated snare, arpeggiated bass); "crash" on the title slam, "vhs noise" under the opening, "neon buzz" on the script. **Forbidden:** pastels, a white ground, a thin elegant face for the title, glow on body text, more than the one flash in any second. **Bends:** glow on the hero and the lines; gradients on the sun and the chrome title; hard cuts on the beat.
+
+### 24. Aurora glass (restrained) · `12-aurora-glass`
+**When:** an AI or software launch that should feel slow, translucent and expensive; the 2025 "liquid glass" look. **How:** `BgAurora` on a deep indigo-black base with the hero and accent in adjacent hues (violet, blue, cyan: never complementary), intensity 0.6, with `Grain` at 3 to 5 percent over it to stop banding. `GlassPanel` cards (`theme="glass"`, `tilt` 6 to 10) float in at two or three depths, moving at 1 : 0.7 : 0.5 of a very slow `Camera` drift; inside them small interface moments, a chat bubble, a voice waveform of bars, a toggle, each arriving by opacity plus an 8 px rise and nothing more. The wow moment: a lens, a circle that carries a magnified copy of the ground (a second `BgAurora` scaled 1.3 and clipped to the circle) with a chromatic rim (two thin coloured strokes offset 1 px) and a specular edge, gliding across the cards on a long sine path. The title in a light sans (`font("outfit")` at 300) with wide tracking. Everything slow: `Easing.inOut(Easing.sin)`, nothing under 20 frames, a 2 percent camera push over the film. Components in the library: `GlassLens` (search "glass lens"), `MicroUi` (search "micro ui"), `LightTitle` (search "light title"). **Sound:** music "ambient cinematic pad"; "soft shimmer" as the lens passes; a very quiet "ui tick" on each toggle. **Forbidden:** a fast move, complementary colours, a white ground, hard edges, more than three cards, glow on the type. **Bends:** glass and the aurora gradient are the look; an opacity-plus-rise entrance for text is right here.
+
+### 25. Variety captions (showreel) · `18-hanazi`
+**When:** a vlog, a pet or reaction video, a funny reply, anything with footage and emotion; the television variety-show caption, now the common language of vlogs. **How:** the picture is the user's footage (`FootageLayer`) or their photos in `ImageLayers` with a slow Ken Burns, a subtle handheld shake (a seeded 2 to 4 px drift at one or two cycles a second) and snap punch-ins on the moments (`Camera` `punches`). Over it the reacting captions: three-layer text, a fill (solid or a gradient of two hues), a thick white stroke (`WebkitTextStroke` or stacked `text-shadow`), a coloured outer stroke and a drop shadow, in a rounded heavy face (`font("lilitaOne")` or `font("modak")`; `font("fredoka")` for Hebrew). Each caption pops 0 to 1.15 to 1.0 in about 8 frames (`springs.snappy`), per character with a 2-frame stagger and a slight tilt, then wiggles gently while it holds (±1.5 degrees by a sine of the frame), and it appears 2 to 3 frames after the moment it reacts to, never before. Decorations drawn as SVG, never emoji: a radial burst box with speed lines for shock, a sweat drop for awkward, sparkles for praise, a stamp for approval. The spoken words use `Captions` in `"pop"` mode. Components in the library: `PopCaption` (search "pop caption"), `BurstBox` (search "burst box"), `HandheldPhoto` (search "handheld photo"). **Sound:** music "bouncy variety" (pizzicato, claps); "boing", "pop", "ding", "slide whistle", "record scratch" on the reactions. **Forbidden:** a caption that stays after its moment, more than one reacting caption at a time, a thin typeface, a caption over the face, anyone's face but the user's. **Bends:** strong overshoot; saturated clashing colours with white strokes; a wiggle while holding.
+
+### 26. Sticker explainer (restrained) · `19-paperclip`
+**When:** a knowledge or explainer video with facts, numbers and parts: hard science, finance, "how many X are in a Y". **How:** a calm blue-grey or off-white ground (a flat field is right here), two or three colours plus one accent, an equal-weight sans (`font("outfit")` at 500; `font("assistant")` for Hebrew), strict alignment. Photographs become stickers: the user's pictures with the subject cut out by `reelkit assets layers`, an 8 to 12 px white outline (stacked `drop-shadow` filters, or a dilated copy under it) and a soft shadow, so pictures from different sources sit together. Everything lives on one giant canvas, a div three times the frame, and one `Camera` path flies between the information points with long eases (`lead` 20 to 30 frames): the sticker of the object, its parts exploded with leader lines drawing from each part to its label, a grid of tiles lighting up, a bar chart growing (search "bar chart" `--kind component`) with `CounterRoll` on its number, a map route drawing on, then the pull-out to a bold title card: one huge number, one small caption. Every sentence of the narration brings a new visual element in on its word (`onWord`), and every chart is to scale with the plan's own numbers. **Sound:** music "clean tech explainer"; a "ui click" per label, "counter ticks" under the count, a "soft whoosh" on each camera move (`cueOnCamera`). **Forbidden:** an invented number, a photograph without its sticker edge, a chart not to scale, a second accent, a cut (the camera carries every change). **Bends:** a flat ground.
+
+### 27. Pixel art (showreel) · `20-pixel`
+**When:** a game, a retro brand, an 8-bit music piece, a playful nostalgia hook. **How:** draw at a small internal size (320 by 180 on 16:9, 180 by 320 on 9:16) on a canvas in a sibling component redrawn each frame, or as a grid of divs for small sprites, and scale it up by a whole number (6) with `imageRendering: "pixelated"`; every position is a whole internal pixel. A limited palette of 16 to 32 colours; a gradient only as dithering, a checker of two colours. Three or four parallax layers moving by whole pixels at different speeds. The hero sprite is a pixel array in code with a 6 to 8 drawing run cycle at 10 a second (advance a drawing every third frame), jumping and collecting on the beat; a dialogue box types a line in a pixel-looking face (`font("jetbrainsMono")` drawn small on the internal canvas); a chunky pixel logo drops in with a shine sweep; the palette shifts from day to sunset by swapping it per scene. An optional CRT pass over everything: scanlines, a slight vignette, a phosphor glow at 20 percent, none of which blurs the pixels. Components in the library: `PixelCanvas` (search "pixel canvas"), `PixelSprite` (search "pixel sprite"), `PixelDialog` (search "pixel dialog"), `CrtPass` (search "crt pass"). **Timing:** stepped, never springs: the sprite's drawing is `Math.floor(frame / 3) % 8`. **Sound:** music "chiptune"; "jump", "coin", "chest" 8-bit effects. **Forbidden:** an anti-aliased edge, smooth easing on a sprite, a sub-pixel position, a modern typeface, a photograph. **Bends:** stepped timing; a flat ground; nothing breathes.
+
+### 28. HUD (either mode) · `22-hud`
+**When:** a tech review, a drone or a product with specifications, a "target found" reveal, a cyberpunk or military frame. **How:** a deep teal-black ground (`BgGrid` at low intensity, or flat), cyan linework with an orange alert state: one hero and its alert twin, this look's exception. `HudOverlay` gives the corners, the timecode and the scanlines; add a hex grid (an SVG pattern), concentric rings with ticks turning at different rates (linear is right for a loop), a radar sweep (a conic-gradient wedge turning, blips flashing on a seeded schedule), data columns in `font("jetbrainsMono")` whose digits roll through 3 to 5 frames of random then settle on their real values, typewriter status lines with a blinking cursor, sparklines. In the centre a `Scene3D` with a wireframe object, `Particles3D` from `"sphere"` or a `Hero3D` at low opacity, turning slowly. Build in hierarchy: the frame lines draw on first (`stroke-dashoffset`), then the panels, then the data comes alive, staggered 2 to 4 frames; the target is found and the lock brackets snap from scale 1.4 to 1.0 in 8 frames, fast out and slow in; then everything flips to the alert colour with "LOCKED" and the user's claim. Finish: a tight 2 to 4 px glow on lines only, a slight chromatic aberration (a 1 px red and blue offset copy at 30 percent), scanlines, at most one or two micro-glitches a second. Any number shown as data is from the plan or is plainly decorative and makes no claim. Components in the library: `RadarSweep` (search "radar sweep"), `DataColumn` (search "data column"), `LockBrackets` (search "lock brackets"), `HexGrid` (search "hex grid"), `TypeLine` (search "type line"). **Sound:** music "darksynth"; "hud beep", "scan sweep", a rising "lock-on tone", an "alarm" on the lock. **Forbidden:** a figure presented as data that is not in the plan, text under 3 percent of the width that must be read, rounded friendly shapes, more than two line colours, a glitch above two a second. **Bends:** glow on lines; linear loops; the hero in two states.
+
+## Choosing one
+
+Offer these with the catalogue in `reference/styles.md` as one numbered list when the user has not described a look, and go straight to the matching card when they name a style, a studio or a film in this family. A product with real screenshots still belongs to looks 1 to 13; these fifteen are for a film whose picture is drawn, and the user's logo, pictures and footage are placed into the drawing where each card says.

package/skill/reference/asset-reuse.md

@@ -21,11 +21,22 @@ A slightly imperfect existing image is usually fine, and it is free, but below 6
 
 ## 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.
+- Never ask for text, letters, logos or UI in the picture. `reelkit assets gen image` adds "No text, letters, numbers, logos or brand marks anywhere in the picture." to every prompt that does not itself ask for text or a logo.
 - 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.
+- If the user says a scene may not be shared, it stays private whatever you pass. A project made with `reelkit init <name> --private` shares no generated image, clip or graphic at all, whatever the plan's `shareable` says.
 - Give 3 to 6 short lowercase tags (subject, style, mood); they are how later videos find the image.
+
+## Vector graphics
+
+Use `reelkit assets gen svg "<prompt>"` for icons, logo-like marks, simple illustrations and diagrams: anything that must stay sharp when zoomed or that takes one flat accent colour. Use `reelkit assets gen image` for photos and textured art. Say the colours and "transparent background" in the prompt ("a flat teal rocket icon, two colours, transparent background"). It takes about 45 seconds and counts as one image against the image quota. With `--scene <id>` on an illustration scene the graphic becomes that scene's image; without it the file is saved as `assets/svg-<id>.svg` and you place it yourself with `<Img src={urls["assets/svg-<id>.svg"]} />`. The file is checked before it is saved: a graphic with a script or an outside link is refused and nothing is saved. `--private` keeps it from the library whatever the plan says.
+
+
+## Components you pull from the library
+
+Library components differ in how they count frames, so read the pulled file in `src/` before timing one to a spoken word. For each prop that takes a frame (`delay`, `at`, `tickAt`, `every`, `from`), find out what it counts from: the component's own first frame, or the frame after some fixed lead-in. Some add a hidden offset (a checklist whose `tickAt` has 10 frames added after its `delay`; a cursor that clicks 3 frames after `at`), and some have one uniform `every` for all their items instead of one time per item. Account for the offset in the number you pass, or write the item times out one by one.
+
+A component that has only a `delay` (or nothing) starts from its own frame 0: wrap it, so that its frame 0 is the word's: `<Sequence from={onWord(s, "tasks")}><Card /></Sequence>`. Inside the `Sequence` its `delay` counts from there. Then look at `reelkit preview`'s word frame for that word: the component should already show what the word names.