reelkit-cli 0.8.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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reelkit-cli",
-  "version": "0.8.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,20 +53,57 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@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",
-    "@remotion/bundler": "^4.0.532",
-    "@remotion/google-fonts": "4.0.532",
-    "@remotion/renderer": "^4.0.532",
-    "@remotion/three": "4.0.532",
     "@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",

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,20 +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 the video has a narrator. If it does not (a product, feature or brand launch carried by music and sound effects), follow `reference/launch-film.md` and write `"voice": "none"` in the plan; the voice step (4) and the captions question below are skipped.
+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.
 
-Ask whether they want captions, and which kind: none, one word at a time (`word`), or a few words at a time (`phrase`, the default). "A few words at a time" is `phrase`, never `word`; see `reference/captions.md`. Write the answer into the plan as `captions`.
+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`.
 
-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.
+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
 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 any scene might be a video clip). Write the chosen look into the first scene's `notes`. Run `reelkit assets voices` (women first), pick THREE voices that fit the idea, audience and language, the first a female voice (the default) and at least one male, and show the user the three with one short line each (name, gender, accent, character). Ask which they want, saying the first is used if they do not mind; on no answer or "you choose", use the first. For a film in Hebrew offer the voices marked `he` first, then say that any other voice can also read Hebrew with the current model.
+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.
 
-Before writing it, ask the user for real material: screenshots of the product, the real numbers, the logo and the exact product name, and use what they give you (no third-party brand marks). Act each claim out in a small product surface instead of stating it (`reference/kit.md`, "Act the product out"), and choose which claims are highlighted and which are merely mentioned: at most three highlighted in 30 seconds. Prefer 15 to 40 seconds and state the length in the plan's first scene's notes, with the film's one accent colour and a plan of dark and light grounds scene by scene. A film with a narrator-less launch shape also follows `reference/launch-film.md`, section "Structure and briefing".
+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`:
 
@@ -70,7 +78,7 @@ 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.
@@ -82,10 +90,10 @@ Write `plan.json`:
 
 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` (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. 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:
@@ -95,27 +103,29 @@ Each result starts with a match percentage: how likely it is good enough to reus
 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`, `reference/beat-sync.md` and, for a narrated film, `reference/voice-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 one hero moment with real depth (extruded type, a screen floating in space, a ring of cards), read `reference/three-d.md`; everything else stays 2D.
+- 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"]`.
 
-Self-review loop after the first `reelkit preview`, on `out/preview/sheet.jpg`: no text smaller than about 28 px at 1080 wide, every claim has a visible demonstration, the grounds alternate as the plan said, and the hero object is present in every scene it should be; fix and preview again, at most two rounds. 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. `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 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
@@ -125,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,12 +12,12 @@ 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
 
@@ -119,4 +119,4 @@ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
 ```
 
-The 3D layer also depends on `three` (MIT), `@react-three/fiber` (MIT) and `@remotion/three` (Remotion's own licence, the same as `remotion`).
+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

@@ -4,4 +4,4 @@ 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
 
-Ask for the product's screens and logo first.
+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/backgrounds.md

@@ -38,7 +38,7 @@ Tint the ground with the film's one accent colour (`tint={palette.hero}`), so th
 
 ```tsx
 import React from "react";
-import { AbsoluteFill } from "remotion";
+import { AbsoluteFill } from "reelkit/frame";
 import { BgImage, BgSequence, BgVideo, SceneFrame, bgPerScene, palettes } from "reelkit/kit";
 import type { VideoProps } from "reelkit/kit";
 

package/skill/reference/brand-motion.md

@@ -0,0 +1,62 @@
+---
+name: brand-motion
+description: Choose branded transformations and 3D reveals by what the shot communicates, then pair their landing frames with sound.
+---
+
+# Brand motion: what changes, when, and why
+
+Use the user's actual name, logo, colours and product material. A branded transition should connect two ideas: a mark becomes the product surface, a product turns toward the viewer, or separate parts resolve into one name. Write that connection in the scene's notes before choosing the effect. Keep the settled identity readable; an effect is the journey, not the brand.
+
+## Choose the move by its purpose
+
+| What the viewer needs to understand | Use | Why it fits | Sound |
+|---|---|---|---|
+| Recognise a product or wordmark as it faces them | `BrandTransform3D mode="turn"` | A restrained turn exposes the front, then stops | Soft sweep into one lock hit |
+| Follow the same object from one position or idea to another | `mode="arc"`, or `Carry` / `Screen3D` across scenes | The curved arrival preserves the object as the visual thread | A short sweep, with a landing only if the new state matters |
+| Feel the step from setup into the launch or payoff | `mode="launch"` | An object approaches from depth and settles at its final size | A rising sweep into an impact; duck the music around the hit |
+| See parts becoming a whole | `Assemble3D` | Construction explains the relationship, rather than hiding it in a cut | Sparse build ticks and one lock at `assembleEnd` |
+| Read a detailed screen, a sentence or a Hebrew wordmark | A 2D image or text with `Entrance` / `Carry` | Detail remains sharp and faces the viewer | Usually a small tap or silence |
+| Notice a factual before/after or a new chapter | A clear cut or `SceneFrame` transition | Separation makes the change easier to compare | `cuesOnChanges`, or silence for a deliberate break |
+
+Choose 3D when depth explains the product, reveals its shape, or makes the requested brand moment distinctive. A flat change is often better for reading, comparison and rapid instructions. More 3D shots are appropriate when the user requests a brand film or showreel; give them different jobs instead of repeating the same spin.
+
+## Keep the identity intact
+
+- Use the supplied logo image without stretching, recolouring or replacing it with a guessed text logo. `Card3D src={urls[key]}` can carry the image in space; match its card proportions to the asset, and end with the actual mark facing the viewer. A flat `Img` is the best closing hold when the card frame would distract.
+- `Text3D` and `Hero3D kind="logo"` are Latin word treatments, not faithful reconstructions of a supplied logo. Use them for a requested word treatment, and keep Hebrew or other unsupported scripts in 2D.
+- Choose the light mood and surface finish from the agreed look: studio for a clear product, night for restrained premium depth, neon for an explicit tech look. Keep the brand palette across all shots.
+- Finish the move before the reading hold. Budget the move plus about 1.5 seconds for a short name; longer copy needs longer. If that cannot fit, shorten the move, simplify the copy or choose 2D.
+- Avoid moving the camera and object in opposite directions at once. Start with a fixed camera; add a small push only when it improves the shot.
+
+## A move and its sounds use one clock
+
+`BrandTransform3D` goes **inside** `Scene3D`. It transforms its children and ends in a neutral pose; it does not generate sound or invent a logo. `brandTransformFrames` returns the same local `start` and `settle` used by the component. `cuesFor([start, settle], "transform")` places a sweep before the landing and a lock on it. Add the scene's `startFrame` exactly once when the cues are rendered outside that scene.
+
+```tsx
+import { BrandTransform3D, Scene3D, SceneFrame, SoundCues, Text3D, brandTransformFrames, cuesFor } from "reelkit/kit";
+
+const timing = { from: 6, frames: 32 };
+const event = brandTransformFrames(timing);
+const cues = cuesFor([event.start, event.settle], "transform", {
+  offset: s.startFrame, voice: true, sweepFrames: 10,
+});
+
+// These elements sit beside each other on the video's timeline.
+<SceneFrame from={s.startFrame} durationInFrames={s.durationFrames}>
+  <Scene3D mood="studio">
+    <BrandTransform3D mode="turn" {...timing}>
+      <Text3D text="Reelkit" color={palette.hero} fit={0.72} />
+    </BrandTransform3D>
+  </Scene3D>
+</SceneFrame>
+<SoundCues cues={cues} sounds={{
+  "transform-sweep": urls["assets/lib/<whoosh-id>/clip.mp3"],
+  "transform-lock": urls["assets/lib/<impact-id>/clip.mp3"],
+}} />
+```
+
+Search and pull real sound files first. `sweepFrames` is the time from the file's start to its audible landing: listen to the chosen file and adjust it, instead of assuming every whoosh peaks at ten frames. Use `voice: true` while narration is heard. A build, a transformation and the final resolve are different events; do not stack all their hits on one landing.
+
+## Before changing an existing shot
+
+Identify the observable problem: the logo is unreadable, the result arrives before its spoken word, the movement has no relationship to the next shot, or the sound lands late. Change that problem first. Keep a deliberate cut, an existing brand treatment and the user's chosen look when they already work. Render the start, middle, landing and held state, then listen to the final video. A sound report helps find missed hits; its density targets are guidance, not a reason to add noise to every movement.

package/skill/reference/clips.md

@@ -28,7 +28,7 @@ A clip is a few seconds of generated video. It is the most expensive thing Reelk
 ## B-roll rules
 - The clip shows exactly what the sentence says, at the moment it says it. If the sentence is abstract, the clip is the wrong tool.
 - Never the same clip twice in a video, and no two clip scenes in a row that look alike.
-- Speech never runs more than 3 seconds without something changing on screen: a new clip, a new text beat, a cut to a graphic. A 5-second clip under a 9-second scene needs a text change or a second visual in the middle.
+- Hold a clip while its action or emotion carries the speech. Add another visual when meaning or readability needs it; do not interrupt a useful hold to satisfy a change quota.
 - Text over a clip must stay legible. Use `<ClipLayer src={urls[s.clipKey]} dim={0.25} />` to darken it, keep headlines in the calm part of the picture, and look at the preview frames for contrast on both the early and the late frame.
 
 ## Green screen
@@ -40,7 +40,7 @@ A green-screen clip is a subject filmed on a flat pure green background. It is f
 - Layer it above the scene's background and below the captions:
 
 ```tsx
-import { Img } from "remotion";
+import { Img } from "reelkit/frame";
 import { Captions, KeyedClip, SceneFrame } from "reelkit/kit";
 
 <SceneFrame from={s.startFrame} durationInFrames={s.durationFrames}>
@@ -82,7 +82,7 @@ A keyed clip is what makes real depth possible: things can sit behind the subjec
 - Check both preview frames for a green fringe on the edges and for the subject hiding something that must be read.
 
 ```tsx
-import { AbsoluteFill } from "remotion";
+import { AbsoluteFill } from "reelkit/frame";
 import { BgMesh, Captions, KeyedClip, SceneFrame, fonts } from "reelkit/kit";
 
 <SceneFrame from={s.startFrame} durationInFrames={s.durationFrames}>

package/skill/reference/component-authoring.md

@@ -10,7 +10,7 @@ Run `reelkit assets search "<description>" --kind component`. If a library compo
 
 ## 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.
+- Imports only from `react`, `reelkit/frame` 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.

package/skill/reference/continuity.md

@@ -1,15 +1,15 @@
 ---
 name: continuity
-description: Use before the plan and again when writing the composition - how to keep a video from feeling like a slideshow, with three concepts to offer the user, what to carry across every scene change, how to vary rhythm, and how to read the continuity and rhythm numbers the CLI reports.
+description: Use before the plan and again when writing the composition - how to keep a video from feeling like a slideshow, with concepts chosen from the brief, what to carry across every scene change, how to vary rhythm, and how to read the continuity and rhythm numbers the CLI reports.
 ---
 
 # Continuity and rhythm
 
 A slideshow is a row of separate pictures: each scene replaces the one before it, and every scene lasts about the same time. Two things cure it. Continuity means that at every scene change something on screen survives and visibly moves, grows or turns into the next scene. Rhythm means shot lengths differ a lot, the picture sometimes rests, and not everything moves all the time.
 
-## Three concepts before a plan
+## A concept before a new plan
 
-A concept is one sentence about the picture, not about the product. Before you write `plan.json`, offer the user three concepts that differ in their central idea, and let them pick. For each one say the opening frame, what carries each scene change, and what it rules out.
+A concept is one sentence about the picture, not about the product. Before a new `plan.json`, recommend the strongest concept that fits the brief; offer alternatives if the user wants a comparison. Keep an already chosen concept for revisions. For each one say the opening frame, what carries each scene change, and what it rules out.
 
 Ideas to draw from (invent your own when the topic asks for it):
 
@@ -19,7 +19,7 @@ Ideas to draw from (invent your own when the topic asks for it):
 - **One surface the whole video lives on.** A desk, a phone screen, a page, a map. Everything is placed on it and the camera or the objects move across it. Rules out backgrounds that change per scene.
 - **A before-and-after split.** The frame is divided from the start; the dividing line moves, and what was on one side becomes the other. Rules out stories that have no contrast to show.
 
-Write each concept as: "Opens on a plain card with the price. The card slides up and becomes the header of the comparison; the comparison's winning row grows into the call to action. No stock backgrounds." The user picks; write the choice into the first scene's `notes`, next to the look.
+Write each concept as: "Opens on a plain card with the price. The card slides up and becomes the header of the comparison; the comparison's winning row grows into the call to action. No stock backgrounds." Honor the chosen direction; write it into the first scene's `notes`, next to the look.
 
 ## Carry at every scene change
 
@@ -38,7 +38,7 @@ A hard cut is a choice. Use it for a burst of fast hits, or for the end card, an
 
 ```tsx
 import React from "react";
-import { AbsoluteFill } from "remotion";
+import { AbsoluteFill } from "reelkit/frame";
 import { BgMesh, Carry, Entrance, fonts, palettes, SceneFrame } from "reelkit/kit";
 import type { VideoProps } from "reelkit/kit";