hyperframes 0.6.97 → 0.6.98

package/dist/skills/hyperframes/references/captions.md

@@ -1,163 +0,0 @@
-# Captions
-
-## Language Rule (Non-Negotiable)
-
-**Never use `.en` models unless the user explicitly states the audio is English.** `.en` models TRANSLATE non-English audio into English instead of transcribing it.
-
-1. User says the language → `--model small --language <code>` (no `.en`)
-2. User says English → `--model small.en`
-3. Language unknown → `--model small` (no `.en`, no `--language`) — auto-detects
-
----
-
-Analyze spoken content to determine caption style. If user specifies a style, use that. Otherwise, detect tone from the transcript.
-
-## Transcript Source
-
-```json
-[
-  { "text": "Hello", "start": 0.0, "end": 0.5 },
-  { "text": "world.", "start": 0.6, "end": 1.2 }
-]
-```
-
-For transcription commands, whisper models, external APIs, see [transcript-guide.md](transcript-guide.md).
-
-## Style Detection (When No Style Specified)
-
-Read the full transcript before choosing. Four dimensions:
-
-**1. Visual feel** — corporate→clean; energetic→bold; storytelling→elegant; technical→precise; social→playful.
-
-**2. Color palette** — dark+bright for energy; muted for professional; high contrast for clarity; one accent color.
-
-**3. Font mood** — heavy/condensed for impact; clean sans for modern; rounded for friendly; serif for elegance.
-
-**4. Animation character** — scale-pop for punchy; gentle fade for calm; word-by-word for emphasis; typewriter for technical.
-
-## Per-Word Styling
-
-Scan for words deserving distinct treatment:
-
-- **Brand/product names** — larger size, unique color
-- **ALL CAPS** — scale boost, flash, accent color
-- **Numbers/statistics** — bold weight, accent color
-- **Emotional keywords** — exaggerated animation (overshoot, bounce)
-- **Call-to-action** — highlight, underline, color pop
-- **Marker highlight** — for beyond-color emphasis, see [css-patterns.md](css-patterns.md)
-
-## Script-to-Style Mapping
-
-| Tone         | Font mood                | Animation                          | Color                       | Size    |
-| ------------ | ------------------------ | ---------------------------------- | --------------------------- | ------- |
-| Hype/launch  | Heavy condensed, 800-900 | Scale-pop, back.out(1.7), 0.1-0.2s | Bright on dark              | 72-96px |
-| Corporate    | Clean sans, 600-700      | Fade+slide, power3.out, 0.3s       | White/neutral, muted accent | 56-72px |
-| Tutorial     | Mono/clean sans, 500-600 | Typewriter/fade, 0.4-0.5s          | High contrast, minimal      | 48-64px |
-| Storytelling | Serif/elegant, 400-500   | Slow fade, power2.out, 0.5-0.6s    | Warm muted tones            | 44-56px |
-| Social       | Rounded sans, 700-800    | Bounce, elastic.out, word-by-word  | Playful, colored pills      | 56-80px |
-
-## Word Grouping
-
-- **High energy:** 2-3 words. Quick turnover.
-- **Conversational:** 3-5 words. Natural phrases.
-- **Measured/calm:** 4-6 words. Longer groups.
-
-Break on sentence boundaries, 150ms+ pauses, or max word count.
-
-## Positioning
-
-- **Landscape (1920x1080):** Bottom 80-120px, centered
-- **Portrait (1080x1920):** Lower middle ~600-700px from bottom, centered
-- Never cover the subject's face
-- `position: absolute` — never relative
-- One caption group visible at a time
-
-## Text Overflow Prevention
-
-Use `window.__hyperframes.fitTextFontSize()`:
-
-```js
-var result = window.__hyperframes.fitTextFontSize(group.text.toUpperCase(), {
-  fontFamily: "Outfit",
-  fontWeight: 900,
-  maxWidth: 1600,
-});
-el.style.fontSize = result.fontSize + "px";
-```
-
-Options: `maxWidth` (1600 landscape, 900 portrait), `baseFontSize` (78), `minFontSize` (42), `fontWeight`, `fontFamily`, `step` (2).
-
-CSS safety nets: `max-width` on container, `overflow: visible` (**not** `hidden` — hidden clips scaled emphasis words and glow effects), `position: absolute`, explicit `height`. When per-word styling uses `scale > 1.0`, compute `maxWidth = safeWidth / maxScale` to leave headroom.
-
-**Container pattern:** Full-width absolute container, centered. Do **not** use `left: 50%; transform: translateX(-50%)` — causes clipping at composition edges.
-
-## Caption Exit Guarantee
-
-Every group **must** have a hard kill after exit animation:
-
-```js
-tl.to(groupEl, { opacity: 0, scale: 0.95, duration: 0.12, ease: "power2.in" }, group.end - 0.12);
-tl.set(groupEl, { opacity: 0, visibility: "hidden" }, group.end); // deterministic kill
-```
-
-Self-lint after building timeline — place **before** `window.__timelines[id] = tl` so it runs at composition init:
-
-```js
-GROUPS.forEach(function (group, gi) {
-  var el = document.getElementById("cg-" + gi);
-  if (!el) return;
-  tl.seek(group.end + 0.01);
-  var computed = window.getComputedStyle(el);
-  if (computed.opacity !== "0" && computed.visibility !== "hidden") {
-    console.warn(
-      "[caption-lint] group " + gi + " still visible at t=" + (group.end + 0.01).toFixed(2) + "s",
-    );
-  }
-});
-tl.seek(0);
-```
-
-## Pre-Built Caption Components
-
-Before building caption styles from scratch, check the registry — 15 ready-to-use caption components cover the most common styles. Install with `npx hyperframes add <name>` and use as a sub-composition via `data-composition-src`.
-
-```bash
-npx hyperframes catalog --tag caption-style   # list all caption components
-npx hyperframes add caption-highlight         # install a specific one
-```
-
-| Style                     | Component                    | Best for                     |
-| ------------------------- | ---------------------------- | ---------------------------- |
-| TikTok-style highlight    | `caption-highlight`          | Social, high-energy          |
-| Karaoke pill              | `caption-pill-karaoke`       | Music, lyric videos          |
-| Cinematic editorial       | `caption-editorial-emphasis` | Documentary, storytelling    |
-| Glitch / cyber            | `caption-glitch-rgb`         | Tech, gaming                 |
-| Full-screen slam          | `caption-kinetic-slam`       | Hype, announcements          |
-| Neon glow                 | `caption-neon-glow`          | Night, club, neon aesthetics |
-| Neon accent (multi-color) | `caption-neon-accent`        | Colorful, playful            |
-| Wipe reveal               | `caption-clip-wipe`          | Clean, modern                |
-| Gradient fill             | `caption-gradient-fill`      | Vibrant, eye-catching        |
-| Matrix decode             | `caption-matrix-decode`      | Sci-fi, tech reveals         |
-| Emoji pop                 | `caption-emoji-pop`          | Social, casual               |
-| Parallax layers           | `caption-parallax-layers`    | Depth, cinematic             |
-| Particle burst            | `caption-particle-burst`     | Celebration, impact keywords |
-| Lava texture              | `caption-texture`            | Bold, dramatic               |
-| Weight shift              | `caption-weight-shift`       | Elegant, typographic         |
-
-Browse all with previews: [hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog)
-
-Caption components ship with transparent backgrounds — they're pure overlays. If the underlying video is bright or busy, add a contrast layer (e.g. a semi-transparent dark div) in the host composition beneath the caption sub-composition, not inside the component itself.
-
-## Further References
-
-- [dynamic-techniques.md](dynamic-techniques.md) — karaoke, clip-path reveals, slam words, scatter exits, elastic, 3D rotation
-- [transcript-guide.md](transcript-guide.md) — transcription commands, whisper models, external APIs
-- [css-patterns.md](css-patterns.md) — CSS+GSAP marker highlighting (deterministic, fully seekable)
-
-## Constraints
-
-- Deterministic. No `Math.random()`, no `Date.now()`.
-- Sync to transcript timestamps.
-- One group visible at a time.
-- Every group must have a hard `tl.set` kill at `group.end`.
-- The compiler embeds supported fonts automatically — just declare `font-family` in CSS.

package/dist/skills/hyperframes/references/css-patterns.md

@@ -1,373 +0,0 @@
-# CSS Patterns for Marker Highlighting
-
-Pure CSS + GSAP implementations of all five MarkerHighlight.js drawing modes. Use these for deterministic rendering in HyperFrames compositions — no external library dependency, full GSAP timeline control.
-
-## Table of Contents
-
-- [1. Highlight Mode](#1-highlight-mode) — Yellow marker sweep behind text
-- [2. Circle Mode](#2-circle-mode) — Hand-drawn ellipse around text
-- [3. Burst Mode](#3-burst-mode) — Radiating lines from text
-- [4. Scribble Mode](#4-scribble-mode) — Chaotic scribble over text
-- [5. Sketchout Mode](#5-sketchout-mode) — Rough rectangle outline
-
-## 1. Highlight Mode
-
-Yellow marker sweep behind text. The most common mode.
-
-```html
-<span class="mh-highlight-wrap">
-  <span class="mh-highlight-bar" id="hl-1"></span>
-  <span class="mh-highlight-text">highlighted text</span>
-</span>
-```
-
-```css
-.mh-highlight-wrap {
-  position: relative;
-  display: inline;
-}
-.mh-highlight-bar {
-  position: absolute;
-  top: 0;
-  left: -6px;
-  right: -6px;
-  bottom: 0;
-  background: #fdd835;
-  opacity: 0.35;
-  transform: scaleX(0);
-  transform-origin: left center;
-  border-radius: 3px;
-  z-index: 0;
-}
-.mh-highlight-text {
-  position: relative;
-  z-index: 1;
-}
-```
-
-```js
-// Sweep in from left
-tl.to("#hl-1", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.6);
-
-// Optional: skew for hand-drawn feel
-// gsap.set("#hl-1", { skewX: -2 });
-```
-
-### Multi-line Highlight
-
-Stagger bars across multiple lines:
-
-```js
-tl.to(
-  ".mh-highlight-bar",
-  {
-    scaleX: 1,
-    duration: 0.5,
-    ease: "power2.out",
-    stagger: 0.3,
-  },
-  0.6,
-);
-```
-
-## 2. Circle Mode
-
-Hand-drawn circle around text. Use `border-radius: 50%` with a slight rotation for organic feel.
-
-```html
-<span class="mh-circle-wrap">
-  <span class="mh-circle-text" id="circle-word">IMPORTANT</span>
-  <span class="mh-circle-ring" id="circle-1"></span>
-</span>
-```
-
-```css
-.mh-circle-wrap {
-  position: relative;
-  display: inline;
-}
-.mh-circle-text {
-  position: relative;
-  z-index: 1;
-}
-.mh-circle-ring {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 130%;
-  height: 160%;
-  transform: translate(-50%, -50%) rotate(-3deg) scale(0);
-  border: 3px solid #e53935;
-  border-radius: 50%;
-  pointer-events: none;
-  z-index: 0;
-}
-```
-
-```js
-// Circle scales in with a wobble
-tl.to(
-  "#circle-1",
-  {
-    scale: 1,
-    rotation: -3,
-    duration: 0.6,
-    ease: "back.out(1.7)",
-    transformOrigin: "center center",
-  },
-  0.7,
-);
-```
-
-### Variations
-
-```css
-/* Tighter circle (for short words) */
-.mh-circle-ring.tight {
-  width: 150%;
-  height: 180%;
-}
-
-/* Squared circle (rounded rectangle) */
-.mh-circle-ring.rounded {
-  border-radius: 30%;
-  width: 120%;
-  height: 140%;
-}
-
-/* Ellipse (wider than tall) */
-.mh-circle-ring.ellipse {
-  width: 150%;
-  height: 130%;
-  border-radius: 50%;
-}
-```
-
-## 3. Burst Mode
-
-Radiating lines from text center. Each line is a positioned div rotated to its angle.
-
-```html
-<span class="mh-burst-wrap">
-  <span class="mh-burst-text">WOW</span>
-  <span class="mh-burst-container" id="burst-1">
-    <span class="mh-burst-line" style="--angle: 0deg; --len: 70px;"></span>
-    <span class="mh-burst-line" style="--angle: 30deg; --len: 55px;"></span>
-    <span class="mh-burst-line" style="--angle: 60deg; --len: 80px;"></span>
-    <span class="mh-burst-line" style="--angle: 90deg; --len: 45px;"></span>
-    <span class="mh-burst-line" style="--angle: 120deg; --len: 65px;"></span>
-    <span class="mh-burst-line" style="--angle: 150deg; --len: 75px;"></span>
-    <span class="mh-burst-line" style="--angle: 180deg; --len: 50px;"></span>
-    <span class="mh-burst-line" style="--angle: 210deg; --len: 60px;"></span>
-    <span class="mh-burst-line" style="--angle: 240deg; --len: 80px;"></span>
-    <span class="mh-burst-line" style="--angle: 270deg; --len: 40px;"></span>
-    <span class="mh-burst-line" style="--angle: 300deg; --len: 70px;"></span>
-    <span class="mh-burst-line" style="--angle: 330deg; --len: 55px;"></span>
-  </span>
-</span>
-```
-
-```css
-.mh-burst-wrap {
-  position: relative;
-  display: inline;
-}
-.mh-burst-text {
-  position: relative;
-  z-index: 2;
-}
-.mh-burst-container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  z-index: 1;
-}
-.mh-burst-line {
-  position: absolute;
-  display: block;
-  width: 3px;
-  height: var(--len);
-  background: #1e88e5;
-  left: -1.5px;
-  top: calc(-1 * var(--len));
-  transform: rotate(var(--angle));
-  transform-origin: bottom center;
-  opacity: 0;
-}
-```
-
-```js
-// All lines burst outward simultaneously with slight stagger
-tl.fromTo(
-  "#burst-1 .mh-burst-line",
-  { scaleY: 0, opacity: 0 },
-  { scaleY: 1, opacity: 1, duration: 0.4, ease: "power2.out", stagger: 0.03 },
-  0.7,
-);
-```
-
-**Vary line lengths** (40-80px range) for an organic, hand-drawn feel. Equal lengths look mechanical.
-
-## 4. Scribble Mode
-
-Wavy SVG underlines and strikethroughs that draw themselves via `stroke-dashoffset`.
-
-```html
-<span class="mh-scribble-wrap">
-  <span class="mh-scribble-text">underlined text</span>
-  <svg class="mh-scribble-svg" viewBox="0 0 500 24" preserveAspectRatio="none">
-    <path
-      id="scribble-1"
-      d="M0,12 Q31,0 62,12 Q93,24 125,12 Q156,0 187,12 Q218,24 250,12 Q281,0 312,12 Q343,24 375,12 Q406,0 437,12 Q468,24 500,12"
-      fill="none"
-      stroke="#FDD835"
-      stroke-width="3"
-      stroke-linecap="round"
-    />
-  </svg>
-</div>
-```
-
-```css
-.mh-scribble-wrap {
-  position: relative;
-  display: inline;
-}
-.mh-scribble-text {
-  position: relative;
-  z-index: 1;
-}
-.mh-scribble-svg {
-  position: absolute;
-  left: 0;
-  bottom: -6px;
-  width: 100%;
-  height: 24px;
-  z-index: 0;
-}
-```
-
-```js
-// Measure path length and set initial dash state
-var path = document.querySelector("#scribble-1");
-var len = path.getTotalLength();
-gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });
-
-// Draw the line
-tl.to(
-  "#scribble-1",
-  {
-    strokeDashoffset: 0,
-    duration: 0.8,
-    ease: "power1.inOut",
-  },
-  0.7,
-);
-```
-
-### Strikethrough Variant
-
-Position the SVG at `top: 50%; transform: translateY(-50%)` instead of `bottom: -6px`.
-
-### Wavy Path Generator
-
-Scale the path's viewBox width to match text width. The wave pattern `Q x1,y1 x2,y2` alternates between `y=0` and `y=24` for a natural wobble. Adjust the control points for tighter or looser waves:
-
-- **Tight waves**: smaller x-increments (25px per half-wave)
-- **Loose waves**: larger x-increments (50px per half-wave)
-- **Amplitude**: change the y range (0-24 for standard, 0-16 for subtle)
-
-## 5. Sketchout Mode
-
-Cross-hatch lines over de-emphasized text. Multiple angled lines create a "crossed out" effect.
-
-```html
-<span class="mh-sketchout-wrap">
-  <span class="mh-sketchout-text">old price</span>
-  <span class="mh-sketchout-lines" id="sketchout-1">
-    <span class="mh-sketchout-line mh-sketchout-fwd"></span>
-    <span class="mh-sketchout-line mh-sketchout-bwd"></span>
-  </span>
-</span>
-```
-
-```css
-.mh-sketchout-wrap {
-  position: relative;
-  display: inline;
-}
-.mh-sketchout-text {
-  position: relative;
-  z-index: 0;
-}
-.mh-sketchout-lines {
-  position: absolute;
-  top: 0;
-  left: -4px;
-  right: -4px;
-  bottom: 0;
-  overflow: hidden;
-  z-index: 1;
-}
-.mh-sketchout-line {
-  position: absolute;
-  display: block;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: #e53935;
-  transform-origin: left center;
-  transform: scaleX(0);
-}
-.mh-sketchout-fwd {
-  transform: scaleX(0) rotate(-12deg);
-}
-.mh-sketchout-bwd {
-  transform: scaleX(0) rotate(12deg);
-}
-```
-
-```js
-// Forward slash draws first
-tl.to(
-  "#sketchout-1 .mh-sketchout-fwd",
-  {
-    scaleX: 1,
-    duration: 0.3,
-    ease: "power2.out",
-  },
-  1.0,
-);
-
-// Backward slash follows
-tl.to(
-  "#sketchout-1 .mh-sketchout-bwd",
-  {
-    scaleX: 1,
-    duration: 0.3,
-    ease: "power2.out",
-  },
-  1.15,
-);
-```
-
-## Combining Modes in Captions
-
-Use mode cycling for visual variety across caption groups:
-
-```js
-var MODES = ["highlight", "circle", "burst", "scribble"];
-
-GROUPS.forEach(function (group, gi) {
-  var mode = MODES[gi % MODES.length];
-  // Apply the mode's CSS pattern to emphasis words in this group
-  group.emphasisWords.forEach(function (word) {
-    applyMode(word.el, mode, tl, word.start);
-  });
-});
-```
-
-Cycle every 2-3 groups for high energy, every 3-4 for medium, every 4-5 for low.

package/dist/skills/hyperframes/references/design-picker.md

@@ -1,117 +0,0 @@
-# Design Picker
-
-Two-phase visual picker: mood boards first (pick a complete direction), then fine-tune individual categories.
-
-## Prerequisites
-
-Read these before generating options — they define the rules your options must follow:
-
-- [typography.md](typography.md)
-- [../house-style.md](../house-style.md)
-- [video-composition.md](video-composition.md)
-- [../visual-styles.md](../visual-styles.md)
-- [beat-direction.md](beat-direction.md)
-
-## Building the picker
-
-1. Generate options **deeply contextual to the user's prompt**. Every category — not just architectures — must reflect the specific product, brand, audience, and mood. Generic options that could appear on any picker are a failure.
-
-   **Mood boards** — as many as the creative space warrants (4-8). Every board must tell a different STORY about the brand, not just reshuffle the same elements. Ask: "what are the genuinely different ways to position this product?" A cat food brand might be: playful chaos, premium positioning, comfort/cozy, social-native, flavor showcase, humor-led, sensory/appetizing. Each is a different narrative, not a different font on the same layout.
-
-   **Architectures** — one per mood board minimum, each visually distinct. Use `{{prompt_headline}}` and `{{prompt_sub}}` tokens. If the user provided media assets, use them as background images (use `url(path)` without quotes — single quotes inside `style='...'` break the attribute).
-
-   **Palettes** (5-6) — named after the brand's world, not generic moods. The palette names and colors should feel like they belong to THIS specific product. Always mix dark + light + tinted. **Every palette must be visually distinct at swatch size.** If two palettes share the same background lightness AND a similar accent hue, cut one. Test: would a user see the difference in a 14px swatch chip? If not, they're duplicates.
-
-   **Type pairings** (5-6) — **RUN the font discovery script from typography.md BEFORE generating pairings.** This is not optional. Download Google Fonts metadata, run the script, and pick from its output. You will otherwise reach for the same 8 fonts every time (Bricolage Grotesque, Instrument Serif, Fraunces, Archivo Black, DM Serif Display, Space Grotesk, Fredoka) — that's your training data default, not a contextual choice. Match the brand's energy and audience. Cross-category per typography.md (never two sans-serifs).
-
-2. `mkdir -p .hyperframes` then copy [../templates/design-picker.html](../templates/design-picker.html) to `.hyperframes/pick-design.html`.
-3. Replace these placeholders using Python (don't hand-escape quotes in sed):
-   - `__ARCHITECTURES_JSON__` — array of architecture objects
-   - `__PALETTES_JSON__` — array of palette objects
-   - `__TYPEPAIRS_JSON__` — array of type pairing objects
-   - `__MOODBOARDS_JSON__` — array of mood board objects (see format below)
-   - `__PROMPT_JSON__` — object with prompt context (see format below)
-
-### Architecture data format
-
-Each architecture object must include a `preview_html` field — the HTML that renders in the preview panel. Use token placeholders that the template replaces at runtime: `{{bg}}`, `{{fg}}`, `{{ac}}`, `{{mt}}`, `{{hf}}`, `{{hw}}`, `{{bf}}`, `{{bw}}`, `{{cr}}` (corner radius), `{{pad}}`, `{{gap}}`, `{{shadow}}`, `{{g}}` (grid line color), `{{fg3}}`/`{{fg6}}`/`{{fg8}}`/`{{fg15}}` (fg at opacity), `{{ac3}}`/`{{ac5}}`/`{{ac25}}` (accent at opacity).
-
-**Every token must be used.** Apply `{{cr}}` to all cards, buttons, and containers. Apply `{{shadow}}` to elevated elements (cards, buttons, code blocks). Apply `{{pad}}` and `{{gap}}` to control spacing. If a token isn't used in the preview_html, that option will have no visible effect.
-
-**Density matters.** Each architecture preview must include 15+ distinct elements to give the user a real sense of the layout. Include: headline, subhead, body paragraph, label/overline, stat with number, secondary stat, quote/testimonial, attribution, card with title+body, second card (different treatment), code/command block, primary button, secondary button, list or tags, accent divider/rule, and a data element (table row, progress bar, or chart).
-
-Optionally include `components` (component styling rules) and `dos` (do's and don'ts) as strings — these appear in the generated design.md.
-
-**Layout constraint:** All preview HTML must use percentage widths or `max-width: 100%`. Use `flex-wrap: wrap` on all flex rows. Absolute-positioned decoratives must stay within a parent with `overflow: hidden`.
-
-**Security:** Architecture `preview_html` must not contain `<script>` tags, event handlers (`onclick`, `onerror`, etc.), or `javascript:` URLs. It is injected via `innerHTML`.
-
-**Image URLs:** When using background images in `preview_html`, use `url(path/to/image.jpg)` WITHOUT quotes around the path. Single quotes like `url('path.jpg')` break because `preview_html` is inside a `style='...'` attribute — the inner single quotes terminate the outer attribute.
-
-**Palette variety:** Always include a mix of light, dark, and tinted backgrounds across the 6 palettes — even for calm/wellness prompts.
-
-### Example architecture object
-
-```json
-{
-  "name": "Editorial Stack",
-  "description": "Vertical rhythm with large type, pull quotes, and data callouts",
-  "tag": "editorial / longform / narrative",
-  "mood": "Confident, unhurried, typographically driven",
-  "preview_html": "<div style='background:{{bg}};color:{{fg}};padding:{{pad}};min-height:100vh;font-family:\"{{bf}}\",sans-serif;font-weight:{{bw}};'><div style='max-width:100%;display:flex;flex-direction:column;gap:{{gap}};'><div style='font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:{{mt}};'>Overline Label</div><div style='font-family:\"{{hf}}\",serif;font-weight:{{hw}};font-size:48px;line-height:1.1;letter-spacing:-0.02em;'>The Headline Goes Here</div><div style='font-size:20px;color:{{mt}};max-width:70%;line-height:1.5;'>Subheading text that introduces the narrative arc of this composition with enough words to fill two lines.</div><div style='font-size:15px;line-height:1.7;color:{{fg}};max-width:65%;'>Body paragraph with real sentences. The quick brown fox jumps over the lazy dog. This gives a sense of text density and reading rhythm at the chosen type size.</div><div style='display:flex;gap:{{gap}};flex-wrap:wrap;'><div style='background:{{fg6}};border-radius:{{cr}};padding:{{pad}};flex:1;min-width:200px;box-shadow:{{shadow}};'><div style='font-size:36px;font-family:\"{{hf}}\",serif;font-weight:{{hw}};color:{{ac}};'>2.4M</div><div style='font-size:12px;color:{{mt}};margin-top:4px;'>Primary Stat</div></div><div style='background:{{fg6}};border-radius:{{cr}};padding:{{pad}};flex:1;min-width:200px;box-shadow:{{shadow}};'><div style='font-size:36px;font-family:\"{{hf}}\",serif;font-weight:{{hw}};color:{{fg}};'>87%</div><div style='font-size:12px;color:{{mt}};margin-top:4px;'>Secondary Stat</div></div></div><div style='border-left:3px solid {{ac}};padding:12px {{pad}};background:{{ac3}};border-radius:0 {{cr}} {{cr}} 0;'><div style='font-size:18px;font-style:italic;color:{{fg}};line-height:1.5;'>\"A pull quote that captures the key insight of the piece.\"</div><div style='font-size:12px;color:{{mt}};margin-top:8px;'>— Attribution Name</div></div><div style='background:{{fg3}};border-radius:{{cr}};padding:{{pad}};box-shadow:{{shadow}};'><div style='font-size:14px;font-weight:{{hw}};margin-bottom:8px;'>Card Title</div><div style='font-size:13px;color:{{mt}};line-height:1.5;'>Card body text with a different treatment than the main content area.</div></div><div style='background:{{ac5}};border:1px solid {{ac25}};border-radius:{{cr}};padding:{{pad}};box-shadow:{{shadow}};'><div style='font-size:14px;font-weight:{{hw}};color:{{ac}};margin-bottom:8px;'>Accent Card</div><div style='font-size:13px;color:{{fg}};line-height:1.5;'>Second card with a tinted accent treatment for variety.</div></div><div style='font-family:monospace;font-size:13px;background:{{fg8}};border-radius:{{cr}};padding:{{pad}};color:{{fg15}};box-shadow:{{shadow}};'>$ hyperframes render --output video.mp4</div><div style='display:flex;gap:12px;flex-wrap:wrap;'><button style='background:{{ac}};color:{{bg}};border:none;padding:10px 24px;border-radius:{{cr}};font-size:14px;font-weight:600;box-shadow:{{shadow}};cursor:pointer;'>Primary Action</button><button style='background:transparent;color:{{fg}};border:1px solid {{fg15}};padding:10px 24px;border-radius:{{cr}};font-size:14px;cursor:pointer;'>Secondary</button></div><div style='display:flex;gap:8px;flex-wrap:wrap;'><span style='background:{{fg6}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{mt}};'>Tag One</span><span style='background:{{fg6}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{mt}};'>Tag Two</span><span style='background:{{ac5}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{ac}};'>Accent Tag</span></div><div style='height:1px;background:linear-gradient(to right,{{ac25}},{{fg6}},{{ac25}});'></div><div style='display:flex;justify-content:space-between;font-size:12px;color:{{mt}};border-bottom:1px solid {{g}};padding:8px 0;'><span>Data row label</span><span style='color:{{fg}};font-weight:600;'>1,234</span></div></div></div>"
-}
-```
-
-### Mood board data format
-
-Each mood board pre-selects one option from each category. The user picks a mood board in Phase 1, then fine-tunes in Phase 2 with those selections pre-filled.
-
-```json
-{
-  "name": "Terminal Precision",
-  "description": "Code-forward, data-dense, CLI energy. Dark canvas, monospace body, sharp corners.",
-  "theme": "dark",
-  "arch_index": 0,
-  "palette_index": 0,
-  "type_index": 0,
-  "corners_index": 0,
-  "density_index": 0,
-  "depth_index": 1,
-  "easing_index": 0,
-  "corners": "0px",
-  "padding": "12px",
-  "gap": "8px",
-  "shadow": "0 2px 16px rgba(0,230,255,0.15)"
-}
-```
-
-Indices reference into the ARCHITECTURES, PALETTES, and TYPEPAIRS arrays. The template renders a mini preview of each mood board using its architecture's `preview_html` with the mood board's palette/type applied.
-
-### Prompt context data format
-
-```json
-{
-  "title": "AI Coding Assistant",
-  "headline": "Your Code, Understood.",
-  "subline": "An AI coding assistant that reads your entire codebase.",
-  "section_desc": "Layout options for your product launch"
-}
-```
-
-`title` appears in the Phase 1 header. `headline` and `subline` replace `{{prompt_headline}}` and `{{prompt_sub}}` in architecture preview_html so previews show real content.
-
-### Content tokens in preview_html
-
-In addition to the standard design tokens (`{{bg}}`, `{{fg}}`, `{{ac}}`, etc.), architecture `preview_html` can use:
-
-- `{{prompt_headline}}` — the user's actual headline text
-- `{{prompt_sub}}` — the user's actual subline text
-
-This makes previews contextual — the user sees their own content styled, not generic placeholders.
-
-## Serving and user selection
-
-4. Serve the file: `cd <project-dir> && python3 -m http.server 8723 &` (use port 8723 or any unused port above 8000; if the curl check fails, try the next port). Verify: `curl -s -o /dev/null -w "%{http_code}" http://localhost:8723/.hyperframes/pick-design.html` — only share the link if it returns 200. Do NOT use `npx hyperframes preview` for the picker — it blocks. Only start the HTTP server from the main conversation thread. If you are running as a dispatched task or subagent, return the file path and let the caller serve it.
-5. Once the user picks, tell them: "Copy the design.md from the picker and paste it here." The user pastes the markdown back into the conversation. Save it verbatim to `design.md` in the project root — it's already in spec format (YAML frontmatter + prose sections). After the user pastes, kill the background server: `kill %1` or `kill $(lsof -ti:8723)`. Then proceed with construction.
-
-The picker outputs a [google-labs-code/design.md](https://github.com/google-labs-code/design.md) spec-compliant file: YAML frontmatter with `colors`, `typography`, `rounded`, and `spacing` tokens, followed by `## Overview`, `## Colors`, `## Typography`, `## Layout`, `## Elevation`, `## Components`, and `## Do's and Don'ts` prose sections.