hyperframes 0.5.0-alpha.8 → 0.5.0

package/dist/skills/hyperframes/visual-styles.md

@@ -1,14 +1,14 @@
 # Visual Style Library
 
-Named visual identities for HyperFrames videos. Each style is grounded in a real graphic design tradition. Use them to give your video a specific visual personality, not just generic "clean" or "bold."
+Named visual identities for HyperFrames videos. Each style is grounded in a real graphic design tradition and expressed as a DESIGN.md-compatible token block. Use them as starters — copy the YAML into your project's `design.md` front matter, then customize.
 
 **How to pick:** Match mood first, content second. Ask: _"What should the viewer FEEL?"_
 
-**How to use:** Reference the style in your scene plan. Translate the style's principles into concrete composition decisions — palette choice, font selection, entrance patterns, transition type, ambient motion feel.
+**How to use:** Copy the style's YAML token block into `design.md` front matter. Add `## Overview`, `## Colors`, `## Typography`, `## Elevation`, `## Components`, `## Do's and Don'ts` prose sections to complete the file.
 
 ## Quick Reference
 
-| Style           | Mood                  | Best for                           | Primary shader                    |
+| Style           | Mood                  | Best for                           | Transition shader                 |
 | --------------- | --------------------- | ---------------------------------- | --------------------------------- |
 | Swiss Pulse     | Clinical, precise     | SaaS, data, dev tools, metrics     | Cinematic Zoom or SDF Iris        |
 | Velvet Standard | Premium, timeless     | Luxury, enterprise, keynotes       | Cross-Warp Morph                  |
@@ -25,161 +25,395 @@ Named visual identities for HyperFrames videos. Each style is grounded in a real
 
 **Mood:** Clinical, precise | **Best for:** SaaS dashboards, developer tools, APIs, metrics
 
-- Black (`#1a1a1a`), white, ONE accent — electric blue (`#0066FF`) or amber (`#FFB300`)
-- Helvetica or Inter Bold for headlines, Regular for labels. Numbers large (80–120px)
-- Grid-locked compositions. Every element snaps to an invisible 12-column grid
-- Animated counters count up from 0. Hard cuts, no decorative transitions
-- Transitions: Cinematic Zoom or SDF Iris (precise, geometric)
-
-**GSAP signature:** `expo.out`, `power4.out`. Entries are fast and snap into place. Nothing floats.
-
-```
-Swiss Pulse: Black/white + one electric accent. Grid-locked compositions.
-Numbers dominate the frame at 80-120px. Counter animations from 0.
-Hard cuts or geometric transitions. Nothing decorative.
+```yaml
+name: Swiss Pulse
+colors:
+  primary: "#1a1a1a"
+  on-primary: "#ffffff"
+  accent: "#0066FF"
+typography:
+  headline:
+    fontFamily: Helvetica Neue
+    fontSize: 5rem
+    fontWeight: 700
+  label:
+    fontFamily: Inter
+    fontSize: 0.875rem
+    fontWeight: 400
+  stat:
+    fontFamily: Helvetica Neue
+    fontSize: 7rem
+    fontWeight: 700
+rounded:
+  none: 0px
+  sm: 2px
+spacing:
+  sm: 8px
+  md: 16px
+  lg: 32px
+motion:
+  energy: high
+  easing:
+    entry: "expo.out"
+    exit: "power4.in"
+    ambient: "none"
+  duration:
+    entrance: 0.4
+    hold: 1.5
+    transition: 0.6
+  atmosphere:
+    - grid-lines
+    - registration-marks
+  transition: cinematic-zoom
 ```
 
+Grid-locked compositions. Every element snaps to an invisible 12-column grid. Numbers dominate the frame at 80–120px. Animated counters count up from 0. Hard cuts, no decorative transitions. Nothing floats.
+
 ---
 
 ## 2. Velvet Standard — Massimo Vignelli
 
 **Mood:** Premium, timeless | **Best for:** Luxury products, enterprise software, keynotes, investor decks
 
-- Black, white, ONE rich accent — deep navy (`#1a237e`) or gold (`#c9a84c`)
-- Thin sans-serif, ALL CAPS, wide letter-spacing (`0.15em+`)
-- Generous negative space. Symmetrical, centered, architectural precision
-- Slow, deliberate. Sequential reveals with long holds. No frantic motion
-- Transitions: Cross-Warp Morph (elegant, organic flow between scenes)
-
-**GSAP signature:** `sine.inOut`, `power1`. Nothing snaps — everything glides with intention.
-
-```
-Velvet Standard: Black, white, one rich accent. Thin ALL CAPS type with wide tracking.
-Generous negative space. Sequential reveals, long holds.
-Cross-Warp Morph transitions. Slow and deliberate — luxury takes its time.
+```yaml
+name: Velvet Standard
+colors:
+  primary: "#0a0a0a"
+  on-primary: "#ffffff"
+  accent: "#1a237e"
+typography:
+  headline:
+    fontFamily: Inter
+    fontSize: 3rem
+    fontWeight: 300
+    letterSpacing: 0.15em
+    textTransform: uppercase
+  body:
+    fontFamily: Inter
+    fontSize: 1rem
+    fontWeight: 300
+    lineHeight: 1.6
+rounded:
+  sm: 0px
+  md: 2px
+spacing:
+  sm: 16px
+  md: 32px
+  lg: 64px
+motion:
+  energy: calm
+  easing:
+    entry: "sine.inOut"
+    exit: "power1.in"
+    ambient: "sine.inOut"
+  duration:
+    entrance: 1.2
+    hold: 3.0
+    transition: 1.5
+  atmosphere:
+    - subtle-grain
+    - hairline-rules
+  transition: cross-warp-morph
 ```
 
+Generous negative space. Symmetrical, centered, architectural precision. Thin sans-serif, ALL CAPS, wide letter-spacing. Sequential reveals with long holds. Nothing snaps — everything glides with intention. Luxury takes its time.
+
 ---
 
 ## 3. Deconstructed — Neville Brody
 
 **Mood:** Industrial, raw | **Best for:** Tech news, developer launches, security products, punk-energy reveals
 
-- Dark grey (`#1a1a1a`), rust orange (`#D4501E`), raw white (`#f0f0f0`)
-- Type at angles, overlapping edges, escaping frames. Bold industrial weight
-- Gritty textures: scan-line effects, glitch artifacts baked into the design
-- Text SLAMS and SHATTERS. Letters scramble then snap to final position
-- Transitions: Glitch shader or Whip Pan (breaks the rules, feels aggressive)
-
-**GSAP signature:** `back.out(2.5)`, `steps(8)`, `elastic.out(1.2, 0.4)`. Intentional irregularity.
-
-```
-Deconstructed: Dark grey #1a1a1a + rust orange #D4501E. Type at angles, escaping frames.
-Scan-line glitch overlays. Text SLAMS and scrambles into place.
-Glitch shader transitions. Industrial and raw — nothing should feel polished.
+```yaml
+name: Deconstructed
+colors:
+  primary: "#1a1a1a"
+  on-primary: "#f0f0f0"
+  accent: "#D4501E"
+typography:
+  headline:
+    fontFamily: Space Grotesk
+    fontSize: 4rem
+    fontWeight: 700
+  label:
+    fontFamily: Space Mono
+    fontSize: 0.75rem
+    fontWeight: 700
+    textTransform: uppercase
+rounded:
+  none: 0px
+spacing:
+  sm: 4px
+  md: 12px
+  lg: 24px
+motion:
+  energy: high
+  easing:
+    entry: "back.out(2.5)"
+    exit: "steps(8)"
+    ambient: "elastic.out(1.2, 0.4)"
+  duration:
+    entrance: 0.3
+    hold: 1.0
+    transition: 0.5
+  atmosphere:
+    - scan-lines
+    - glitch-artifacts
+    - grain-overlay
+  transition: glitch
 ```
 
+Type at angles, overlapping edges, escaping frames. Bold industrial weight. Gritty textures: scan-line effects, glitch artifacts baked into design. Text SLAMS and SHATTERS. Letters scramble then snap to final position. Intentional irregularity — nothing should feel polished.
+
 ---
 
 ## 4. Maximalist Type — Paula Scher
 
 **Mood:** Loud, kinetic | **Best for:** Big product launches, milestone announcements, high-energy hype videos
 
-- Bold saturated: red (`#E63946`), yellow (`#FFD60A`), black, white — maximum contrast
-- Text IS the visual. Overlapping type layers at different scales and angles, filling 50–80% of frame
-- Everything is kinetic: slamming, sliding, scaling. 2–3 second rapid-fire scenes
-- Text layered OVER footage — never empty backgrounds
-- Transitions: Ridged Burn (explosive, dramatic, impossible to ignore)
-
-**GSAP signature:** `expo.out`, `back.out(1.8)`. Fast arrivals, hard stops.
-
-```
-Maximalist Type: Red, yellow, black, white — max contrast. Text IS the visual.
-Overlapping at different scales, 50-80% of frame. Everything in motion.
-Ridged Burn transitions. No static moments — kinetic energy throughout.
+```yaml
+name: Maximalist Type
+colors:
+  primary: "#0a0a0a"
+  on-primary: "#ffffff"
+  accent-red: "#E63946"
+  accent-yellow: "#FFD60A"
+typography:
+  headline:
+    fontFamily: Anton
+    fontSize: 8rem
+    fontWeight: 400
+    textTransform: uppercase
+  subhead:
+    fontFamily: Space Grotesk
+    fontSize: 3rem
+    fontWeight: 700
+rounded:
+  none: 0px
+spacing:
+  sm: 0px
+  md: 8px
+motion:
+  energy: high
+  easing:
+    entry: "expo.out"
+    exit: "back.out(1.8)"
+    ambient: "power3.out"
+  duration:
+    entrance: 0.3
+    hold: 0.8
+    transition: 0.4
+  atmosphere:
+    - type-layers
+    - color-blocks
+  transition: ridged-burn
 ```
 
+Text IS the visual. Overlapping type layers at different scales and angles, filling 50–80% of frame. Bold saturated colors — maximum contrast. Everything kinetic: slamming, sliding, scaling. 2–3 second rapid-fire scenes. No static moments. Fast arrivals, hard stops.
+
 ---
 
 ## 5. Data Drift — Refik Anadol
 
 **Mood:** Futuristic, immersive | **Best for:** AI products, ML platforms, data companies, speculative tech
 
-- Iridescent: deep black (`#0a0a0a`), electric purple (`#7c3aed`), cyan (`#06b6d4`)
-- Thin futuristic sans-serif — floating, weightless, minimal
-- Fluid morphing compositions. Extreme scale shifts (micro → macro)
-- Particles coalesce into numbers. Light traces data paths through the frame
-- Transitions: Gravitational Lens or Domain Warp (otherworldly distortion)
-
-**GSAP signature:** `sine.inOut`, `power2.out`. Smooth, continuous, organic. Nothing hard.
-
-```
-Data Drift: Deep black #0a0a0a with electric purple #7c3aed and cyan #06b6d4.
-Thin futuristic type, minimal text. Particles coalesce into numbers.
-Gravitational Lens or Domain Warp transitions. Fluid, immersive, otherworldly.
+```yaml
+name: Data Drift
+colors:
+  primary: "#0a0a0a"
+  on-primary: "#e0e0e0"
+  accent-purple: "#7c3aed"
+  accent-cyan: "#06b6d4"
+typography:
+  headline:
+    fontFamily: Inter
+    fontSize: 2.5rem
+    fontWeight: 200
+    letterSpacing: 0.05em
+  body:
+    fontFamily: Inter
+    fontSize: 0.875rem
+    fontWeight: 300
+rounded:
+  sm: 4px
+  md: 12px
+  full: 9999px
+spacing:
+  sm: 16px
+  md: 32px
+  lg: 64px
+motion:
+  energy: moderate
+  easing:
+    entry: "sine.inOut"
+    exit: "power2.out"
+    ambient: "sine.inOut"
+  duration:
+    entrance: 1.0
+    hold: 2.5
+    transition: 1.5
+  atmosphere:
+    - particle-field
+    - light-traces
+    - radial-glow
+  transition: gravitational-lens
 ```
 
+Thin futuristic sans-serif — floating, weightless, minimal. Fluid morphing compositions. Extreme scale shifts (micro → macro). Particles coalesce into numbers. Light traces data paths through the frame. Smooth, continuous, organic. Nothing hard.
+
 ---
 
 ## 6. Soft Signal — Stefan Sagmeister
 
 **Mood:** Intimate, warm | **Best for:** Wellness brands, personal stories, lifestyle products, human-centered apps
 
-- Warm amber (`#F5A623`), cream (`#FFF8EC`), dusty rose (`#C4A3A3`), sage green (`#8FAF8C`)
-- Handwritten-style or humanist serif fonts. Personal, lowercase, delicate
-- Close-up framing feel: single element fills the frame. Nothing feels corporate
-- Slow drifts and floats, never snaps. Soft organic motion throughout
-- Transitions: Thermal Distortion (warm, flowing, like heat shimmer)
-
-**GSAP signature:** `sine.inOut`, `power1.inOut`. Everything breathes.
-
-```
-Soft Signal: Warm amber, cream, dusty rose, sage green. Humanist or handwritten type.
-Single elements fill the frame — intimate, never corporate.
-Slow drifts and floats throughout. Thermal Distortion transitions.
-Nothing should feel hurried or polished.
+```yaml
+name: Soft Signal
+colors:
+  primary: "#FFF8EC"
+  on-primary: "#2a2a2a"
+  accent-amber: "#F5A623"
+  accent-rose: "#C4A3A3"
+  accent-sage: "#8FAF8C"
+typography:
+  headline:
+    fontFamily: Playfair Display
+    fontSize: 3rem
+    fontWeight: 400
+    fontStyle: italic
+  body:
+    fontFamily: Inter
+    fontSize: 1rem
+    fontWeight: 300
+    lineHeight: 1.7
+rounded:
+  sm: 8px
+  md: 16px
+  lg: 24px
+  full: 9999px
+spacing:
+  sm: 12px
+  md: 24px
+  lg: 48px
+motion:
+  energy: calm
+  easing:
+    entry: "sine.inOut"
+    exit: "power1.inOut"
+    ambient: "sine.inOut"
+  duration:
+    entrance: 1.0
+    hold: 3.0
+    transition: 1.5
+  atmosphere:
+    - soft-gradient
+    - warm-grain
+  transition: thermal-distortion
 ```
 
+Handwritten-style or humanist serif fonts. Personal, lowercase, delicate. Close-up framing: single element fills the frame. Slow drifts and floats, never snaps. Soft organic motion. Nothing should feel hurried or polished. Intimate, never corporate.
+
 ---
 
 ## 7. Folk Frequency — Eduardo Terrazas
 
 **Mood:** Cultural, vivid | **Best for:** Consumer apps, food platforms, community products, festive launches
 
-- Vivid folk: hot pink (`#FF1493`), cobalt blue (`#0047AB`), sun yellow (`#FFE000`), emerald (`#009B77`)
-- Bold warm rounded type. Pattern and repetition — folk art rhythm and density
-- Layered compositions with rich visual texture. Every frame feels handcrafted
-- Colorful motion: elements bounce, pop, and spin into place with joy
-- Transitions: Swirl Vortex or Ripple Waves (hypnotic, celebratory)
-
-**GSAP signature:** `back.out(1.6)`, `elastic.out(1, 0.5)`. Overshoots feel intentional.
-
-```
-Folk Frequency: Hot pink #FF1493, cobalt blue, sun yellow, emerald. Bold rounded type.
-Pattern and repetition throughout. Layered, dense, handcrafted feeling.
-Swirl Vortex or Ripple Waves transitions. Joyful, celebratory energy.
+```yaml
+name: Folk Frequency
+colors:
+  primary: "#ffffff"
+  on-primary: "#1a1a1a"
+  accent-pink: "#FF1493"
+  accent-blue: "#0047AB"
+  accent-yellow: "#FFE000"
+  accent-green: "#009B77"
+typography:
+  headline:
+    fontFamily: Fredoka One
+    fontSize: 4rem
+    fontWeight: 400
+  body:
+    fontFamily: Nunito
+    fontSize: 1rem
+    fontWeight: 600
+rounded:
+  sm: 8px
+  md: 16px
+  lg: 32px
+  full: 9999px
+spacing:
+  sm: 8px
+  md: 16px
+  lg: 32px
+motion:
+  energy: high
+  easing:
+    entry: "back.out(1.6)"
+    exit: "elastic.out(1, 0.5)"
+    ambient: "sine.inOut"
+  duration:
+    entrance: 0.5
+    hold: 1.5
+    transition: 0.8
+  atmosphere:
+    - pattern-tiles
+    - confetti-burst
+    - color-blocks
+  transition: swirl-vortex
 ```
 
+Bold warm rounded type. Pattern and repetition — folk art rhythm and density. Layered compositions with rich visual texture. Every frame feels handcrafted. Colorful motion: elements bounce, pop, spin into place with joy. Overshoots feel intentional. Celebratory energy.
+
 ---
 
 ## 8. Shadow Cut — Hans Hillmann
 
 **Mood:** Dark, cinematic | **Best for:** Security products, dramatic reveals, investigative content, intense launches
 
-- Near-monochrome: deep blacks (`#0a0a0a`), cold greys (`#3a3a3a`), stark white + blood red (`#C1121F`) or toxic green (`#39FF14`)
-- Sharp angular text like film noir title cards. Heavy contrast, no softness
-- Heavy shadow — elements emerge from darkness. Reveal is the narrative
-- Slow creeping push-ins, dramatic scale reveals, silence before the hit
-- Transitions: Domain Warp (dissolves reality itself before revealing the next scene)
-
-**GSAP signature:** `power4.in` for exits, `power3.out` for dramatic reveals. The pause before the hit matters.
-
-```
-Shadow Cut: Deep blacks #0a0a0a, cold greys, stark white + one accent (blood red or toxic green).
-Sharp angular type, film noir aesthetic. Elements emerge from darkness.
-Slow creeping push-ins. Domain Warp transitions. The reveal IS the story.
+```yaml
+name: Shadow Cut
+colors:
+  primary: "#0a0a0a"
+  on-primary: "#f0f0f0"
+  surface: "#3a3a3a"
+  accent: "#C1121F"
+typography:
+  headline:
+    fontFamily: Oswald
+    fontSize: 4rem
+    fontWeight: 700
+    textTransform: uppercase
+  body:
+    fontFamily: Inter
+    fontSize: 0.875rem
+    fontWeight: 400
+rounded:
+  none: 0px
+  sm: 2px
+spacing:
+  sm: 8px
+  md: 16px
+  lg: 48px
+motion:
+  energy: moderate
+  easing:
+    entry: "power3.out"
+    exit: "power4.in"
+    ambient: "sine.inOut"
+  duration:
+    entrance: 0.8
+    hold: 2.5
+    transition: 1.2
+  atmosphere:
+    - deep-shadow
+    - vignette
+    - grain-overlay
+  transition: domain-warp
 ```
 
+Near-monochrome: deep blacks, cold greys, stark white + one blood accent. Sharp angular text like film noir title cards. Heavy contrast, no softness. Elements emerge from darkness — reveal is the narrative. Slow creeping push-ins, dramatic scale reveals. The pause before the hit matters. Domain Warp dissolves reality before the next scene.
+
 ---
 
 ## Mood → Style Guide
@@ -199,13 +433,11 @@ Slow creeping push-ins. Domain Warp transitions. The reveal IS the story.
 
 ## Creating Custom Styles
 
-These 8 styles are examples — not constraints. Create your own by:
+These 8 styles are starters — not constraints. Create your own:
 
 1. **Name it** after a designer, art movement, or cultural reference
-2. **Palette**: 2-3 colors max. Declare explicit hex values
-3. **Typography**: One family, two weights. State the role of each
-4. **Motion rules**: How fast? Snappy or fluid? Overshoot or precision?
-5. **Transition**: Which shader matches the energy?
-6. **What NOT to do**: 2-3 explicit anti-patterns for this style
+2. **Write YAML tokens** — `colors` (2–5 tokens), `typography` (2–3 scales), `rounded`, `spacing`, `motion` (energy + easing + duration + atmosphere + transition)
+3. **Add prose** — one paragraph describing the feel, what to do, what to avoid
+4. **Token references** — use `{colors.accent}`, `{typography.headline}` in component definitions
 
-The pattern: **named style → palette → typography → motion rules → transition → avoids.**
+The pattern: **YAML tokens (what) → prose rationale (why) → components (how they combine).**

package/dist/skills/hyperframes-cli/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: hyperframes-cli
-description: HyperFrames CLI tool — hyperframes init, lint, inspect, preview, render, transcribe, tts, doctor, browser, info, upgrade, compositions, docs, benchmark. Use when scaffolding a project, linting, validating, inspecting visual layout in compositions, previewing in the studio, rendering to video, transcribing audio, generating TTS, or troubleshooting the HyperFrames environment.
+description: HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.
 ---
 
 # HyperFrames CLI
@@ -25,6 +25,7 @@ npx hyperframes init my-video                        # interactive wizard
 npx hyperframes init my-video --example warm-grain   # pick an example
 npx hyperframes init my-video --video clip.mp4        # with video file
 npx hyperframes init my-video --audio track.mp3       # with audio file
+npx hyperframes init my-video --example blank --tailwind # with Tailwind v4 browser runtime
 npx hyperframes init my-video --non-interactive       # skip prompts (CI/agents)
 ```
 
@@ -32,6 +33,8 @@ Templates: `blank`, `warm-grain`, `play-mode`, `swiss-grid`, `vignelli`, `decisi
 
 `init` creates the right file structure, copies media, transcribes audio with Whisper, and installs AI coding skills. Use it instead of creating files by hand.
 
+When using `--tailwind`, invoke the `tailwind` skill before editing classes or theme tokens. The scaffold uses Tailwind v4.2 via the browser runtime, not Studio's Tailwind v3 setup.
+
 ## Linting
 
 ```bash
@@ -98,37 +101,28 @@ npx hyperframes render --format webm                  # transparent WebM
 npx hyperframes render --docker                       # byte-identical
 ```
 
-| Flag           | Options               | Default                    | Notes                       |
-| -------------- | --------------------- | -------------------------- | --------------------------- |
-| `--output`     | path                  | renders/name_timestamp.mp4 | Output path                 |
-| `--fps`        | 24, 30, 60            | 30                         | 60fps doubles render time   |
-| `--quality`    | draft, standard, high | standard                   | draft for iterating         |
-| `--format`     | mp4, webm             | mp4                        | WebM supports transparency  |
-| `--workers`    | 1-8 or auto           | auto                       | Each spawns Chrome          |
-| `--docker`     | flag                  | off                        | Reproducible output         |
-| `--gpu`        | flag                  | off                        | GPU-accelerated encoding    |
-| `--strict`     | flag                  | off                        | Fail on lint errors         |
-| `--strict-all` | flag                  | off                        | Fail on errors AND warnings |
+| Flag                 | Options               | Default                    | Notes                                                              |
+| -------------------- | --------------------- | -------------------------- | ------------------------------------------------------------------ |
+| `--output`           | path                  | renders/name_timestamp.mp4 | Output path                                                        |
+| `--fps`              | 24, 30, 60            | 30                         | 60fps doubles render time                                          |
+| `--quality`          | draft, standard, high | standard                   | draft for iterating                                                |
+| `--format`           | mp4, webm             | mp4                        | WebM supports transparency                                         |
+| `--workers`          | 1-8 or auto           | auto                       | Each spawns Chrome                                                 |
+| `--docker`           | flag                  | off                        | Reproducible output                                                |
+| `--gpu`              | flag                  | off                        | GPU-accelerated encoding                                           |
+| `--strict`           | flag                  | off                        | Fail on lint errors                                                |
+| `--strict-all`       | flag                  | off                        | Fail on errors AND warnings                                        |
+| `--variables`        | JSON object           | —                          | Override variable values declared in `data-composition-variables`  |
+| `--variables-file`   | path                  | —                          | JSON file with variable values (alternative to `--variables`)      |
+| `--strict-variables` | flag                  | off                        | Fail render on undeclared keys or type mismatches in `--variables` |
 
 **Quality guidance:** `draft` while iterating, `standard` for review, `high` for final delivery.
 
-## Transcription
-
-```bash
-npx hyperframes transcribe audio.mp3
-npx hyperframes transcribe video.mp4 --model medium.en --language en
-npx hyperframes transcribe subtitles.srt   # import existing
-npx hyperframes transcribe subtitles.vtt
-npx hyperframes transcribe openai-response.json
-```
+**Parametrized renders:** the composition declares its variables on the `<html>` root with **`data-composition-variables`** — a JSON **array of declarations** (`{id, type, label, default}` per entry) that defines the schema. Scripts inside read the resolved values via `window.__hyperframes.getVariables()`. The CLI **`--variables '{"title":"Q4 Report"}'`** is a JSON **object keyed by id** that overrides those declared defaults for one render; missing keys fall through, so the same composition runs unchanged in dev preview and in production. (Sub-comp hosts can also override per-instance with **`data-variable-values`** — same object shape, scoped to one mount of the sub-composition. See the `hyperframes` skill for the full pattern.)
 
-## Text-to-Speech
+## Asset Preprocessing
 
-```bash
-npx hyperframes tts "Text here" --voice af_nova --output narration.wav
-npx hyperframes tts script.txt --voice bf_emma
-npx hyperframes tts --list  # show all voices
-```
+`npx hyperframes tts`, `transcribe`, and `remove-background` produce assets (narration audio, word-level transcripts, transparent video) that get dropped into a composition. Each downloads its own model on first run. For voice selection, whisper model rules (the `.en`-translates-non-English gotcha), output format choice (VP9 alpha WebM vs ProRes), and the TTS → transcribe → captions chain, invoke the `hyperframes-media` skill.
 
 ## Troubleshooting