luckiest-co 1.0.19 → 1.0.21

package/skills/luckiest-video-studio/references/logo-recipes.md

@@ -0,0 +1,77 @@
+# Logo recipes
+
+Ten logo reveals built on HyperFrames registry blocks. Each is one `logo` scene in
+`storyboard.json` with `"recipe": "<name>"`. Install a block into the composition
+with `npx hyperframes add <block> --dir composition --no-clipboard`, wire it as the
+scene's sub-composition, and pass the logo through its slot or variables. Load
+`hyperframes-registry` before wiring; it covers slots and variables.
+
+## Inputs
+
+- **Logo file.** SVG first: it keeps paths for draw-on, masks, and morphs. PDF
+  converts to SVG with `pdftocairo -svg`. PNG only works for recipes marked
+  *raster ok*. Copy each logo into `composition/assets/logos/` and list it in the
+  scene's `assets` so a replacement re-renders the scene.
+- **Brand tokens** from [brand.md](brand.md): paper, ink, accent, type.
+- **Name and one-line context** for the caption (client, year, discipline), only
+  when the user gave them.
+
+## Recipes
+
+| Recipe | Block(s) | Look | Needs | Length |
+|---|---|---|---|---|
+| `line-draw` | bundled `templates/logo-line-draw.html` | Every path traces in its own color, fills, holds | SVG | 5-6s |
+| `mask-wipe` | `svg-mask-reveal` | A soft accent sweep reveals the mark through its own shape | SVG | 3-5s |
+| `piece-assembly` | `logo-outro` | Parts fly in and lock together, glow bloom, tagline | SVG with separate groups | 5-7s |
+| `particle-build` | `particle-image-reveal` | Seeded particles converge and settle into the mark | raster ok | 4-6s |
+| `ink-bleed` | `ink-bleed-reveal` | Ink blooms through paper and resolves to a crisp mark | raster ok | 4-6s |
+| `iris` | `iris-reveal` | Circle opens from an origin, previous logo to next | raster ok | 2-3s, transition |
+| `morph-swap` | `morph-swap` | Previous logo condenses and reshapes into the next | raster ok | 2-3s, transition |
+| `facet` | `facet-morph` | Low-poly mass reshapes and lands on a badge silhouette | SVG silhouette | 5-6s |
+| `sting` | `logo-sting` | Wordmark slams to scale, one accent ring, holds still | wordmark text or SVG | 2-3s |
+| `wall` | `logo-wall` | Every logo fades and scales into a grid | raster ok | 4-6s, closer |
+
+For a whole brand film rather than one reveal, use `reel`: a beat-locked 8 to 30 s
+reel built from the bundled `luckiest-video-studio-reel/templates/reel.html`, in
+which the brand motif runs through labeled chapters and lands in the lockup. It
+needs an SVG logo, a brand phrase, and a user-supplied music track. The
+`luckiest-video-studio-reel` sub-skill owns it.
+
+Wordmark-only logos can also use `logo-brand-close` (letter cascade) or
+`stitched-text-draw` (thread stitches) when the font is available.
+
+`line-draw` ships as a template because the registry's `svg-stroke-trace` takes one
+path in a fixed frame. The template traces every path of a real logo, fits the
+viewBox to the artwork, and keeps the mark's own colors. For a single-stroke
+signature, `svg-stroke-trace` is still the better fit.
+
+## Showcase structure
+
+A portfolio reel is not ten different effects in a row. Pick a system:
+
+1. **One reveal, one transition.** The same reveal recipe for every logo, joined
+   by one transition recipe (`iris` or `morph-swap`). Consistent and calm.
+2. **Match the mark.** Line-based marks get `line-draw`, geometric marks `facet`
+   or `mask-wipe`, textured or illustrative marks `ink-bleed` or `particle-build`.
+   Use at most three recipes in one reel.
+3. **Close on `wall`.** All logos together, then the designer's name.
+
+Hold every finished logo still for at least 1.2s before the next move. Keep 12%
+safe margin around the mark. The accent color marks one thing per scene.
+
+## Scene example
+
+```json
+{ "id": "acme", "kind": "logo", "recipe": "line-draw", "duration": 5,
+  "composition": "compositions/acme.html",
+  "assets": ["composition/assets/logos/acme.svg"],
+  "variables": { "logo": "assets/logos/acme.svg", "caption": "Acme, 2025, identity" },
+  "line": "Acme identity" }
+```
+
+## After Effects
+
+With `--ae`, the same scene can be rebuilt in After Effects through the Luckiest
+AE MCP: `importFile` for the SVG or AI file, `trimPaths` for `line-draw`,
+`setLayerMask` for `mask-wipe`, `precompose` per logo, and `render` to a MOV. The
+HyperFrames version stays the reference for timing.

package/skills/luckiest-video-studio/references/openscreen.md

@@ -0,0 +1,60 @@
+# Editing on the OpenScreen timeline
+
+OpenScreen (MIT, `getopenscreen/openscreen`) is the timeline for editing after the
+render: trim, reorder, re-zoom, speed ramps, captions, annotations, and export. This
+skill writes its project file; the user opens it and clicks **Export**.
+
+## Requirements
+
+- OpenScreen **1.13.0** at `/Applications/Openscreen.app`. Install from the GitHub
+  releases page only when the user agrees; the macOS build is signed and notarized.
+- On first launch macOS asks for Screen Recording and Accessibility. Recording
+  needs both; opening and exporting a project does not.
+
+## Write the project
+
+```bash
+node <skill-dir>/scripts/assemble-openscreen.mjs <run-dir>            # into ~/Movies/Openscreen/<slug>/
+node <skill-dir>/scripts/assemble-openscreen.mjs <run-dir> --name acme-launch
+```
+
+It copies media into `~/Movies/Openscreen/<slug>/`, writes
+`<slug>.openscreen` beside it, and leaves the project path in
+`<run-dir>/project.openscreen.txt`.
+
+- Motion and logo scenes go in as their rendered clips.
+- Demo scenes go in as the **raw footage** with in and out points from
+  `sourceStart` and `duration`, so a trim can be widened in the editor. A recorded
+  `<video>.cursor.json` is copied too, so OpenScreen's editable cursor and
+  auto-zoom work.
+- The music bed is not placed on the timeline; it is in `final.mp4`. Add music in
+  OpenScreen from the timeline toolbar if the edit needs it.
+
+## Hand it to the user
+
+Tell them, in this order:
+
+1. Open OpenScreen, **File → Open Project**, choose the path in
+   `project.openscreen.txt`.
+2. Edit on the timeline.
+3. Click **Export** in the top bar, pick MP4 and a resolution.
+
+## Record demo footage
+
+```bash
+/Applications/Openscreen.app/Contents/MacOS/Openscreen record --window "<App name>" --duration 20 --json
+```
+
+Recordings land in OpenScreen's recordings folder with a `.cursor.json` beside
+them. Copy the video (and its cursor file) into `<run-dir>/demo/` and point the demo
+scene's `source` at it. Recording needs a real desktop session; ask before starting
+it, since it captures the screen.
+
+## Known limits of 1.13.0
+
+| Limit | Handling |
+|---|---|
+| Rejects `schemaVersion: 8` | The script writes 7. Version 8 only adds an Auto aspect default. |
+| CLI `export` reads only the legacy single-recording format | Export from the editor's **Export** button. |
+| Approves media only in its recordings folder or the project's own folder | The script copies all media next to the project file. |
+| The project format may change between releases | Test a newer release before raising `SCHEMA_VERSION` in the script. |

package/skills/luckiest-video-studio/references/step-1-inspect.md

@@ -0,0 +1,133 @@
+# Step 1: Inspect the project
+
+Read the project directory to understand what the video is about.
+
+## What to look for
+
+Read these in priority order:
+
+1. **`index.html`** — the primary source. Read the full file. Extract: page title, hero headline, tagline, all section headings, CTA text, testimonial copy, nav items. This is the voice and story of the app.
+
+2. **`styles.css`** or equivalent — extract: primary color palette (look for CSS custom properties / `:root` vars), font families, background colors, accent colors. These become the visual identity of the video.
+
+3. **`README.md`** — if present, extract: project name, one-line description, any listed features.
+
+4. **`package.json`** — if present, extract: `name`, `description`.
+
+5. **Subdirectory files** — if this is a multi-page app, scan route files, component files, or page files. Extract key feature names and screen descriptions.
+
+6. **The user flow / happy path** — scan beyond marketing pages. The video's strongest material is usually the product *in use*, not the product's marketing of itself. Look at:
+   - **Routes** (`app/`, `pages/`, route files) — the screens beyond the landing page.
+   - **Key feature components** — the upload form, the editor, the result view, the dashboard.
+   - **State machines, stores, or step components** — how a session progresses.
+   - **README "how it works" or "usage" sections** — the project's own description of the flow.
+   - **Example or demo folders** — sample inputs and outputs the team tested with.
+
+   Identify the 2–3 beats of *using* the product: **entry → key action → result.**
+
+7. **`public/` or `assets/`** — note any images, logos, icons. These can be referenced in the composition.
+
+## The 9-question rubric
+
+After reading, answer all nine. Write these down before moving to Step 2.
+
+```
+1. What is the app?
+   One sentence. What does it actually do (or claim to do)?
+
+2. What is the funniest or most impressive claim?
+   The one line from the site that earns a reaction.
+
+3. What is the visual hook?
+   The strongest CSS visual: a color palette moment, a UI element, a diagram, a card.
+
+4. What should be shown from the actual UI?
+   Which section of the site has the most video-worthy content?
+   (Hero? Feature section? Testimonial? The UI mockup?)
+
+5. What is the shortest satisfying video?
+   Would 15 seconds work? 20? What's the minimum to land the joke/claim?
+
+6. What tone fits best?
+   If the user specified a preset, use it.
+   If the user gave freeform direction, preserve it and map it to the nearest preset.
+   If the user did not specify, infer both:
+   - Tone preset: one of the known presets
+   - Creative direction: a short custom phrase for this project
+   Examples:
+   - Absurd product → preset: yc-parody; direction: fake startup launch
+   - Earnest product → preset: polished; direction: quiet premium product film
+   - Chaotic product → preset: chaotic; direction: overproduced social ad
+
+7. What should the audio feel like?
+   Decide the audio role and music direction before picking exact SFX files.
+   Bias toward a polished audio layer: include music and tasteful SFX unless
+   the user disabled them, assets are missing, or silence is clearly the
+   strongest creative choice.
+   Examples:
+   - Warm corporate bed; SFX chosen later to match real UI motion
+   - Low music bed with final fade; one dry logo hit if the composition supports it
+   - Dense chaotic music; Hyperframes may align text/card reveals to beats
+   - Cinematic bed with a low swell, restrained motion-matched accents, and subtle audio-reactive glow/presence if it supports the visual style
+
+8. What should the share caption say?
+   Draft one sentence. This becomes share-copy.txt.
+
+9. What's the user flow worth showing?
+   The 2–3 beats a real user goes through: entry → key action → result.
+   Not the landing page's section list — the working app.
+   Examples:
+   - Upload long video → see it processing with progress → see 3 vertical clips ready
+   - Type a message → assistant types back → user clicks "mark resolved"
+   - Swipe right on Thunder's profile → match animation → chat opens
+   If the project is a landing-page-only static site with no app, write
+   "none — landing-page only" and rely on the strongest visual (Q3) instead.
+```
+
+## Color extraction
+
+When reading CSS, look for custom properties like:
+
+```css
+:root {
+  --primary: oklch(...);
+  --bg: oklch(...);
+  --accent: ...;
+}
+```
+
+If no custom properties exist, scan for the most-used colors in background, color, and border rules.
+
+Write down:
+- Background color (exact value)
+- Primary text color
+- Accent/brand color
+- Any gradient or special treatment
+
+These colors are recorded in `composition-brief.md` and carry into the design spec the current hyperframes-creative workflow scaffolds.
+
+## Font extraction
+
+Look for:
+- `font-family` declarations in `:root` or `body`
+- Google Fonts `<link>` in `<head>` (the font families are in the URL query string)
+- `@import` statements
+
+Write down the display font (used for headings) and the body font separately.
+
+## What to skip
+
+Don't read:
+- Generated build artifacts (`dist/`, `.next/`, `build/`)
+- Lock files (`package-lock.json`, `yarn.lock`)
+- Test files
+- `.git/`
+- Environment and secret files (`.env`, `.env.*`)
+- Credential and key material (`.pem`, `.key`, `id_rsa`, service-account JSON, anything under a `secrets/` or `credentials/` directory)
+- Local config that commonly holds tokens
+- Any file the project's `.gitignore` excludes for the reasons above
+
+## Rule: nothing secret leaves this step
+
+Everything read in this step can end up on screen in a video the user posts publicly. Never carry secrets, API keys, tokens, internal hostnames or URLs, real customer or user names, email addresses, or any personal data into `plan.md`, `composition-brief.md`, the composition, the rendered video, or share copy. If the product's real UI contains such data, substitute plausible fictional stand-ins and say so in the plan.
+

package/skills/luckiest-video-studio/references/step-2-plan.md

@@ -0,0 +1,234 @@
+# Step 2: Write the video plan
+
+Write `<output-dir>/plan.md`. One focused page. This is the creative north star for the entire video.
+
+The plan should specify what the video must communicate and what project material must be used. It should not prescribe low-level Hyperframes implementation details. Hyperframes will decide the concrete composition structure, animation mechanics, and render workflow from the brief in Step 3.
+
+## Create the output directory
+
+```bash
+mkdir -p <output-dir>
+```
+
+## Structure of plan.md
+
+```markdown
+# Video Plan: [App Name]
+
+## What is this app?
+[One sentence. What it does, what makes it funny or impressive.]
+
+## The angle
+[The creative premise. The joke, the hook, the claim.
+What makes this video specific to this project and not generic.]
+
+## Hook (first 2-3 seconds)
+[The opening moment. This is the most important decision.
+What word, image, or motion earns the next 20 seconds?]
+
+## Key moments (the middle)
+[2-3 sharp highlights from the product.
+Bullet points. Specific. "The altitude meter counting up." 
+Not "feature callouts."]
+
+## Outro / punchline
+[How does it land? The final line. The beat before the logo.]
+
+## User flow worth showing
+[The 2–3 beats of *using* the product (entry → key action → result), pulled from
+Step 1 question 9. This is the strongest material the video has — the centerpiece
+scenes should show the flow, not just landing-page sections. If the project is
+landing-page-only, write "none — landing-page only" and rely on Key moments instead.]
+
+## Tone
+- Preset: [default / polished / yc-parody / chaotic / deadpan / cinematic / app-store]
+- Creative direction: [freeform phrase, inferred or user-provided]
+- Interpretation: [one sentence on how this affects pacing, writing, visual energy, and restraint]
+
+## Format: [landscape / vertical / square] — [width]x[height]
+## Duration: [target seconds]
+
+## Visual identity (from the project)
+- Background: [exact color value]
+- Accent: [exact color value]
+- Text: [exact color value]
+- Display font: [name]
+- Body font: [name]
+- Strongest visual element: [what from the site to reference]
+
+## Share copy (draft)
+[One sentence for Twitter/X/LinkedIn/Discord. Punchy. Not corporate.]
+
+## Audio direction
+- Role: [warm bed / sparse professional accents / cinematic support / dense rhythmic layer / intentional silence]
+- Music: [candidate track / mood / none only if disabled, missing, or intentionally silent]
+- Music treatment: [start time, volume posture, fade-in/out intent, beat/swell notes]
+- Music cue guidance: [preset cue file read / unavailable; list 1-3 strongCue timestamps for major moments; list beat-grid windows for sequential events]
+- Audio-reactive treatment: [none / subtle / expressive; what visual qualities may respond to music energy]
+- SFX posture: [sparse / moderate / dense; motion-matched; professional restraint]
+- Audio-coupled moments: [visual ideas that should consider sound, e.g. typed text, beat reveal, count-up, card sequence]
+- Restraint rule: [what audio must not do]
+
+## Storyboard
+
+### Scene 1 — [name] — [duration]s
+[What's on screen. What text appears. What product material must be referenced.]
+Sequential/interaction: [yes — describe what appears one by one or what interaction is simulated, e.g. "3 stat cards arrive one by one" or "cursor clicks the match button"; or none]
+Audio intent: [what the sound should do emotionally]
+Audio-coupled idea: [typed text, beat-aligned reveal, counter ticks, card-by-card sequence, simulated tap/swipe/type — or none]
+Music: [mood, or "none" only if disabled / missing / intentionally silent]
+Transition mood: [clean / hard / dramatic / soft / chaotic] → Scene 2
+
+### Scene 2 — [name] — [duration]s
+[...]
+Sequential/interaction: [yes — describe it; or none]
+Audio intent: [what the sound should do emotionally]
+Audio-coupled idea: [type or none]
+Transition mood: [mood] → Scene 3
+
+[... continue for all scenes]
+
+**Music mood for this video:** [upbeat / cinematic / chaotic / deadpan / parody / none only if disabled / missing / intentionally silent]
+**Audio summary:** [one sentence describing the full audio arc]
+```
+
+## Planning the scenes
+
+The default pattern is:
+```
+Hook → Reveal → 2-3 highlights → Punchline/outro
+```
+
+But adapt it. These are the right scene counts for each tone:
+
+| Tone | Scenes | Pacing |
+|---|---|---|
+| `default` | 4-5 | Comfortable. Room for each moment to breathe. |
+| `polished` | 3-4 | Fewer scenes, longer holds. Confidence through restraint. |
+| `yc-parody` | 4-5 | Structured. The joke is how seriously it's delivered. |
+| `chaotic` | 6-8 | Rapid. Some scenes under 2 seconds. |
+| `deadpan` | 3-4 | Long holds. Big empty space. One word at a time. |
+| `cinematic` | 4-5 | Wide shots. Big type. Dramatic reveals. |
+| `app-store` | 4-6 | Feature cards. Clean reveals. No mess. |
+
+## Duration guidance
+
+Scene durations must sum to 15-25 seconds. Count them.
+
+- Under 15 seconds: too thin, add a scene or lengthen holds.
+- Over 25 seconds: cut a scene or tighten timing.
+- 18-22 seconds is the sweet spot for most videos.
+
+## Reading time (keep the pace, not at text's expense)
+
+High pace comes from fast motion, fast transitions, and tight cuts — NOT from pulling text off screen before it can be read. Every text element a viewer must read needs enough fully-visible, settled time (entered, not yet exiting) to actually read it:
+
+- Short label or 1-3 word line: about 0.8s settled.
+- Headline or full sentence: about 0.3s per word, minimum ~1.2s. The hook line gets the most.
+
+Plan that floor, then keep everything else fast: entrances and transitions stay snappy (0.3-0.6s) and motion stays energetic. A line can SLAM in fast and then HOLD — fast-in plus an adequate hold reads as punchy AND legible.
+
+Two failure modes to design out at the plan stage:
+
+- **Too much text for the scene length.** A 4s scene lands maybe 2-3 short reads at the floor, not 6. If a scene carries more text than its duration allows, cut copy or split the scene — do not speed it up.
+- **Sequential text snapped onto a fast beat.** Beat-grid reveals can land ~0.5s apart at 110+ BPM (this is what rushed the bicycles spec rows). That spacing is fine for accents (glows, dots, ticks) but too fast for readable lines. For sequential TEXT, hold each item to the floor: snap to every other beat, or reveal them quickly and hold the full set on screen afterward. Flag any sequential text reveal in the storyboard with its intended hold.
+
+## Choosing what to show
+
+Every video must show something real from the product. Options, in preferred order:
+
+1. **Recreate a working-app moment** — the upload screen, the result view, the dashboard with real-looking content. Use real source from `app/`, `pages/`, or routed components — not just the landing page. This is the most compelling option whenever the product has a flow. The product *doing* its thing beats the product *describing* its thing.
+2. **Recreate a UI element in HTML** — a hero card, swipe UI, progress meter, stat block. Strong when there is no flow to show.
+3. **Animate the core concept** — if the product is "taxis for taxis", animate two taxis where one is in the other. Pure graphic but grounded in the idea.
+4. **Text-forward sequence** — if the product is copy-driven (Psychologists for Chatbots), let the copy be the visual. Giant display type, minimal chrome.
+
+Never fill scenes with abstract patterns, color washes, or generic motion graphics that could belong to any video.
+
+## Bias the storyboard toward the user flow
+
+If Step 1 question 9 identified a real user flow, the **centerpiece scenes must show that flow** — not just landing-page recreations.
+
+Good (working-app scenes):
+- "Upload screen — cursor drops a video file. Filename appears. Progress bar fills 0→100% in 1.2s."
+- "Three result thumbnails pop in: 0:15, 0:23, 0:31. Each shows a vertical clip frame with a real-looking caption."
+- "Inbox row appears, gets a green 'resolved' badge, slides off the top of the list."
+
+Avoid (marketing-only scenes when a flow exists):
+- "16:9 → 9:16 transform diagram" — that's a *diagram of what the product does*, not the product doing it.
+- "Three stat cards: 10x faster / 0 cuts / 3 clips" — that's the landing page's social-proof row, not the product.
+
+Stat cards, headline blocks, and the landing-page hero still have a place — but at most one of them, used as a frame around the flow, not as a substitute. The centerpiece is the working app.
+
+If the project has no app (landing-page-only static site), skip this section and recreate the landing-page strongest visual instead.
+
+## Look for interaction and sequential reveal moments
+
+Before writing the storyboard, ask: **does this product have things that can appear one by one, or actions that can be simulated?**
+
+These are among the most effective moments in a video — they make the product feel alive and real, not like a slide deck. Look for:
+
+- **Sequential reveals** — feature cards, stats, list items, match results, profile cards, menu options, or anything the product shows as a set. Design these to appear one by one so sound and motion reinforce each arrival. This is a storyboard decision, not an audio afterthought.
+- **Simulated interaction** — if the product involves swiping, clicking, typing, selecting, or toggling, show it. A cursor clicking a button, a swipe gesture on a card, or text being typed into a field turns a static mockup into a demonstration. Sound matches the action automatically when the gesture is in the storyboard.
+
+If a scene has either of these, commit to it explicitly in the scene description:
+- Good: "3 horse profiles slide in one by one, each with a card sound"
+- Good: "Simulate a right-swipe on Thunder's profile card"
+- Good: "The hook line types out character by character with keyboard sounds"
+- Avoid: leaving it vague and hoping Hyperframes adds rhythm on its own
+
+Hyperframes can implement both patterns well — but only if the plan specifies what's appearing, in what order, and that interaction is being simulated. The plan is the contract.
+
+## Audio planning
+
+Choose the music direction in the plan. Leave exact SFX file selection and exact timestamps to Hyperframes during composition, because SFX should match the actual visual implementation.
+
+Default posture: include audio. Pick a music bed and a few tasteful SFX unless the user passed `--no-music` / `--no-sfx`, the assets are missing, or silence is explicitly part of the concept.
+
+For each scene, note the intended audio role and likely audio-coupled opportunities:
+
+Format: `Audio-coupled idea: type the hook with subtle key ticks if Hyperframes uses a typing animation.`
+
+For audio-reactive visuals, say what should respond and how restrained it should be. Example: `Audio-reactive treatment: subtle; use music RMS/bass to make the hero glow and product card presence breathe, not to add waveform bars.`
+
+Do not require exact SFX filenames in `plan.md` unless the user explicitly requested a specific sound or the mapping is unavoidable. Prefer moment types and intent.
+
+Hyperframes has creative freedom to choose exact files, density, and timestamps that make the video feel smooth and professional.
+
+Do not over-specify audio if the tone asks for restraint. For `yc-parody` or `deadpan`, use fewer and quieter cues, but prefer polished restraint over no audio.
+
+## Music cue guidance
+
+Beat/cue sync is available for any track now (see `audio.md` → "Beat and cue sources"): a preset from an earlier run can be reused; custom tracks get cues at composition time via `analyze_music_cues.py` (rich, needs Python) or `npx hyperframes beats` (simple, zero-dep). When the plan chooses music, add a compact `Music cue guidance` section to `plan.md`:
+
+- The track and, if a preset exists, its tempo.
+- 1-3 strong-cue timestamps to target for major visual moments — from an existing preset if there is one, otherwise note "to be detected at composition time."
+- Beat-grid windows for any sequential reveals in the storyboard.
+- A restraint note when the tone is deadpan, yc-parody, or otherwise quiet.
+
+See `audio.md` for the cue sources, JSON schema, and beat-sync tolerances.
+
+If SFX are enabled, note likely sound opportunities but leave exact filenames to Hyperframes. Hyperframes should use the skill's `sfx-analysis.md` during composition.
+
+## Handoff posture
+
+- Good: "Recreate the swipe card with Thunder's profile and hay tags."
+- Good: "Use the source site's amber/dark palette and serif headline feel."
+- Good: "The stat reveal should feel like a deadpan startup metric slide."
+- Avoid: "Use a GSAP timeline with this selector and this easing."
+- Avoid: "Use this exact HTML structure."
+- Avoid: "Load this specific runtime URL."
+
+## Transition vocabulary
+
+Match transitions to tone:
+
+| Tone | Preferred transitions |
+|---|---|
+| `default` | Crossfade, clean wipe |
+| `polished` | Soft crossfade, slide |
+| `yc-parody` | Hard cut, minimal |
+| `chaotic` | Hard cut, flash, zoom |
+| `deadpan` | Slow crossfade, long hold |
+| `cinematic` | Dramatic wipe, crossfade |
+| `app-store` | Slide, smooth wipe |
+