dsh-hyperframes 0.1.1 → 0.3.0

package/skills/hyperframes/scripts/contrast-report.mjs

@@ -1,335 +0,0 @@
-#!/usr/bin/env node
-// contrast-report.mjs — HyperFrames contrast audit
-//
-// Reads a composition, seeks to N sample timestamps, walks the DOM for text
-// elements, measures the WCAG 2.1 contrast ratio between each element's
-// declared foreground color and the pixels behind it, and emits:
-//
-//   - contrast-report.json  (machine-readable, one entry per text element × sample)
-//   - contrast-overlay.png  (sprite grid; magenta=fail AA, yellow=pass AA only, green=AAA)
-//
-// Usage:
-//   node skills/hyperframes/scripts/contrast-report.mjs <composition-dir> \
-//     [--samples N] [--out <dir>] [--width W] [--height H] [--fps N]
-//
-// The composition directory must contain an index.html. Raw authoring HTML
-// works — the producer's file server auto-injects the runtime at serve time.
-// Exits 1 if any text element fails WCAG AA.
-
-import { mkdir, writeFile } from "node:fs/promises";
-import { resolve } from "node:path";
-
-import sharp from "sharp";
-
-// Use the producer's file server — it auto-injects the HyperFrames runtime
-// and render-seek bridge, so raw authoring HTML works without a build step.
-import {
-  createFileServer,
-  createCaptureSession,
-  initializeSession,
-  closeCaptureSession,
-  captureFrameToBuffer,
-  getCompositionDuration,
-} from "@hyperframes/producer";
-
-// ─── CLI ─────────────────────────────────────────────────────────────────────
-
-const args = parseArgs(process.argv.slice(2));
-if (!args.composition) die("missing <composition-dir>");
-
-const SAMPLES = Number(args.samples ?? 10);
-const OUT_DIR = resolve(args.out ?? ".hyperframes/contrast");
-const WIDTH = Number(args.width ?? 1920);
-const HEIGHT = Number(args.height ?? 1080);
-const FPS = Number(args.fps ?? 30);
-const COMP_DIR = resolve(args.composition);
-
-// ─── Main ────────────────────────────────────────────────────────────────────
-
-await mkdir(OUT_DIR, { recursive: true });
-
-const server = await createFileServer({ projectDir: COMP_DIR, port: 0 });
-const session = await createCaptureSession(
-  server.url,
-  OUT_DIR,
-  { width: WIDTH, height: HEIGHT, fps: FPS, format: "png" },
-  null,
-);
-await initializeSession(session);
-
-try {
-  const duration = await getCompositionDuration(session);
-  const times = Array.from(
-    { length: SAMPLES },
-    (_, i) => +(((i + 0.5) / SAMPLES) * duration).toFixed(3),
-  );
-
-  const allEntries = [];
-  const overlayFrames = [];
-
-  for (let i = 0; i < times.length; i++) {
-    const t = times[i];
-    const { buffer: pngBuf } = await captureFrameToBuffer(session, i, t);
-    const elements = await probeTextElements(session, t);
-    const annotated = await annotateFrame(pngBuf, elements);
-    overlayFrames.push({ t, png: annotated });
-    for (const el of elements) allEntries.push({ time: t, ...el });
-  }
-
-  const report = {
-    composition: COMP_DIR,
-    width: WIDTH,
-    height: HEIGHT,
-    duration,
-    samples: times,
-    entries: allEntries,
-    summary: summarize(allEntries),
-  };
-
-  await writeFile(resolve(OUT_DIR, "contrast-report.json"), JSON.stringify(report, null, 2));
-  await writeOverlaySprite(overlayFrames, resolve(OUT_DIR, "contrast-overlay.png"));
-
-  printSummary(report);
-  process.exitCode = report.summary.failAA > 0 ? 1 : 0;
-} finally {
-  await closeCaptureSession(session).catch(() => {});
-  server.close();
-}
-
-// ─── DOM probe (runs in the page) ────────────────────────────────────────────
-
-async function probeTextElements(session, _t) {
-  // `session.page` is the Puppeteer Page owned by the capture session.
-  // We pass a pure function to `evaluate`: it walks the DOM and returns
-  // enough info for us to compute a ratio in Node using the frame buffer.
-  return await session.page.evaluate(() => {
-    /** @type {Array<{selector: string, text: string, fg: [number,number,number,number], fontSize: number, fontWeight: number, bbox: {x:number,y:number,w:number,h:number}}>} */
-    const out = [];
-    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
-    const parseColor = (c) => {
-      const m = c.match(/rgba?\(([^)]+)\)/);
-      if (!m) return [0, 0, 0, 1];
-      const parts = m[1].split(",").map((s) => parseFloat(s.trim()));
-      return [parts[0], parts[1], parts[2], parts[3] ?? 1];
-    };
-    const selectorOf = (el) => {
-      if (el.id) return `#${el.id}`;
-      const cls = [...el.classList].slice(0, 2).join(".");
-      return cls ? `${el.tagName.toLowerCase()}.${cls}` : el.tagName.toLowerCase();
-    };
-    let el;
-    while ((el = walker.nextNode())) {
-      // must have direct text
-      const direct = [...el.childNodes].some(
-        (n) => n.nodeType === 3 && n.textContent.trim().length,
-      );
-      if (!direct) continue;
-      const cs = getComputedStyle(el);
-      if (cs.visibility === "hidden" || cs.display === "none") continue;
-      if (parseFloat(cs.opacity) <= 0.01) continue;
-      const rect = el.getBoundingClientRect();
-      if (rect.width < 8 || rect.height < 8) continue;
-      out.push({
-        selector: selectorOf(el),
-        text: el.textContent.trim().slice(0, 60),
-        fg: parseColor(cs.color),
-        fontSize: parseFloat(cs.fontSize),
-        fontWeight: Number(cs.fontWeight) || 400,
-        bbox: { x: rect.x, y: rect.y, w: rect.width, h: rect.height },
-      });
-    }
-    return out;
-  });
-}
-
-// ─── Pixel sampling + WCAG math ──────────────────────────────────────────────
-
-async function annotateFrame(pngBuf, elements) {
-  const img = sharp(pngBuf);
-  const meta = await img.metadata();
-  const { width, height } = meta;
-  const raw = await img.ensureAlpha().raw().toBuffer();
-  const channels = 4;
-
-  const measured = [];
-  for (const el of elements) {
-    const bg = sampleRingMedian(raw, width, height, channels, el.bbox);
-    const fg = compositeOver(el.fg, bg); // flatten any alpha against measured bg
-    const ratio = wcagRatio(fg, bg);
-    const large = isLargeText(el.fontSize, el.fontWeight);
-    el.bg = bg;
-    el.ratio = +ratio.toFixed(2);
-    el.wcagAA = large ? ratio >= 3 : ratio >= 4.5;
-    el.wcagAALarge = ratio >= 3;
-    el.wcagAAA = large ? ratio >= 4.5 : ratio >= 7;
-    measured.push(el);
-  }
-
-  // Draw boxes + ratio labels as an SVG overlay (sharp composite).
-  const svg = buildOverlaySVG(measured, width, height);
-  return await sharp(pngBuf)
-    .composite([{ input: Buffer.from(svg), top: 0, left: 0 }])
-    .png()
-    .toBuffer();
-}
-
-function sampleRingMedian(raw, width, height, channels, bbox) {
-  // 4-px ring immediately outside the element bbox. Median of each channel.
-  const r = [],
-    g = [],
-    b = [];
-  const x0 = Math.max(0, Math.floor(bbox.x) - 4);
-  const x1 = Math.min(width - 1, Math.ceil(bbox.x + bbox.w) + 4);
-  const y0 = Math.max(0, Math.floor(bbox.y) - 4);
-  const y1 = Math.min(height - 1, Math.ceil(bbox.y + bbox.h) + 4);
-  const pushPixel = (x, y) => {
-    const i = (y * width + x) * channels;
-    r.push(raw[i]);
-    g.push(raw[i + 1]);
-    b.push(raw[i + 2]);
-  };
-  for (let x = x0; x <= x1; x++) {
-    pushPixel(x, y0);
-    pushPixel(x, y1);
-  }
-  for (let y = y0; y <= y1; y++) {
-    pushPixel(x0, y);
-    pushPixel(x1, y);
-  }
-  return [median(r), median(g), median(b), 1];
-}
-
-function median(arr) {
-  const s = [...arr].sort((a, b) => a - b);
-  return s[Math.floor(s.length / 2)];
-}
-
-function compositeOver([fr, fg, fb, fa], [br, bg, bb]) {
-  return [
-    Math.round(fr * fa + br * (1 - fa)),
-    Math.round(fg * fa + bg * (1 - fa)),
-    Math.round(fb * fa + bb * (1 - fa)),
-    1,
-  ];
-}
-
-function relLum([r, g, b]) {
-  const ch = (v) => {
-    const s = v / 255;
-    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-  };
-  return 0.2126 * ch(r) + 0.7152 * ch(g) + 0.0722 * ch(b);
-}
-
-function wcagRatio(a, b) {
-  const la = relLum(a);
-  const lb = relLum(b);
-  const [L1, L2] = la > lb ? [la, lb] : [lb, la];
-  return (L1 + 0.05) / (L2 + 0.05);
-}
-
-function isLargeText(fontSize, fontWeight) {
-  return fontSize >= 24 || (fontSize >= 19 && fontWeight >= 700);
-}
-
-// ─── Overlay rendering ───────────────────────────────────────────────────────
-
-function buildOverlaySVG(elements, w, h) {
-  const rects = elements
-    .map((el) => {
-      const color = !el.wcagAA ? "#ff00aa" : !el.wcagAAA ? "#ffcc00" : "#00e08a";
-      const { x, y, w: bw, h: bh } = el.bbox;
-      return `
-        <rect x="${x}" y="${y}" width="${bw}" height="${bh}"
-              fill="none" stroke="${color}" stroke-width="3"/>
-        <rect x="${x}" y="${y - 18}" width="${48}" height="16" fill="${color}"/>
-        <text x="${x + 4}" y="${y - 5}" font-family="monospace" font-size="12" fill="#000">
-          ${el.ratio.toFixed(1)}:1
-        </text>`;
-    })
-    .join("");
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">${rects}</svg>`;
-}
-
-async function writeOverlaySprite(frames, outPath) {
-  if (!frames.length) return;
-  const cols = Math.min(frames.length, 5);
-  const rows = Math.ceil(frames.length / cols);
-  const { width, height } = await sharp(frames[0].png).metadata();
-  const scale = 0.25;
-  const cellW = Math.round(width * scale);
-  const cellH = Math.round(height * scale);
-
-  const cells = await Promise.all(
-    frames.map(async (f) => ({
-      input: await sharp(f.png).resize(cellW, cellH).png().toBuffer(),
-      time: f.t,
-    })),
-  );
-
-  const composites = cells.map((c, i) => ({
-    input: c.input,
-    top: Math.floor(i / cols) * cellH,
-    left: (i % cols) * cellW,
-  }));
-
-  await sharp({
-    create: {
-      width: cols * cellW,
-      height: rows * cellH,
-      channels: 3,
-      background: { r: 16, g: 16, b: 20 },
-    },
-  })
-    .composite(composites)
-    .png()
-    .toFile(outPath);
-}
-
-// ─── Summary ────────────────────────────────────────────────────────────────
-
-function summarize(entries) {
-  const total = entries.length;
-  const failAA = entries.filter((e) => !e.wcagAA).length;
-  const passAAonly = entries.filter((e) => e.wcagAA && !e.wcagAAA).length;
-  const passAAA = entries.filter((e) => e.wcagAAA).length;
-  return { total, failAA, passAAonly, passAAA };
-}
-
-function printSummary({ summary, entries }) {
-  const { total, failAA, passAAonly, passAAA } = summary;
-  console.log(`\nContrast report: ${total} text-element samples`);
-  console.log(`  fail WCAG AA:     ${failAA}`);
-  console.log(`  pass AA, not AAA: ${passAAonly}`);
-  console.log(`  pass AAA:         ${passAAA}`);
-  if (failAA) {
-    console.log("\nFailures:");
-    for (const e of entries.filter((x) => !x.wcagAA)) {
-      console.log(`  t=${e.time}s  ${e.selector.padEnd(24)}  ${e.ratio.toFixed(2)}:1  "${e.text}"`);
-    }
-  }
-}
-
-// ─── Utilities ──────────────────────────────────────────────────────────────
-
-function parseArgs(argv) {
-  const out = {};
-  let positional = 0;
-  for (let i = 0; i < argv.length; i++) {
-    const a = argv[i];
-    if (a.startsWith("--")) {
-      const k = a.slice(2);
-      const v = argv[i + 1]?.startsWith("--") ? true : argv[++i];
-      out[k] = v;
-    } else if (positional === 0) {
-      out.composition = a;
-      positional++;
-    }
-  }
-  return out;
-}
-
-function die(msg) {
-  console.error(`contrast-report: ${msg}`);
-  process.exit(2);
-}

package/skills/hyperframes/visual-styles.md

@@ -1,211 +0,0 @@
-# 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."
-
-**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.
-
-## Quick Reference
-
-| Style           | Mood                  | Best for                           | Primary 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                  |
-| Deconstructed   | Industrial, raw       | Tech launches, security, punk      | Glitch or Whip Pan                |
-| Maximalist Type | Loud, kinetic         | Big announcements, launches        | Ridged Burn                       |
-| Data Drift      | Futuristic, immersive | AI, ML, cutting-edge tech          | Gravitational Lens or Domain Warp |
-| Soft Signal     | Intimate, warm        | Wellness, personal stories, brand  | Thermal Distortion                |
-| Folk Frequency  | Cultural, vivid       | Consumer apps, food, communities   | Swirl Vortex or Ripple Waves      |
-| Shadow Cut      | Dark, cinematic       | Dramatic reveals, security, exposé | Domain Warp                       |
-
----
-
-## 1. Swiss Pulse — Josef Müller-Brockmann
-
-**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.
-```
-
----
-
-## 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.
-```
-
----
-
-## 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.
-```
-
----
-
-## 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.
-```
-
----
-
-## 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.
-```
-
----
-
-## 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.
-```
-
----
-
-## 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.
-```
-
----
-
-## 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.
-```
-
----
-
-## Mood → Style Guide
-
-| If the content feels...            | Use...          |
-| ---------------------------------- | --------------- |
-| Data-driven, analytical, technical | Swiss Pulse     |
-| Premium, enterprise, luxury        | Velvet Standard |
-| Raw, punk, aggressive, rebellious  | Deconstructed   |
-| Hype, loud, high-energy launch     | Maximalist Type |
-| AI, ML, speculative, futuristic    | Data Drift      |
-| Human, warm, personal, wellness    | Soft Signal     |
-| Cultural, fun, consumer, festive   | Folk Frequency  |
-| Dark, dramatic, intense, cinematic | Shadow Cut      |
-
----
-
-## Creating Custom Styles
-
-These 8 styles are examples — not constraints. Create your own by:
-
-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
-
-The pattern: **named style → palette → typography → motion rules → transition → avoids.**

package/skills/website-to-hyperframes/SKILL.md

@@ -1,125 +0,0 @@
----
-name: website-to-hyperframes
-description: "Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says capture this site, turn this into a video, make a promo from my site, (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use. 中文：把网址变成 HyperFrames 视频（产品宣传/广告/产品导览）时使用。"
-compatibility: Requires Node.js >= 22 and FFmpeg on PATH; the 7-step pipeline drives `npx hyperframes`.
-allowed-tools: Bash
----
-
-# Website to HyperFrames
-
-Capture a website, then produce a professional video from it.
-
-Users say things like:
-
-- "Capture https://... and make me a 25-second product launch video"
-- "Turn this website into a 15-second social ad for Instagram"
-- "Create a 30-second product tour from https://..."
-
-The workflow has 7 steps. Each produces an artifact that gates the next.
-
----
-
-## Step 1: Capture & Understand
-
-**Read:** [references/step-1-capture.md](references/step-1-capture.md)
-
-Run the capture, read the extracted data, and build a working summary using the write-down-and-forget method.
-
-**Gate:** Print your site summary (name, top colors, fonts, key assets, one-sentence vibe).
-
----
-
-## Step 2: Write DESIGN.md
-
-**Read:** [references/step-2-design.md](references/step-2-design.md)
-
-Write a simple brand reference for the captured website. 6 sections, ~90 lines. This is a cheat sheet, not the creative plan — that comes in Step 4.
-
-**Gate:** `DESIGN.md` exists in the project directory.
-
----
-
-## Step 3: Write SCRIPT
-
-**Read:** [references/step-3-script.md](references/step-3-script.md)
-
-Write the narration script. The story backbone. Scene durations come from the narration, not from guessing.
-
-**Gate:** `SCRIPT.md` exists in the project directory.
-
----
-
-## Step 4: Write STORYBOARD
-
-**Read:** [references/step-4-storyboard.md](references/step-4-storyboard.md)
-
-Write per-beat creative direction: mood, camera, animations, transitions, assets, depth layers, SFX. This is the creative north star — the document the engineer follows to build each composition.
-
-**Gate:** `STORYBOARD.md` exists with beat-by-beat direction and an asset audit table.
-
----
-
-## Step 5: Generate VO + Map Timing
-
-**Read:** [references/step-5-vo.md](references/step-5-vo.md)
-
-Generate TTS audio, transcribe for word-level timestamps, and map timestamps to beats. Update STORYBOARD.md with real durations.
-
-**Gate:** `narration.wav` (or .mp3) + `transcript.json` exist. Beat timings in STORYBOARD.md updated.
-
----
-
-## Step 6: Build Compositions
-
-**Read:** The `hyperframes` skill (load it — every rule matters)
-**Read:** [references/step-6-build.md](references/step-6-build.md)
-
-Build each composition following the storyboard. After each one: self-review for layout, asset placement, and animation quality.
-
-**Gate:** Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.
-
----
-
-## Step 7: Validate & Deliver
-
-**Read:** [references/step-7-validate.md](references/step-7-validate.md)
-
-Lint, validate, snapshot, preview. Deliver the localhost Studio project URL
-(`http://localhost:<port>/#project/<project-name>`) to the user first — only
-render to MP4 on explicit request. Do not treat `index.html` as the project
-handoff link; it is source-code context only.
-
-**Gate:** `npx hyperframes lint` and `npx hyperframes validate` pass with zero errors, and the final response includes the active Studio project URL.
-
----
-
-## Quick Reference
-
-### Video Types
-
-| Type                  | Duration | Beats | Narration              |
-| --------------------- | -------- | ----- | ---------------------- |
-| Social ad (IG/TikTok) | 10-15s   | 3-4   | Optional hook sentence |
-| Product demo          | 30-60s   | 5-8   | Full narration         |
-| Feature announcement  | 15-30s   | 3-5   | Full narration         |
-| Brand reel            | 20-45s   | 4-6   | Optional, music focus  |
-| Launch teaser         | 10-20s   | 2-4   | Minimal, high energy   |
-
-### Format
-
-- **Landscape**: 1920x1080 (default)
-- **Portrait**: 1080x1920 (Instagram Stories, TikTok)
-- **Square**: 1080x1080 (Instagram feed)
-
-### Reference Files
-
-| File                                                    | When to read                                                                                                                                                   |
-| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [step-1-capture.md](references/step-1-capture.md)       | Step 1 — reading captured data                                                                                                                                 |
-| [step-2-design.md](references/step-2-design.md)         | Step 2 — writing DESIGN.md                                                                                                                                     |
-| [step-3-script.md](references/step-3-script.md)         | Step 3 — writing the narration script                                                                                                                          |
-| [step-4-storyboard.md](references/step-4-storyboard.md) | Step 4 — per-beat creative direction                                                                                                                           |
-| [step-5-vo.md](references/step-5-vo.md)                 | Step 5 — TTS, transcription, timing                                                                                                                            |
-| [step-6-build.md](references/step-6-build.md)           | Step 6 — building compositions with self-review                                                                                                                |
-| [step-7-validate.md](references/step-7-validate.md)     | Step 7 — lint, validate, snapshot, preview                                                                                                                     |
-| [techniques.md](references/techniques.md)               | Steps 4 & 6 — 10 visual techniques with code patterns (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typing, variable fonts, MotionPath, transitions) |