reelkit-cli 0.10.0 → 0.10.3

package/skill/hooks/timeline.ts

@@ -0,0 +1,218 @@
+import type { Film } from '../types'
+
+const CLIP_COLORS = ['#2563eb', '#7c3aed', '#db2777', '#ea580c', '#059669', '#0891b2']
+const SVG_LIMIT = 120000
+
+const xml = (text: string): string =>
+  text.replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&apos;' })[c] ?? c)
+
+// Text cut to what fits a width, at about 6 px a character for the 11 px face the timeline uses.
+const fit = (text: string, width: number, per = 6.2): string => {
+  const room = Math.floor(width / per)
+  if (room < 2) return ''
+  return text.length <= room ? text : `${text.slice(0, Math.max(1, room - 1))}…`
+}
+
+export const clock = (seconds: number): string => {
+  const whole = Math.max(0, seconds)
+  return `${Math.floor(whole / 60)}:${(whole % 60).toFixed(1).padStart(4, '0')}`
+}
+
+// A ruler step that leaves room between labels: the smallest of these that gives at most twelve of them.
+const rulerStep = (seconds: number): number => [0.5, 1, 2, 5, 10, 15, 30, 60].find(step => seconds / step <= 12) ?? 120
+
+/**
+ * The film as an editor's timeline, one SVG: a ruler, the scenes as clips with a filmstrip, the on-screen text, the voice with a mark per
+ * spoken word, the music with a tick per beat, and a playhead at the selected scene. `thumbs` maps a scene id to its picture, base64 JPEG.
+ */
+export function timelineSvg(film: Film, selected: number, thumbs: Record<string, string>): string {
+  const W = 760
+  const X0 = 58
+  const TRACK = W - X0 - 10
+  const total = Math.max(1, film.totalFrames)
+  const seconds = total / film.fps
+  const x = (frame: number): number => X0 + (frame / total) * TRACK
+  const xs = (sec: number): number => X0 + (sec / seconds) * TRACK
+  const rows = { ruler: 8, video: 30, text: 92, voice: 118, music: 148 }
+  const H = 180
+
+  const build = (withThumbs: boolean): string => {
+    const out: string[] = []
+    out.push(
+      `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" font-family="-apple-system,Segoe UI,Helvetica,Arial,sans-serif" font-size="11">`,
+      `<rect width="${W}" height="${H}" rx="10" fill="#15161a"/>`,
+    )
+    const defs: string[] = []
+    const body: string[] = []
+
+    // Track names and lanes.
+    for (const [label, y, h] of [
+      ['Video', rows.video, 56],
+      ['Text', rows.text, 20],
+      ['Voice', rows.voice, 24],
+      ['Music', rows.music, 20],
+    ] as const) {
+      body.push(
+        `<text x="10" y="${y + h / 2 + 4}" fill="#8b8d98">${label}</text>`,
+        `<rect x="${X0}" y="${y}" width="${TRACK}" height="${h}" rx="4" fill="#1e2026"/>`,
+      )
+    }
+
+    // Ruler.
+    const step = rulerStep(seconds)
+    for (let t = 0; t <= seconds + 0.001; t += step) {
+      const at = xs(t).toFixed(1)
+      body.push(
+        `<line x1="${at}" y1="${rows.ruler + 12}" x2="${at}" y2="${rows.ruler + 18}" stroke="#4b4d57"/>`,
+        `<text x="${at}" y="${rows.ruler + 9}" fill="#8b8d98" font-size="10" text-anchor="${t === 0 ? 'start' : 'middle'}">${clock(t)}</text>`,
+      )
+    }
+
+    film.scenes.forEach((scene, i) => {
+      const left = x(scene.start) + 1
+      const width = Math.max(3, x(scene.start + scene.frames) - x(scene.start) - 2)
+      const color = CLIP_COLORS[i % CLIP_COLORS.length]
+      const isPicked = i === selected
+      const picture = withThumbs ? thumbs[scene.id] : undefined
+
+      // Video clip, with its picture repeated along it as a filmstrip.
+      defs.push(`<clipPath id="c${i}"><rect x="${left.toFixed(1)}" y="${rows.video}" width="${width.toFixed(1)}" height="56" rx="5"/></clipPath>`)
+      body.push(`<rect x="${left.toFixed(1)}" y="${rows.video}" width="${width.toFixed(1)}" height="56" rx="5" fill="${color}" opacity="0.9"/>`)
+      if (picture) {
+        const [aw, ah] = film.aspect.split(':').map(Number)
+        const tile = Math.max(18, Math.round((56 * (aw || 9)) / (ah || 16)))
+        defs.push(
+          `<image id="t${i}" width="${tile}" height="56" preserveAspectRatio="xMidYMid slice" xlink:href="data:image/jpeg;base64,${picture}"/>`,
+        )
+        const copies = Math.min(24, Math.ceil(width / tile))
+        const strip = Array.from({ length: copies }, (_, n) => `<use xlink:href="#t${i}" x="${(left + n * tile).toFixed(1)}" y="${rows.video}"/>`)
+        body.push(`<g clip-path="url(#c${i})">${strip.join('')}</g>`)
+      }
+      body.push(
+        `<g clip-path="url(#c${i})"><rect x="${left.toFixed(1)}" y="${rows.video + 40}" width="${width.toFixed(1)}" height="16" fill="#000" opacity="0.55"/>` +
+          `<text x="${(left + 5).toFixed(1)}" y="${rows.video + 52}" fill="#fff" font-weight="600">${xml(fit(`${i + 1} ${scene.id}`, width - 8))}</text></g>`,
+      )
+      if (isPicked) {
+        body.push(
+          `<rect x="${left.toFixed(1)}" y="${rows.video}" width="${width.toFixed(1)}" height="56" rx="5" fill="none" stroke="#fff" stroke-width="2"/>`,
+        )
+      }
+
+      // On-screen text.
+      const first = scene.text[0]
+      if (first) {
+        body.push(
+          `<rect x="${left.toFixed(1)}" y="${rows.text}" width="${width.toFixed(1)}" height="20" rx="4" fill="#3b2a66"/>`,
+          `<text x="${(left + 5).toFixed(1)}" y="${rows.text + 14}" fill="#d6c9ff">${xml(fit(first, width - 8))}</text>`,
+        )
+      }
+
+      // Voice: a block for the scene's narration and a mark at each word, drawn as a rough waveform.
+      if (scene.narration) {
+        body.push(`<rect x="${left.toFixed(1)}" y="${rows.voice}" width="${width.toFixed(1)}" height="24" rx="4" fill="#0f3d3a"/>`)
+        const marks = scene.words.map((sec, n) => {
+          const at = xs(scene.start / film.fps + sec)
+          const tall = 6 + ((n * 7 + i * 3) % 5) * 3
+          return `<rect x="${at.toFixed(1)}" y="${(rows.voice + 12 - tall / 2).toFixed(1)}" width="2" height="${tall}" rx="1" fill="#2dd4bf"/>`
+        })
+        body.push(marks.join(''))
+      }
+    })
+
+    // Music: the track for as long as it lasts, and its beats.
+    if (film.music) {
+      const length = film.music.seconds > 0 ? Math.min(film.music.seconds, seconds) : seconds
+      const end = xs(length)
+      body.push(
+        `<rect x="${X0}" y="${rows.music}" width="${(end - X0).toFixed(1)}" height="20" rx="4" fill="#1e2a5a"/>`,
+        `<text x="${X0 + 6}" y="${rows.music + 14}" fill="#aeb8ff">${xml(fit(`♪ ${film.music.title}${film.music.bpm ? ` · ${Math.round(film.music.bpm)} BPM` : ''}`, end - X0 - 10))}</text>`,
+      )
+      const every = film.music.beats.length > 160 ? 2 : 1
+      const ticks = film.music.beats
+        .filter((sec, n) => n % every === 0 && sec <= length)
+        .map(sec => `<line x1="${xs(sec).toFixed(1)}" y1="${rows.music + 15}" x2="${xs(sec).toFixed(1)}" y2="${rows.music + 20}" stroke="#7c8cff"/>`)
+      body.push(ticks.join(''))
+    }
+
+    // Playhead at the start of the selected scene.
+    const picked = film.scenes[selected]
+    if (picked) {
+      const at = x(picked.start).toFixed(1)
+      body.push(
+        `<line x1="${at}" y1="${rows.ruler + 12}" x2="${at}" y2="${H - 8}" stroke="#fff" stroke-width="1.5"/>`,
+        `<path d="M${at} ${rows.ruler + 20} l-5 -8 h10 z" fill="#fff"/>`,
+      )
+    }
+
+    out.push(`<defs>${defs.join('')}</defs>`, body.join(''), '</svg>')
+    return out.join('')
+  }
+
+  const rich = build(true)
+  return rich.length <= SVG_LIMIT ? rich : build(false)
+}
+
+export type Cell = { text: string; tone: 'clip' | 'clipAlt' | 'picked' | 'text' | 'voice' | 'music' | 'empty' }
+export type Lane = { label: string; cells: Cell[] }
+
+// One lane of the terminal's timeline: a run of cells per scene, each run as wide as the scene is long.
+const pad = (text: string, width: number): string => {
+  const cut = text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…`.slice(0, width) : text
+  return cut.padEnd(width, ' ')
+}
+
+/**
+ * The same timeline in character cells, for the terminal: a ruler and one lane each for the scenes, the text, the voice and the music.
+ * `columns` is the room for the lanes themselves, the label column apart.
+ */
+export function timelineLanes(film: Film, selected: number, columns: number): { ruler: string; lanes: Lane[] } {
+  const total = Math.max(1, film.totalFrames)
+  const seconds = total / film.fps
+  const width = Math.max(20, columns)
+  const edge = (frame: number): number => Math.round((frame / total) * width)
+  const spans = film.scenes.map(scene => {
+    const from = edge(scene.start)
+    return { from, size: Math.max(1, edge(scene.start + scene.frames) - from) }
+  })
+  const lane = (label: string, cell: (index: number, size: number) => Cell): Lane => ({
+    label,
+    cells: spans.map((span, index) => cell(index, span.size)),
+  })
+
+  const step = rulerStep(seconds)
+  let ruler = ''
+  for (let t = 0; t <= seconds; t += step) {
+    const at = Math.round((t / seconds) * width)
+    if (at < ruler.length) continue
+    ruler = ruler.padEnd(at, ' ') + clock(t)
+  }
+
+  const beats = film.music?.beats ?? []
+  const musicCells = Array.from({ length: width }, (_, column) => {
+    const from = (column / width) * seconds
+    const to = ((column + 1) / width) * seconds
+    return beats.some(sec => sec >= from && sec < to) ? '╵' : '─'
+  }).join('')
+
+  return {
+    ruler: ruler.slice(0, width),
+    lanes: [
+      lane('Video', (i, size) => ({
+        text: pad(`${i + 1} ${film.scenes[i]?.id ?? ''}`, size),
+        tone: i === selected ? 'picked' : i % 2 ? 'clipAlt' : 'clip',
+      })),
+      lane('Text', (i, size) => ({ text: pad(film.scenes[i]?.text[0] ?? '', size), tone: film.scenes[i]?.text[0] ? 'text' : 'empty' })),
+      lane('Voice', (i, size) => {
+        const scene = film.scenes[i]
+        const marks = Array.from({ length: size }, (_, column) => {
+          if (!scene?.narration) return ' '
+          const from = (column / size) * (scene.frames / film.fps)
+          const to = ((column + 1) / size) * (scene.frames / film.fps)
+          return scene.words.some(sec => sec >= from && sec < to) ? '▮' : '·'
+        }).join('')
+        return { text: marks, tone: scene?.narration ? 'voice' : 'empty' }
+      }),
+      { label: 'Music', cells: [{ text: film.music ? musicCells : ' '.repeat(width), tone: film.music ? 'music' : 'empty' }] },
+    ],
+  }
+}

package/skill/reference/art-styles.md

@@ -9,14 +9,14 @@ These looks continue the catalogue in `reference/styles.md` (they are numbered 1
 
 ## 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.
+- Declare the chosen visual system in the first scene's `notes` and one palette at the top of `Video.tsx`. A mixed-media film may change its material by meaning while carrying a consistent type, accent or object. Color hierarchy matters more than a fixed number of accented elements.
+- Use the signature features that make the chosen treatment recognizable and serve this shot. Write those choices into its notes; `reelkit plan check` cannot judge visual style. Use `reference/style-recipes.md` for the matching action, sound and proof, and `reference/style-components.md` for available components.
 - 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.
+- Reelkit currently runs at 30 fps; use the manifest clock rather than assuming a reference film's fps. "On twos" holds each drawing for two frames: `const f = Math.floor(frame / 2) * 2`; "on threes" uses 3. Use that clock for drawing changes, while semantic landings and sound still follow their real event frames. A stepped look (cel, collage, pixel) can hold still between samples.
 - 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.
+- Inspect style-specific evidence: readable silhouette and type, correct pivots or projection, purposeful material, stable edges, reproducible sampled motion and sound on the intended event. Fix the largest observed defect and verify the final export with `reference/delivery-review.md`; a subjective quality score is not verification.
 
 ## The catalogue, continued
 
@@ -30,7 +30,7 @@ These looks continue the catalogue in `reference/styles.md` (they are numbered 1
 **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.
+**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: `Scene3D camera={{ keys, lead }}` with a suitable 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.
@@ -67,4 +67,4 @@ These looks continue the catalogue in `reference/styles.md` (they are numbered 1
 
 ## 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.
+Use the named card when the user chooses a style or reference. Otherwise recommend the fitting treatment; offer a numbered comparison only when requested. A product film may combine a real screen with a drawn world when that serves the message. Preserve the supplied source and make any illustration clear. The cards are craft references, not a requirement to reproduce every feature of their example films.

package/skill/reference/component-authoring.md

@@ -8,6 +8,8 @@ description: Use when writing a new reusable component file for a video's src/ f
 ## First, do not write one
 Run `reelkit assets search "<description>" --kind component`. If a library component does the job with different props, `reelkit assets pull <id>` it (it lands in `src/`) and use it. Write a new component only when nothing fits.
 
+Use `reference/style-components.md` to choose the role and `reference/style-recipes.md` for the shot's motion and proof. A catalog name does not mean a built-in kit export or a currently published asset; search, pull and inspect the actual source first.
+
 ## Rules for a component file
 - One component per file. File `NumberBadge.tsx` exports `export const NumberBadge: React.FC<NumberBadgeProps>`.
 - Imports only from `react`, `reelkit/frame` and `reelkit/kit`. A component never imports another component file.

package/skill/reference/higgsfield-production.md

@@ -0,0 +1,70 @@
+---
+name: higgsfield-production
+description: Choose optional Higgsfield cutout, Blender, hosted 3D or native motion workflows and hand their inspected output to a Reelkit composition.
+---
+
+# External media and motion production
+
+Read this when a shot needs a clean cutout, an editable product model, custom lighting, character rigging or compositing beyond the Reelkit kit. Use the smallest workflow that serves the shot. A skill teaches a workflow; loading one does not establish an editor connection or add a CLI capability.
+
+## Choose by the deliverable
+
+| Need | Candidate | What comes back |
+|---|---|---|
+| Put a supplied product photo over graphics | Higgsfield Background Remover | A transparent PNG; inspect the edges and original identity |
+| Put a moving subject over graphics | Reelkit green key or video cutout, `reference/clips.md` | A keyed WebM; check the matte over time |
+| Show how a product comes apart and assembles | Higgsfield `/exploded-view` in local Blender | Editable parts, camera and animation; requires the local Blender connection |
+| Establish a stylized 3D look | `/cartoon-shaders` in local Blender | Editable materials; verify them from the delivery camera |
+| Build a new set, prop layout or camera blockout | Hosted `/3d-jutsu` | A separate revisioned scene with render, `.blend` and GLB export paths |
+| Compose supplied footage into a VFX shot | `/shot-composer` in local After Effects | An editable AE project; requires the AE connection |
+| Coordinate editable logo, type and graphic motion | `/motion-bundle`, `/logo-animation`, `/kinetic-typography` | Local After Effects workflows; resolve the selected command's current instructions |
+| Author native Higgsedit motion | Installed `motion-craft` and `video-editing` skills | Native composition tracks and keyframes, rather than Reelkit TSX |
+
+Higgsfield's connected preset-instructions lookup resolves these commands without running them. Read the exact selected workflow and its required references before editing. Check available tools and runtime versions; a web feature, command listing or model recommendation is not evidence that its tool is connected. Background Remover exists on the website, but this research did not find a dedicated Higgsfield background-removal tool in the current connector. Preserve that distinction when reporting availability.
+
+## Three different Blender connections
+
+- **Local background MCP:** `/use-blender` starts its own Blender session. It can open saved local `.blend` files; it does not attach to unsaved work in an open window. Verify with the workflow's health and scene-summary tools, render appearance checks, and explicitly save the source.
+- **Desktop add-on and Bridge:** the official add-on operates in the open scene and provides scene building, 3D models, character animation, image/video and camera tools. Its published requirement is Blender 5.1 or later. Check the current requirement before setup. The separate Bridge connects an agent to this add-on.
+- **Hosted 3D Jutsu:** no local installation; edits use service-side Blender Python. The current instructions allow curated asset imports, not arbitrary user model or texture files. Recheck those restrictions before selecting it for a supplied product. A local project cannot silently become a hosted one.
+
+An account connection, editor installation and generated asset are separate steps. Use existing authorization and working connections. A documentation search does not authorize a new editor setup or a paid generation.
+
+## Cutout quality
+
+Keep the original alongside the processed output. A transparent PNG proves image isolation, not video matting or recovered hidden geometry. Inspect hair, fingers, handles, thin straps, glass, holes and the product outline against light and dark backgrounds at delivery scale. Check brand lettering against the source. Add a contact shadow and agree on light direction when placing the subject in a new setting.
+
+For a moving subject inspect opening, fastest motion, overlap, landing and ending for edge shimmer, missing parts and spill. Verify transparency in the actual Reelkit preview; an ordinary H.264 MP4 does not carry an alpha channel. Follow `reference/clips.md` for the supported keyed-media path. Do not promise a lossless subject merely because a provider advertises pixel-perfect removal.
+
+## Editable 3D and handoff
+
+Start from the delivery camera, subject silhouette, real dimensions and a simple motivated light rig. Keep named parts and materials editable. For assembly, move semantic parts along plausible paths and verify contact, intersections, camera clearance and the final assembled pose. For materials, inspect roughness, highlight continuity and silhouette under the actual shot lighting before adding surface detail.
+
+Hosted 3D has bounded execution time: keyframe first, prove critical states with low-cost stills, then render the requested motion. A generated video from one scene render is a new AI interpretation; it is not proof of the keyed Blender animation. Preserve exact geometry, logos and mechanics through an authored render when those are the point.
+
+Retain `.blend` or `.aep` as editable source. GLB may omit procedural materials and lighting. Reelkit's composition allowlist does not provide a general GLB or Lottie loader: use supported local image/video output, or explicitly implement and validate a new kit capability. Check dimensions, fps, duration, alpha, color and source audio before ingesting the inspected file as a user asset. Register it with a truthful description; choose the supported image, clip or footage layer and use `urls[path]` inside the composition.
+
+## Additional motion skills
+
+Prefer the official HyperFrames domain skills as sources:
+
+- `hyperframes-animation`: choreography, transitions, runtime adapters and scene recipes.
+- `hyperframes-keyframes`: visible poses, subject continuity, masks, camera moves and motion diagnostics.
+- `hyperframes-creative`: brand tokens, typography, visual hierarchy and beat planning.
+- `hyperframes-audio`: mixing placed tracks, envelopes and speech/music relationships.
+- `media-use`: sourcing, reuse and media operations, with provider-specific setup.
+
+Their native authoring surface is HTML with registered seekable runtimes. This Reelkit version uses the adapter described in `reference/hyperframes-composition.md`: translate applicable craft into frame-driven kit code rather than pasting GSAP, shader, bus or media attributes into `Video.tsx`. Preserve the pinned engine and import allowlist. Installing every external workflow would not make its APIs available in Reelkit.
+
+Review rest, peak, landing, readable hold and final frames. Keep one subject continuous when it moves between layouts; use a dissolve for replacement. Make the visual landing and sound cue share one event frame. Test a direct seek to important states and the loop seam when relevant; inspect rendered pixels, not only numeric keyframes. For source speech, derive music ducking from the actual speech spans, as explained in `reference/studio-editing.md`.
+
+## Sources and freshness
+
+Reviewed 2026-10-06. Re-resolve runtime-dependent workflows when using them.
+
+- [Higgsfield skill hub](https://higgsfield.ai/skills)
+- [Background Remover: supported image input and transparent PNG output](https://higgsfield.ai/apps/image-background-remover)
+- [Blender add-on, version requirements and Bridge](https://higgsfield.ai/plugins/blender)
+- [Official HyperFrames skills](https://github.com/heygen-com/hyperframes/tree/main/skills)
+
+The connected Higgsfield instructions for `/use-blender`, `/exploded-view`, `/cartoon-shaders`, `/shot-composer`, `/motion-bundle` and `/3d-jutsu` supply the editor-specific rules. Keep those live lookups authoritative instead of copying a full manual into this reference.

package/skill/reference/motion-design.md

@@ -5,6 +5,8 @@ description: Use when deciding how a scene looks and moves - layout, typography,
 
 # Motion design guidelines
 
+Use these as starting craft choices, not a universal style. The selected look, source material and user direction decide the treatment; `reference/style-recipes.md` translates all supported style families into action, sound and review evidence. Engine constraints, factual source identity and actual speech timing remain requirements across looks.
+
 ## The user's uploads
 `assets/index.json` lists the user's own files with a description of each. Ask for a logo as an SVG where the user has one: its edges stay sharp at any size, while a PNG softens when scaled up. Show each one only in the scenes whose userAssetKeys include it, sized and framed for what it is: a logo small and clean on a plain area; a screenshot framed in a device or browser mockup (search the library with `reelkit assets search "phone mockup" --kind component`, then `reelkit assets pull <id>`, which puts it in `src/`; if none fits, build a simple rounded framed card); a product photo large, with KenBurnsImage or a rounded card. Never stretch a logo, never crop a screenshot's important part, and never invent a screen when a real one was supplied.
 
@@ -33,13 +35,13 @@ description: Use when deciding how a scene looks and moves - layout, typography,
 
 ## Motion
 - **Match the motion to the material.** Springs suit responsive UI and weighty arrivals; restrained eased motion suits calm or premium shots. Bounce, squash and overshoot suit playful scenes when deliberate. Useful spring starting points (stiffness / damping): snappy UI 320 / 30, containers 170 / 26, heavy type and logos 120 / 24.
-- A big move gets a small anticipation first: a few frames of pull the other way.
+- Use anticipation when it clarifies the move's direction or physical weight; a UI state change can respond immediately.
 - Exits are faster than entrances. An entrance takes about 0.1 to 0.25 seconds.
 - Linear motion suits steady scrolls or continuous travel; entrances and stops need an intentional easing or spring unless the chosen effect is a hard cut.
 - **The camera is a group.** Put the whole scene inside one wrapper and move that: a slow push of 2 to 4 percent across a shot, on a softer spring than the content. Never scale text up by enlarging a container that holds it as an image; set the size so it stays sharp.
 - **Choose the clock.** Use spoken triggers for narrated meaning and music beats for rhythmic decoration. Do not invent an event to fill every grid step.
 - Stage attention. Stagger a list when each item matters; move related objects together when their shared action explains the idea.
-- **Pace to speech.** One visible change per spoken beat, roughly every 0.4 to 1.2 seconds. Use the word timings in `s.words` to bring an element in on the frame its word starts, never before.
+- **Pace to speech.** Use actual word events for the ideas they name. `wordFrame` gives the word onset and `onWord` starts an entrance so it lands there; do not treat the entrance start as the semantic landing. A deliberate reading hold can span several spoken beats.
 - Make the premise clear early. Change the picture when attention or meaning needs it; a useful pause, close-up or readable hold is not dead time.
 - **Rhythm is hit, hold, build.** A fast move, then a hold of about half a second where nothing new enters, then the next move. Constant motion reads amateur; contrast reads expensive. During a hold, settled elements keep their slow breathe.
 - A held pose can remain still. Add a slow drift only when it supports the look and keeps text sharp; do not force it onto footage or a reading-heavy shot.
@@ -47,7 +49,7 @@ description: Use when deciding how a scene looks and moves - layout, typography,
 - Counters and progress bars land on the event they explain, such as the spoken result or task completion; leave a readable hold afterward.
 - Text that swaps inside a container that is also changing size needs its own exit and enter timing, or old and new text overlap.
 - **Whatever a scene adds, the scene removes.** Every overlay, label and effect leaves when its moment ends. A leftover from an earlier scene is the most common thing a review finds.
-- **Show exactly what is being said.** Each visual belongs to its own sentence. A picture that fits only roughly is worse than plain type, and the same picture or clip never appears twice.
+- **Show what is being said.** A visual must clarify the current idea. Reuse a supplied object, picture or clip when continuity or comparison needs it; avoid unrelated repetition used to fill time.
 
 ## Legibility over images and footage
 - Text over an image or footage needs help: a dim layer of 0.2 to 0.45 on the media, or a solid plate behind the text, plus a soft shadow.
@@ -90,14 +92,14 @@ Hook (first 1.5 s: the boldest visual and claim) → context (one line, one visu
 A flat field, fade, particles, glow, comic bounce or 3D transformation can be right for the chosen idea. Avoid combining them as generic decoration. Keep identity, hierarchy and readability intact. Placeholder copy, false product results and unrelated logos are defects regardless of style. Consult `reference/styles.md` and `reference/brand-motion.md` for techniques that fit the message.
 
 ## The studio test
-Before showing anything, every answer is yes:
+Review the selected treatment against observable evidence:
 1. There is one clear idea at each moment, and the eye knows where to look.
 2. Motion starts, lands and holds intentionally, with the timing and weight the material needs.
 3. Nothing is frozen longer than the look allows, and nothing shakes without a reason.
 4. Every word reads at phone size, in the right order, uncut and not touching its neighbour.
 5. Every colour comes from the palette that was agreed; no shade crept in on the way.
-6. Nothing from the chosen look's forbidden list is on screen.
-7. It looks like a studio made it, not like a template or a slide deck.
+6. Departures from the treatment's defaults are intentional and preserve the user's direction.
+7. Source identity, factual content and the requested style survive the motion and final hold.
 
 ## Check your own frames
 Preview and fix observable defects; repeat after a real change or unresolved problem. If an approved shot does not fit, make the smallest layout or timing correction and explain it. A substantial change of message or concept needs user direction when it was not already delegated. Use `reference/delivery-review.md` to verify the export.

package/skill/reference/studio-pane.md

@@ -0,0 +1,31 @@
+# The studio pane
+
+The skill folder is also a Claude Code mod: `.claude-plugin/plugin.json` names it, `hooks/hooks.json` names its one hooks module, and Claude Code 2.1.287 or newer loads it from the installed skill folder. Older versions and other agents ignore these files.
+
+## Files
+
+| File | What it holds |
+|---|---|
+| `hooks/register.tsx` | The hooks: the `/reelkit-studio` command, the pane's drawing, the refresh after a `reelkit` command or an edit inside a project. The only file that touches the engine (`$`). |
+| `hooks/project.ts` | Reads a project into one `Film` value: `plan.json`, `manifest.json`, `assets/music.json`, `assets/library.json`, `assets/index.json`, `src/*.tsx`, `out/video.mp4`, `out/preview/`. |
+| `hooks/timeline.ts` | Draws the timeline: one SVG for the desktop app, the editor and mobile; rows of character cells for the terminal. |
+| `hooks/player.ts` | Builds `out/studio.html`, the page **Play with timeline** opens. |
+| `types/index.d.ts` | The state the pane keeps (`tab`, `film`, `projects`, `scene`, `component`, `search`). |
+| `tests/studio.test.ts` | Run with `claude plugin test <skill folder>`. |
+
+## What it reads and writes
+
+- Timings come from `manifest.json`. Before the voice is recorded there is none, so scene lengths are estimated from the plan and the pane marks them `est.`.
+- The filmstrip is cut from `out/preview/NN-<scene>-late.jpg` (or `-early.jpg`) into `out/.studio/<scene>.jpg` with ffmpeg, or `sips` where there is no ffmpeg. No preview frames, no filmstrip: the clips are plain colour.
+- It writes only `out/.studio/` and `out/studio.html`. The plan, the composition and the assets are never written by the pane.
+- The Browser tab runs `reelkit assets search "<query>" --kind <kind> --json` in the project, so it needs the CLI on the PATH and a login, and it counts against the search throttle like any search.
+
+## Limits
+
+- A pane cannot hold a video or a web page. Playback is the browser page; the pane's timeline shows the selected scene, not a moving playhead.
+- Sound effects have no lane: their timing lives in `src/Video.tsx`, not in a file the pane reads. The Music tab lists the ones pulled.
+- Up to 24 scenes, 24 components and 12 projects are shown.
+
+## Changing it
+
+Keep every `$` call in `register.tsx`: the engine does not follow `$` into another file, so `project.ts` takes plain functions (`Host`). Draw one string per `Text`. Branch on `e.surface` to know which elements a surface draws (the terminal has no `Svg`, mobile no `Input` or `Select`). After a change run `claude plugin validate` and `claude plugin test` on the skill folder, and `pnpm test` for the drawing and loader tests.

package/skill/reference/style-components.md

@@ -0,0 +1,40 @@
+---
+name: style-components
+description: Map Reelkit's shared component catalog to shot roles and styles, while distinguishing pulled sibling components from built-in kit exports.
+---
+
+# Choose a component by its job
+
+This inventory covers the 91 shared components in the reviewed repository catalog. It is not a list of built-in kit exports or a promise that every component is published in the current account's library. Search for the role, inspect the returned match, and pull its actual id before use. `reelkit assets pull <id>` prints the import and example and puts the source in `src/`. Read its props and timing implementation before retiming it.
+
+Import a pulled component from its sibling file. Only actual kit exports in `reference/kit.md` come from `reelkit/kit`. Do not import every component into a film or duplicate the entire catalog inside the skill. If the required component is unavailable, use a fitting kit primitive or follow `reference/component-authoring.md` to write a reusable alternative.
+
+| Shot role | Shared components | Styles and checks |
+|---|---|---|
+| Notifications and results | `NotificationBanner`, `AlertDialog`, `StatusToast`, `DynamicIsland`, `HomeWidget`, `DeviceSheet`, `AppInstallCard` | Product walkthrough, AI at work, launch; trigger the actual state after the action and verify held content |
+| Source screens and products | `PhoneMockup`, `BrowserMockup`, `LaptopMockup`, `TiltCard`, `ProductCard`, `AppDock` | Product and premium shots; supply real media, preserve proportions and finish in a readable pose |
+| Interactions and settings | `SearchBar`, `ToggleList`, `CursorClick`, `TouchTap`, `CollabCursors`, `CallOut` | Walkthrough, tutorial, morphing UI; inspect target coordinates, response timing and crop |
+| Assistant and developer work | `PromptBox`, `StreamingAnswer`, `AssistantChatWindow`, `AgentSteps`, `ShimmerSkeleton`, `GlowOrb`, `TerminalWindow`, `CodeWindow`, `IssueBoard`, `ChatThread` | AI/product films; use supplied outputs and preserve request → processing → result order |
+| Steps and time | `StepList`, `Checklist`, `ProgressBars`, `Countdown`, `Timeline` | Tutorials, processes and milestones; align each state to the real instruction or source date |
+| Charts and factual results | `LineChart`, `BarChart`, `AreaChart`, `PieChart`, `RadialChart`, `RadarChart`, `ComposedChart`, `StatCard`, `ComparisonSplit`, `RankingList`, `LiveScoreCard`, `PollCard`, `StarRating` | Numbers, proof and HUD; verify baseline, unit, scale, source values and final state |
+| Offers and feature collections | `PricingCard`, `PriceDrop`, `BentoGrid`, `IconGrid`, `OrbitItems` | Launch, product and spatial lists; supplied price/features/marks, one focal hierarchy and readable hold |
+| Brand and closing action | `LogoReveal`, `BrandSplash`, `AppIconOpen`, `CTAButton` | Logo sting and launch; preserve the actual mark and user-requested action |
+| People and social evidence | `SocialHandle`, `NameLowerThird`, `QuoteCard`, `SocialPost`, `StoryFrame`, `PostFrame`, `ReelOverlay`, `CommentSticker`, `ProfileCard` | People/proof, footage, social native; exact attribution, real counts and face/platform clearance |
+| Reactions and playful material | `EmojiPop`, `EmojiReactions`, `ReactionPills`, `Confetti`, `StickerBadge`, `HandDrawnMark` | Social, notebook, cel and collage; use reactions intentionally, keep them clear of speech and important text |
+| Type and poster motion | `NeonText`, `KineticTitle`, `CinematicTitle`, `Marquee`, `HighlightText`, `TypewriterText`, `ScrambleText`, `BlurReveal`, `GradientText`, `WordRotate`, `GlitchText`, `WaveText`, `OutlineFillText`, `EchoText`, `PunchWords`, `CircleText`, `SpotlightText`, `StrikeReplace` | Headline, cinematic, neon, poster and mixed media; inspect reading order, complete words, RTL and final fit |
+| Audio visual and atmosphere | `Waveform`, `GlowBackdrop` | Assistant, music, aurora and premium shots; distinguish decorative activity from a measured waveform and protect text contrast |
+
+## Kit building blocks
+
+The kit supplies scene framing, timing and reusable geometry around those components:
+
+- `SceneFrame`, `Entrance`, `Carry`, `Camera`: stage the action and carry a subject across shots.
+- `Headline`, `WordReveal`, `Counter`, `CounterRoll`: readable type and numbers. Word timing comes from the actual speech events.
+- `BrowserFrame`, `GlassPanel`, `PromptBox`, `NamedCursor`, `TerminalLog`: built-in UI primitives. The kit's `PromptBox` and a pulled component of the same name are separate APIs; use the source you actually imported.
+- `Scene3D`, `BrandTransform3D`, `Hero3D`, `Screen3D`, `Card3D`, `Orbit3D`, `Text3D`, `Assemble3D`, `Particles3D`, `Warp3D`: frame-driven depth and branded transformations. Custom product geometry, rigs and Blender shaders need an external rendered asset or a separately implemented kit feature.
+- `BgMesh`, `BgAurora`, `BgGrid`, `BgBeams`, `BgGrain`, `BgImage`, `BgVideo`, `BgSequence`: choose a ground that fits the style.
+- `ImageLayers`, `TextOnImage`, `KenBurnsImage`, `ClipLayer`, `KeyedClip`, `FootageLayer`: layer source material without fabricating it.
+- `Voiceover`, `Music`, `Sfx`, `SoundCues`, `Captions`: preserve speech, place sound on the visual event clock and honor the chosen caption mode.
+- `HudOverlay`, `ScreenOverlay`, `Grade`, `Grain`, `Vignette`: use finishing only when it solves a visible problem or belongs to the look.
+
+The detailed props and examples remain in `reference/kit.md` and the pulled source. This role map chooses a candidate; it does not verify the component's behavior in a new composition. Run the normal check and preview, inspect its action and held state, then verify the final export.

package/skill/reference/style-recipes.md

@@ -0,0 +1,86 @@
+---
+name: style-recipes
+description: Apply a chosen Reelkit style through a visible action, appropriate components, a shared sound clock and shot-specific verification. Covers the existing 28 looks and advanced motion treatments.
+---
+
+# Turn the look into a shot
+
+Read the row for the selected look, together with its detailed card in `reference/styles.md` or `reference/art-styles.md`. For advanced external production, read `reference/higgsfield-production.md`. Use `reference/style-components.md` to find an existing component before writing one. These are alternatives and ingredients; a film does not need every style.
+
+Keep the user's brand, exact copy, source identity and approved direction. A company's reference film can inform composition, pacing, material and movement without substituting its logo, interface or claims for the user's. Preserve a real source screen when showing a product. Explain any illustrative reconstruction.
+
+## A compact shot contract
+
+For each substantial new shot, put the following in the scene's notes: what it proves, source asset, focal subject, start/action/landing/hold, implementation route, spoken word or musical event, and sound cue. Describe the final readable pose before the entrance. Reuse the existing plan for a revision; add only the facts needed by that edit.
+
+Declare the visual system once: palette, font roles, stroke and corner treatment, material/texture, light direction and motion weight. A mixed-media film can change materials while carrying a word, shape or accent through the changes. One exact universal spring or effect count cannot define all these styles.
+
+The actual word time or agreed musical event owns meaning. Recipe timings and distances are starting points. Use the scene-local frame for motion, add `startFrame` once for global cues, and account for the chosen sound file's audible peak. Step drawing changes through a quantized clock for cel, collage and pixel work; keep exact semantic landing and SFX events on the real frame clock. Never shift a spoken event simply to fit a drawing step.
+
+## Existing looks: action, sound and proof
+
+The numbers match the two existing catalogs. Use the named library families through search and pull; read the pulled source before setting its props. The kit and shared-library distinction is in `reference/style-components.md`.
+
+| Look | Visible action and implementation | Sound and proof |
+|---|---|---|
+| 1. Product walkthrough | Keep the real screen in a browser/device frame; point, press, show the relevant result | Click on the press; verify target, response and readable control |
+| 2. Numbers that land | Counter or chart resolves from real data; state the baseline and unit | Sparse ticks, optional result hit; check exact final value and scale |
+| 3. Headline hits | Heavy type changes scale, position or width with one clear reading order | Selected impacts; inspect each landing and the full closing line |
+| 4. Cinematic story | Source image/footage carries a motivated pan, close-up or hold | Quiet atmosphere or score; check crop, exposure and emotional pacing |
+| 5. Neon and night | Draw a line or reveal one lit hero against a dark field | Electric swell or small buzz; keep text edges sharp and glow bounded |
+| 6. Notebook | Hand-drawn annotation identifies a source detail; paper stays still | Pencil/friction; check the endpoint and frame-stable drawing variants |
+| 7. Step by step | Step tracker advances as the real instruction is demonstrated | Tap on advancement; check order, spoken triggers and time to read |
+| 8. People and proof | Introduce the speaker or show a sourced quote without altering it | Usually a quiet entrance; verify name, attribution and source wording |
+| 9. Over footage | Overlay one explanatory item while preserving face, action and speech | Preserve source audio; inspect real speech captions and overlay exits |
+| 10. Logo sting | Build toward the supplied mark and finish on that exact asset | Sweep into lock, or silence; compare final proportions and colors |
+| 11. Launch film | A field, screen or product changes role across a few purposeful shots | Music phrasing and event hits; check reveal and final brand hold |
+| 12. Social native | Show the real comment/post and its response in relevant platform framing | UI taps or reaction accents; verify every count and clear platform margins |
+| 13. AI at work | Request, processing, supplied result; show a coherent state sequence | Submit click and result cue; verify causal order and actual product output |
+| 14. Flat vector | Shape rig anticipates, moves and settles with a clear silhouette | Pops or soft cartoon accents; check pivots and the settled proportions |
+| 15. Line art | Path growth connects ideas, then resolves into the intended figure | Pen sound during drawing; check continuity, corners and final path |
+| 16. Isometric | Build a consistent grid, reveal parts, then show its working relationships | Small build ticks; check projection, overlap and depth order |
+| 17. Soft 3D render | A studio-lit hero arrives, settles and exposes its useful surface | Soft thud; inspect contact, highlights and held front-facing content |
+| 18. Hand-drawn cel | Jointed drawings move on stepped samples with deliberate smear and rest | Short cartoon cues; inspect pivots, extreme pose and deterministic boil |
+| 19. Collage cut-out | Cutouts move around physical anchors over a paper composition | Paper/slap accents; inspect alpha edges, overlap and readable type |
+| 20. Liquid | Blobs join, transfer volume and resolve into a stable silhouette | Gloop/splash on contact; inspect necks, midpoint and unfiltered final mark |
+| 21. Shape morph | One subject interpolates compatible shapes through a readable midpoint | Sweep lands with the new form; check knotting and continuous identity |
+| 22. Bauhaus grid | Geometric cells swap, slide or pivot within one strict grid | Dry rhythmic ticks; inspect shared boundaries and aligned stops |
+| 23. Synthwave | Perspective grid, horizon and chrome title establish a retro scene | Synth score and selected crash; check moving grid and stable reading hold |
+| 24. Aurora glass | Layer translucent panels and a restrained light field at distinct depths | Shimmer/tiny ticks; check contrast, banding and background bleed |
+| 25. Variety captions | An expressive reaction lands after the real moment while speech remains readable | Comic accent under speech; verify timing, face clearance and RTL |
+| 26. Sticker explainer | Camera follows isolated subjects, labels and evidence across an information canvas | Light ticks and camera sweeps; check factual scale and label occlusion |
+| 27. Pixel art | Sprites and layers move in whole internal pixels on stepped drawings | Chiptune/8-bit accents; inspect integer scaling and crisp edges |
+| 28. HUD | Frame lines, scan and real status resolve into one lock state | Scan/lock tone; verify actual data, hierarchy and restrained glitches |
+
+## Advanced treatments
+
+These extend the catalog. They may combine with an existing look when they explain the same idea. Read the row's implementation limits before planning its result.
+
+| Treatment | When and how it helps | Sound, proof and limits |
+|---|---|---|
+| 29. Morphing UI | Show one action becoming its response: field → progress → result. Use `Carry`, kit panels and frame-driven state geometry | Click initiates, lock confirms; prove that one subject persists and labels never overlap |
+| 30. Particle word | An abstract network condenses into a requested Latin word. Use `Particles3D` in `Scene3D`, then the supplied flat mark for brand fidelity | Sparse rise and resolve; inspect density and final legibility. Keep unsupported scripts in 2D |
+| 31. Cube world | A wave, assembly or orbit makes quantity or relationships spatial. Use `Assemble3D`, or build a verified kit component for custom motion | Build ticks follow selected events; inspect occlusion and fit. A custom wave or bouncing ball is not an automatic kit feature |
+| 32. Text rings | Organize a short set of values around a focal statement. Search circle text/orbit components; author SVG text paths if the required bend is missing | Soft rotation sweep; inspect reading direction and overlap. Keep essential sentences outside the moving ring |
+| 33. Children's-book cutaway | Explain a mechanism through simple drawings, windows and anchored labels | Drawing/tap cues; inspect part relationships. Use an actual rig or explicit frame-driven geometry for character motion |
+| 34. Blueprint to product | Resolve a sourced technical drawing into its matching physical object. Use an inspected Blender render for exact custom geometry | Pencil draw becomes a mechanical lock; compare dimensions and matching silhouettes. A generic device mockup cannot prove bespoke geometry |
+| 35. Exploded assembly | Explain how real product parts connect. Use `/exploded-view` and the verified local Blender workflow | Selected mechanical ticks and one assembly landing; inspect paths, contact, intersections and final source model |
+| 36. Stylized toon 3D | Keep volume while adopting a drawn lighting/material language. Use `/cartoon-shaders` in Blender and render the authored motion | Material-appropriate accents; check contour, shadow boundaries and lighting across the camera move |
+| 37. Layered poster | Animate a supplied poster through masks, type hierarchy and paper layers. Use kit media/SVG or a verified native editor workflow | Paper slide or restrained reveal; inspect reconstruction against the original and final readable composition |
+| 38. Mixed-media narration | A new visual world explains each change of meaning while one graphic thread persists | Cue semantic handoffs rather than every word; check actual word timing, source truth and consistent hierarchy |
+| 39. Cutout depth shot | A supplied subject overlaps foreground type and a matching background. Use inspected PNG or the supported keyed-video path | Subtle arrival/contact sound; inspect holes, spill, motion edges and light direction. A still cutout does not reconstruct hidden surfaces |
+| 40. Composited VFX shot | Integrate supplied footage with authored layers in the verified `/shot-composer` workflow, then ingest the rendered shot | Respect the source's space and sound; inspect matte, grain, light, perspective and source timing. Connecting AE is a separate requirement |
+
+## Implement without changing engines
+
+Reelkit uses seekable TSX and the import allowlist in `reference/hyperframes-composition.md`. Port choreography into those mechanisms. Native Higgsedit tracks, After Effects projects, Blender rigs and standalone HyperFrames HTML are separate authoring surfaces. Export inspected supported media from an external workflow; do not paste another engine's timeline API into `Video.tsx`.
+
+Use only actual available kit props. For example, `Hero3D` owns `floor="soft"`; camera anticipation uses the camera's `lead`, not a per-key `lead`. A mood establishes kit lighting, not arbitrary Blender materials. Read `reference/kit.md` and the selected component source before promising a shader, simulation or loader.
+
+## Review the style in the final video
+
+Inspect opening, strongest change, landing, readable hold and ending; add boundary samples for morphs, masks and overlaps. Direct-seek to those states to expose accumulated-state bugs. For real depth, inspect an angle where occlusion and perspective are visible. For cutouts, inspect light and dark backgrounds and moving edges. For stepped motion, confirm the drawing cadence without quantizing away semantic or sound events.
+
+Listen to the export for intelligible source speech, chosen music and synchronized cues. Restore the actual brand asset for the final hold. Fix the largest observed failure and recheck that moment. Do not certify a style with a numerical taste score or a static screenshot alone; report checks actually performed using `reference/delivery-review.md`.
+
+This playbook adapts the user's supplied studio-editing reference and the reviewed [Higgsfield workflows](https://higgsfield.ai/skills) and [official HyperFrames skills](https://github.com/heygen-com/hyperframes/tree/main/skills). The original art-style provenance stays in `reference/art-styles.md` and `THIRD_PARTY.md`.