dsh-hyperframes 0.1.0

package/skills/hyperframes-registry/references/wiring-components.md

@@ -0,0 +1,77 @@
+# Wiring Components
+
+Components are effect snippets — HTML, CSS, and optionally JS that you merge directly into an existing composition. Unlike blocks, components have no standalone timeline; they participate in the host composition's timeline.
+
+## General process
+
+1. Run `hyperframes add <component-name>`
+2. Open the installed file (e.g., `compositions/components/grain-overlay.html`)
+3. Read the comment header for usage instructions
+4. Copy the parts into your host composition:
+   - **HTML elements** — inside your `<div data-composition-id="...">`
+   - **CSS styles** — into your composition's `<style>` block
+   - **JS setup** — into your composition's `<script>`, before your timeline code
+   - **Timeline calls** — into your GSAP timeline (if the component exposes them)
+
+## Example: grain-overlay (CSS-only, no timeline integration)
+
+```html
+<!-- Paste the overlay div into your composition -->
+<div
+  id="grain-overlay"
+  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100;"
+>
+  <div class="grain-texture"></div>
+</div>
+```
+
+Then paste the CSS keyframes and `.grain-texture` rule into your styles. No GSAP timeline calls needed — the grain animates via CSS `@keyframes`.
+
+## Example: shimmer-sweep (needs timeline integration)
+
+Wrap target elements, paste CSS and JS, then drive the sweep from your timeline:
+
+```js
+tl.fromTo(
+  ".shimmer-sweep-target",
+  {
+    "--shimmer-pos": "-20%",
+  },
+  {
+    "--shimmer-pos": "120%",
+    duration: 1.2,
+    ease: "power2.inOut",
+    stagger: 0.15,
+  },
+  2.0,
+);
+```
+
+## Example: grid-pixelate-wipe (scene transition)
+
+Paste the overlay HTML and CSS, then drive `.grid-cell` scale in your timeline:
+
+```js
+// Cover screen
+tl.to(
+  ".grid-cell",
+  { scale: 1, duration: 0.6, stagger: { amount: 0.6, from: "center" }, ease: "power2.inOut" },
+  5.0,
+);
+// Swap scenes
+tl.set("#scene-a", { opacity: 0 }, 5.6);
+tl.set("#scene-b", { opacity: 1 }, 5.6);
+// Reveal
+tl.to(
+  ".grid-cell",
+  { scale: 0, duration: 0.6, stagger: { amount: 0.6, from: "edges" }, ease: "power2.inOut" },
+  5.6,
+);
+```
+
+## Key principles
+
+- Components inherit the host composition's dimensions and duration
+- Place component HTML at the appropriate z-index relative to your content
+- Read the comment header in each snippet for customizable values
+- Run `hyperframes lint` after wiring to catch structural issues

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

@@ -0,0 +1,125 @@
+---
+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) |

package/skills/website-to-hyperframes/references/step-1-capture.md

@@ -0,0 +1,74 @@
+# Step 1: Capture & Understand
+
+## Run the capture
+
+Create a project directory for your video, then capture the website into a `capture/` subfolder within it:
+
+```bash
+npx hyperframes capture <URL> -o <project-dir>/capture
+```
+
+Example: `npx hyperframes capture https://stripe.com -o videos/stripe-launch/capture`
+
+Keeping the capture artifacts (`screenshots/`, `assets/`, `extracted/`, `AGENTS.md`) in a dedicated `capture/` subfolder keeps them isolated from the later build files (`SCRIPT.md`, `STORYBOARD.md`, `DESIGN.md`, `compositions/`, `index.html`, `narration.wav`, `transcript.json`, `renders/`, `snapshots/`), which all live at `<project-dir>/` root.
+
+For exploratory captures that aren't becoming a video yet, `-o captures/<name>` at the repo root is fine — the isolation convention only matters when you're building a video on top of the capture.
+
+No API keys required. The capture extracts design tokens, screenshots, fonts, and assets with DOM-context descriptions automatically.
+
+**Optional:** Set `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) in a `.env` file at the repo root for richer AI-powered image descriptions via Gemini 3.1 Flash Lite vision (~$0.001/image).
+
+Wait for it to complete. Print how many screenshots, assets, sections, and fonts were extracted.
+
+## Read and summarize
+
+Read each file below. After reading each one, **write a 1-2 sentence summary** of what you learned. These summaries are your working memory — the raw file content may be cleared from context later.
+
+### Must read (do not skip)
+
+1. **View the scroll screenshots** — viewport-sized captures covering the full page height (the number depends on the page length). Start with:
+   - `capture/screenshots/scroll-000.png` — the hero section at full 1920x1080 resolution. This is the most important image. Describe: is the background light or dark? What's the dominant visual element? What colors jump out?
+   - Then scan through the rest to see the full page. Each screenshot overlaps the previous by ~30%.
+
+   After viewing them, write 3-4 sentences describing the site's visual mood, layout patterns, color strategy, and overall feel.
+
+2. **`capture/extracted/tokens.json`** — Note the top 5-7 colors (HEX), all font families with their weights (e.g. `Inter (400,700)` or `Sohne (100-900 variable)`), number of sections, and number of headings/CTAs.
+
+3. **`capture/extracted/visible-text.txt`** — Each line is prefixed with the HTML tag: `[h1] Heading`, `[p] Body text`, `[a] Link text`. Use these tags to understand hierarchy — headings are key messages, paragraphs are supporting copy. Strip the `[tag]` prefix when quoting text in the script.
+
+4. **`capture/extracted/asset-descriptions.md`** — One-line-per-file summary of all downloaded assets. Note which assets are most visually striking or useful for video (hero images, logos, product screenshots).
+
+### Read if they exist
+
+5. **`capture/extracted/animations.json`** — Note if the site uses scroll-triggered animations, marquees, canvas/WebGL, or named CSS animations.
+
+6. **`capture/extracted/lottie-manifest.json`** — View each preview image at `capture/assets/lottie/previews/` to see what the animations look like.
+
+7. **`capture/extracted/video-manifest.json`** — View each preview at `capture/assets/videos/previews/` to see what each video shows.
+
+8. **`capture/extracted/shaders.json`** — If present, this contains the actual GLSL shader code that powers the site's WebGL visual effects (gradient waves, particle systems, noise fields). Read the fragment shaders to extract: color values used in gradients, noise algorithms, blend functions. You can recreate similar effects in your compositions using Canvas 2D or by embedding the shader patterns with a `<canvas>` + WebGL context. See the Canvas 2D and procedural art patterns in `techniques.md`.
+
+### On-demand (read when building scenes)
+
+9. **Individual images in `capture/assets/`** — Use `capture/extracted/asset-descriptions.md` as your index. View specific images when you need them for a beat.
+
+10. **`capture/extracted/assets-catalog.json`** — Use to find remote URLs when you need an asset that wasn't downloaded.
+
+### For rich captures (30+ images)
+
+Launch a sub-agent to view all images and SVGs:
+
+> "Read every image in capture/assets/ and every SVG in capture/assets/svgs/. For each, write one line: filename — what it shows, dominant colors, approximate size. Return the complete catalog."
+
+Use the sub-agent's catalog as your asset reference for the rest of the workflow.
+
+## Gate
+
+Print your site summary before proceeding to Step 2:
+
+- **Site:** [name]
+- **Colors:** [top 3-5 HEX values with roles]
+- **Fonts:** [font families]
+- **Sections:** [count] sections, [count] headings, [count] CTAs
+- **Key assets:** [3-5 most useful assets for video]
+- **Vibe:** [one sentence describing the visual identity]

package/skills/website-to-hyperframes/references/step-2-design.md

@@ -0,0 +1,178 @@
+# Step 2: Write DESIGN.md
+
+DESIGN.md is a **brand cheat sheet** for the captured website. It encodes the visual identity so you can reference exact colors, fonts, and patterns while writing the storyboard and compositions.
+
+DESIGN.md is NOT the creative plan. The STORYBOARD (Step 4) drives creative direction. DESIGN.md is a reference you consult, not a document you follow slavishly.
+
+## The 6 Sections
+
+### `## Overview`
+
+3-4 sentences. Describe the visual identity factually: layout patterns (bento grid, logo wall, hero section), color strategy, typography tone, overall feel. Be precise, not poetic.
+
+### `## Colors`
+
+5-10 key colors with HEX values from `capture/extracted/tokens.json` and their roles:
+
+```
+- **Primary Surface**: `#020204` — deep black background
+- **Primary Content**: `#FFFFFF` — high-purity white for text and borders
+- **Accent Warm**: `#FB923C` — orange for CTAs and highlights
+```
+
+Include semantic colors if the site uses color to differentiate product areas.
+
+### `## Typography`
+
+Font families with weights, roles, and any distinctive usage:
+
+```
+- **Serif**: Cormorant Garamond (Italic). Major headings, brand identity.
+- **Monospace**: Geist Mono. Subheaders, labels, terminal readouts. High tracking (0.1-0.3em), all-caps.
+- **Sans-Serif**: Inter. Body copy, interface elements. Small sizes (9-14px).
+```
+
+Include sizing hierarchy if notable (hero: 64px, section: 32px, body: 16px).
+
+### `## Elevation`
+
+One paragraph on depth strategy: Does the site use borders, shadows, glassmorphism, or flat color shifts? Reference specific patterns (e.g., "1px borders at white/10 opacity" or "layered backdrop-blur with thin borders").
+
+### `## Components`
+
+Name every notable UI component you see in the screenshot. Be specific:
+
+- "Cinematic Accordion" not "Cards"
+- "Logo Marquee" not "Scrolling section"
+- "Glass Cards with grain overlay" not "Content containers"
+
+For each, note the distinctive visual treatment (border-radius, spacing, hover behavior).
+
+### `## Do's and Don'ts`
+
+3-5 rules each, derived from what the site actually does and doesn't do:
+
+```
+### Do's
+- Use thin subtle borders (white/10) to separate sections
+- Keep imagery desaturated with dark gradients for text readability
+
+### Don'ts
+- Do not use bright solid background colors — stay in "The Void"
+- Do not use standard drop shadows — use radial glow or bloom effects
+- Do not use sharp high-speed animations — all motion should be fluid
+```
+
+## Rules
+
+- Use **exact HEX values** from `capture/extracted/tokens.json`. Do not approximate.
+- Name components by what you see in the screenshot, not generic terms.
+- Keep it under 100 lines. This is a cheat sheet, not a design system document.
+- No "Style Prompt" section — the storyboard handles creative direction.
+- No "Assets" section — `capture/extracted/asset-descriptions.md` already covers this.
+- No "Motion" section — the storyboard specifies motion per-beat.
+
+## Example
+
+This is a real DESIGN.md from a production capture (Soulscape 2026):
+
+```markdown
+# Design System
+
+## Overview
+
+Soulscape 2026 is a cinematic, "high-signal" digital experience that positions itself as the vanguard of AI filmmaking. The visual personality is dark, technical, and premium, characterized by high-contrast "Flare" on "Void" (white on black) aesthetics. The layout is dense but organized, utilizing heavy horizontal layering and border-defined sections to evoke a wide-screen cinematic feel. Motion is a core tenet, with atmospheric grain overlays, shifting light leaks, and slow-moving marquees creating constant, breathing texture.
+
+## Colors
+
+- **Primary Surface**: `#020204` (Void) - Deep black for the entire background.
+- **Primary Content**: `#FFFFFF` (Flare) - High-purity white for typography and primary borders.
+- **Accent 1 (Warm)**: `#FB923C` - Orange for industry/executive tiers and primary CTAs.
+- **Accent 2 (Cool)**: `#60A5FA` - Blue for creative voices and summit-focused components.
+- **Subtle Overlays**: `rgba(255, 255, 255, 0.02)` to `0.08` for glass backgrounds.
+
+## Typography
+
+- **Serif**: Cormorant Garamond (Italic). Major headings and "Soul" brand identity. Classical cinematic contrast.
+- **Monospace**: Geist Mono. Subheaders, labels, terminal readouts. High tracking (0.1-0.3em), all-caps.
+- **Sans-Serif**: Inter. Body copy and interface elements. Small sizes (9-14px).
+
+## Elevation
+
+- **Glassmorphism**: Components use backdrop-filter blur(10px) with thin borders (1px solid rgba(255, 255, 255, 0.08)).
+- **Layering**: Depth via fixed global grain-overlay and localized light-leak gradients rather than box-shadows.
+- **Interaction**: Hover triggers subtle translateY(-5px) and increased border opacity.
+
+## Components
+
+- **Cinematic Accordion**: Expanding horizontal/vertical card system where panels expand from compressed state to reveal full-bleed imagery and large serif typography.
+- **HUD Explorer**: Floating mobile navigation trigger styled as a "Lens" with pulsing glow and terminal readouts.
+- **Slow Marquees**: Continuous horizontal tickers for partner logos and veteran listings.
+- **Glass Cards**: Content containers with subtle gradients, rounded corners (2.5rem), and high-contrast iconography.
+- **Grain & Flicker**: Global CSS noise filters and holographic flicker animations on UI labels.
+
+## Do's and Don'ts
+
+### Do's
+
+- Use thin subtle borders (white/10) to separate sections rather than solid color changes.
+- Maintain high letter-spacing on all Geist Mono labels.
+- Use serif italics for emotional or visionary statements.
+- Keep imagery desaturated or stylized with dark gradients for readability.
+
+### Don'ts
+
+- Do not use bright solid background colors — the page must remain in "The Void."
+- Do not use standard drop shadows — use radial glow or bloom effects instead.
+- Do not use sharp high-speed animations — all motion should be fluid and breathing.
+```
+
+Here is a contrasting example from a light, corporate brand to show the range:
+
+```markdown
+# Design System
+
+## Overview
+
+Stripe's visual personality is defined by high-precision, technical sophistication, and a fluid, forward-moving motion language. The layout is dense but expertly balanced, utilizing a "canary" grid system that favors high-density data visualizations and modular bento-style layouts. The tone is authoritative and innovative, characterized by smooth CSS animations, complex SVG graphics that mimic UI dashboards, and the iconic "hero wave" background that uses layered gradients to create depth and movement.
+
+## Colors
+
+- **Brand Primary**: #635bff (The signature Stripe Blurple)
+- **Text Solid**: #0a2540 (Deep navy for primary headings)
+- **Text Soft**: #424770 (Subdued slate for descriptions and secondary text)
+- **Surface Background**: #ffffff (White primary surface)
+- **Surface Subdued**: #f6f9fc (Light gray for section contrast)
+- **Accent Green**: #212d45 (Used in high-converting success UI graphics)
+- **Accent Orange**: #ff6118 (Used for specific product highlights like Connect)
+- **Accent Yellow**: #fc5 (Warm highlight used in bento cards)
+- **Border Quiet**: #e6ebf1 (Soft borders for cards and dividers)
+
+## Typography
+
+- **Primary Font**: Sohne (sohne-var), a custom neo-grotesque that balances technical precision with approachability. Used across all headers and body copy.
+- **Monospace Font**: SourceCodePro-Medium, specifically for code snippets, tabular data, and technical UI identifiers.
+- **Heading Scale**: hds-heading--xxl ~3rem, hds-heading--lg ~1.5rem, hds-heading--md ~1.125rem
+- **Body Scale**: Standard body text centers around 1rem (16px) with a line-height of 1.5-1.6.
+
+## Elevation
+
+- **Shadows**: Multi-layered shadow system (e.g., 0 30px 60px -12px rgba(50,50,93,0.25)). Shadows are diffused and deep for a floating effect.
+- **Borders**: Heavy use of 1px solid borders to define bento grid boundaries instead of shadows in flat sections.
+- **Glass/Layering**: Navigation overlays use backdrop-filter blur(5px) with translucent white background.
+
+## Components
+
+- **Navigation Popover**: Animated dropdown spanning page margin with multi-column bento layouts.
+- **Bento Cards**: Interactive grid-aligned containers with gradient hover effects that follow the cursor.
+- **Customer Marquee**: Seamless horizontal scrolling loop of flat-colored SVG logos.
+- **UI Graphics**: Custom HTML/CSS representations of the Stripe Dashboard with tabular numbers and mini-charts.
+- **CTA Buttons**: Rounded-pill shapes with subtle scale transforms on hover.
+
+## Do's and Don'ts
+
+- **Do**: Use smooth cubic-bezier(.25, 1, .5, 1) transitions for all hover states and entering animations.
+- **Do**: Maintain strict vertical alignment between iconography and text labels.
+- **Don't**: Use sharp-cornered cards; always apply a border-radius.
+- **Don't**: Over-saturate backgrounds; stick to white or #f6f9fc and let brand assets provide color pop.
+```

package/skills/website-to-hyperframes/references/step-3-script.md

@@ -0,0 +1,96 @@
+# Step 3: Write the Narration Script
+
+**Before writing, re-read DESIGN.md** — specifically the Overview and Components sections. The script should reference real product features, real stats, and real components that the website highlights. Use exact numbers from `capture/extracted/visible-text.txt`.
+
+The script is the backbone. Everything downstream — scene durations, animation timing, beat pacing — comes from the narration. Write it before the storyboard.
+
+Save as `SCRIPT.md` in the project directory.
+
+## Pacing
+
+- **2.5 words per second** is natural speaking pace
+- 15s = ~37 words. 30s = ~75 words. 60s = ~150 words
+- Leave room for pauses. Silence between sentences is a feature, not dead air
+- The script should feel SHORTER than the video — visual breathing room matters
+
+## Tone
+
+Write like a person, not a brochure:
+
+- Use contractions: "it's", "you'll", "that's", "we've"
+- Vary sentence length — short punchy phrases mixed with longer flowing ones
+- Read it out loud. If it sounds robotic, rewrite it
+- Avoid jargon unless the audience expects it
+
+## Number Pronunciation
+
+Write what you want the voice to say. TTS reads literally.
+
+| On the website | Write in script as                |
+| -------------- | --------------------------------- |
+| 135+           | more than one hundred thirty five |
+| $1.9T          | nearly two trillion dollars       |
+| 99.999%        | ninety nine point nine percent    |
+| 200M+          | over two hundred million          |
+| 10x            | ten times                         |
+| API            | A P I                             |
+| stripe.com     | stripe dot com                    |
+
+The visual can show the exact figure while the voice rounds it.
+
+## Structure
+
+For product videos from a website capture:
+
+1. **Hook** — what's surprising or impressive about this product? A bold claim, a provocative question, a contrast, or a striking number. This is the opening line. **Vary the hook type** — don't default to a stat every time.
+2. **Story** — what does the product do? Who uses it? Keep it concrete.
+3. **Proof** — stats, customer names, social proof. Real numbers from the website.
+4. **CTA** — what should the viewer do? "Start building at stripe dot com."
+
+Not every video needs all four. A 15-second social ad might be Hook + Proof + CTA. A 60-second product tour uses all four with more Story.
+
+## The Opening Line
+
+The most important sentence in the video. It must create tension, curiosity, or surprise in the first 3 seconds.
+
+Patterns that work:
+
+- **A bold claim**: "The financial infrastructure that powers the internet economy."
+- **A question that provokes**: "What if your database could think?"
+- **A contrast**: "Your AI agent already knows how to make videos. It just needs the right format."
+- **A number that shocks**: "Nearly two trillion dollars." (Use sparingly — not every video should open with a stat.)
+
+If the opening is generic ("Welcome to Stripe" / "Introducing our product"), start over.
+
+## Example
+
+From a 62-second product launch video (team reference):
+
+```
+Your AI agent already knows how to make videos.
+It just needs the right format.
+
+This is Hyperframes. An open source framework. HTML in, video out.
+
+A div is a keyframe. Data attributes are your timeline.
+CSS is your look. G-Sap is your animation engine.
+
+Anything a browser can render can be a frame in your video.
+
+CSS animations. G-Sap. Lottie. Shaders. Three.js.
+
+Drop in music, sound effects, footage — it all composes together.
+
+No new framework for the agent to learn.
+Just HTML.
+
+The agent writes it. The renderer captures every frame as MP4.
+It's deterministic. Identical outputs, every time.
+
+Give your agent the CLI. Tell it what to make.
+Watch it build.
+
+Hyperframes. Go make something.
+```
+
+Note: ~140 words for 62 seconds — that's 2.3 words/sec, leaving room for pauses and visual breathing.