mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
ukimsanovandClaude Opus 4.6
274db7a5ef
- lintMultipleRootCompositions: scan filesystem for HTML files with data-composition-id (was filtering results array — always 1 entry) - lintDuplicateAudioTracks: order-independent attribute extraction, dedup by (src,start,duration,trackIndex), Infinity fallback for missing data-duration (matches runtime behavior) - 10 new tests for both lint rules - docs: explicit skill invocation, remove gsap-skills, fix indentation - Gemini: env override (HYPERFRAMES_GEMINI_MODEL), benchmark data in code comment (49 imgs: 3.1-lite ~507ms/img, 2.5-lite ~230ms/img) - cli.mdx: version-agnostic "Gemini vision" reference Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
228 lines
8.6 KiB
Plaintext
228 lines
8.6 KiB
Plaintext
---
|
||
title: Website to Video
|
||
description: "Capture any website and turn it into a production video with a single prompt."
|
||
---
|
||
|
||
Give your AI agent a URL and a creative direction. It captures the site, extracts the brand identity, writes a script and storyboard, generates voiceover, builds animated compositions, and delivers a renderable video.
|
||
|
||
```
|
||
"Create a 20-second product launch video from https://linear.app.
|
||
Make it feel like an Apple keynote announcement."
|
||
```
|
||
|
||
## Getting Started
|
||
|
||
<Steps>
|
||
<Step title="Install skills">
|
||
Skills teach your AI agent how to capture websites and create HyperFrames compositions. Install once — they persist across sessions.
|
||
|
||
```bash
|
||
npx skills add heygen-com/hyperframes
|
||
```
|
||
|
||
Works with [Claude Code](https://claude.ai/claude-code), [Cursor](https://cursor.sh), [Gemini CLI](https://github.com/google-gemini/gemini-cli), and [Codex CLI](https://github.com/openai/codex).
|
||
</Step>
|
||
<Step title="Prompt your agent">
|
||
Open your agent in any directory and describe the video you want:
|
||
|
||
```
|
||
Create a 25-second product launch video from https://example.com. Bold, cinematic, dark theme energy.
|
||
```
|
||
|
||
The agent loads the skill when they see a URL and a video request, and runs the full pipeline — capture, design, script, storyboard, voiceover, build, validate.
|
||
|
||
<Note>
|
||
Agents also trigger this skill automatically when they see a URL and a video request.
|
||
</Note>
|
||
</Step>
|
||
<Step title="Preview">
|
||
```bash
|
||
npx hyperframes preview
|
||
```
|
||
|
||
Opens the video in your browser. Edits reload automatically.
|
||
</Step>
|
||
<Step title="Render to MP4">
|
||
```bash
|
||
npx hyperframes render --output my-video.mp4
|
||
```
|
||
|
||
```
|
||
✓ Captured 750 frames in 12.4s
|
||
✓ Encoded to my-video.mp4 (25.0s, 1920×1080, 6.8MB)
|
||
```
|
||
</Step>
|
||
</Steps>
|
||
|
||
<Note>
|
||
You don't need to run `npx hyperframes capture` manually — the skill instructs the agent to capture as the first step. The capture command is documented [below](#capture-command) for advanced use.
|
||
</Note>
|
||
|
||
## How the Pipeline Works
|
||
|
||
The skill runs 7 steps. Each produces an artifact that feeds the next:
|
||
|
||
| Step | Output | What happens |
|
||
|------|--------|-------------|
|
||
| **Capture** | `captures/<name>/` | Extract screenshots, design tokens, fonts, assets, animations |
|
||
| **Design** | `DESIGN.md` | Brand reference — colors, typography, do's and don'ts |
|
||
| **Script** | `SCRIPT.md` | Narration text with hook, story, proof, CTA |
|
||
| **Storyboard** | `STORYBOARD.md` | Per-beat creative direction — mood, assets, animations, transitions |
|
||
| **VO + Timing** | `narration.wav` + `transcript.json` | TTS audio with word-level timestamps |
|
||
| **Build** | `compositions/*.html` | Animated HTML compositions, one per beat |
|
||
| **Validate** | Snapshot PNGs | Visual verification before delivery |
|
||
|
||
## Video Types
|
||
|
||
The prompt determines the format. Include a duration and creative direction:
|
||
|
||
| Type | Duration | Example |
|
||
|------|----------|---------|
|
||
| Social ad | 10–15s | _"15-second Instagram reel. Energetic, fast cuts."_ |
|
||
| Product launch | 20–30s | _"25-second product launch. Apple keynote energy."_ |
|
||
| Product tour | 30–60s | _"45-second tour showing the top 3 features."_ |
|
||
| Brand reel | 15–30s | _"20-second brand video. Celebrate the design."_ |
|
||
| Feature announcement | 15–25s | _"Feature announcement highlighting the new AI agents."_ |
|
||
| Teaser | 8–15s | _"10-second teaser. Super minimal. Just the hook."_ |
|
||
|
||
<Tip>
|
||
Creative direction matters more than format. _"Playful, hand-crafted feel"_ or _"dark, developer-focused, show code"_ shapes the storyboard and drives every visual decision the agent makes.
|
||
</Tip>
|
||
|
||
## Enriching Captures with Gemini Vision
|
||
|
||
By default, captures describe assets using DOM context — alt text, nearby headings, CSS classes. Add a [Gemini API key](https://aistudio.google.com/apikey) for richer AI-powered descriptions using vision.
|
||
|
||
Create a `.env` file in your project root:
|
||
|
||
```bash
|
||
echo "GEMINI_API_KEY=your-key-here" > .env
|
||
```
|
||
|
||
<Tabs>
|
||
<Tab title="Without Gemini">
|
||
```
|
||
- hero-bg.png — 582KB, section: "Hero", above fold
|
||
```
|
||
The agent knows the file exists and where it was on the page, but not what it looks like.
|
||
</Tab>
|
||
<Tab title="With Gemini">
|
||
```
|
||
- hero-bg.png — 582KB, A gradient wave in purple and blue sweeps
|
||
across a dark background, creating an aurora-like effect.
|
||
```
|
||
The agent knows what the image actually shows, enabling better creative decisions in the storyboard.
|
||
</Tab>
|
||
</Tabs>
|
||
|
||
| Tier | Rate limit | Cost per image |
|
||
|------|-----------|----------------|
|
||
| Free | 5 RPM | Free |
|
||
| Paid | 2,000 RPM | ~$0.001 |
|
||
|
||
A typical capture with 40 images costs about **$0.04** on the paid tier.
|
||
|
||
## Capture Command
|
||
|
||
The skill runs capture automatically, but you can run it directly for pre-caching, debugging, or using the data outside of video production.
|
||
|
||
```bash
|
||
npx hyperframes capture https://stripe.com
|
||
```
|
||
|
||
```
|
||
◇ Captured Stripe | Financial Infrastructure → captures/stripe-com
|
||
|
||
Screenshots: 12
|
||
Assets: 45
|
||
Sections: 15
|
||
Fonts: sohne-var
|
||
```
|
||
|
||
| Flag | Default | Description |
|
||
|------|---------|-------------|
|
||
| `-o, --output` | `captures/<hostname>` | Output directory |
|
||
| `--timeout` | `120000` | Page load timeout in ms |
|
||
| `--skip-assets` | `false` | Skip downloading images and fonts |
|
||
| `--max-screenshots` | `24` | Maximum screenshot count |
|
||
| `--json` | `false` | Output structured JSON for programmatic use |
|
||
|
||
### What Gets Captured
|
||
|
||
| Data | Description |
|
||
|------|-------------|
|
||
| **Screenshots** | Viewport captures at every scroll depth — dynamic count based on page height |
|
||
| **Colors** | Pixel-sampled dominant colors + computed styles, including oklch/lab conversion |
|
||
| **Fonts** | CSS font families + downloaded woff2 files |
|
||
| **Assets** | Images, SVGs with semantic names, Lottie animations, video previews |
|
||
| **Text** | All visible text in DOM order |
|
||
| **Animations** | Web Animations API, scroll-triggered animations, WebGL shaders |
|
||
| **Sections** | Page structure with headings, types, background colors |
|
||
| **CTAs** | Buttons and links detected by class names and text patterns |
|
||
|
||
## Snapshot Command
|
||
|
||
Capture key frames from a built video as PNGs — verify compositions without a full render:
|
||
|
||
```bash
|
||
npx hyperframes snapshot my-project --at 2.9,10.4,18.7
|
||
```
|
||
|
||
| Flag | Default | Description |
|
||
|------|---------|-------------|
|
||
| `--frames` | `5` | Number of evenly-spaced frames |
|
||
| `--at` | — | Comma-separated timestamps in seconds |
|
||
| `--timeout` | `5000` | Ms to wait for runtime to initialize |
|
||
|
||
## Iterating
|
||
|
||
You don't need to re-run the full pipeline to make changes:
|
||
|
||
- **Edit the storyboard** — `STORYBOARD.md` is the creative north star. Change a beat's mood or assets, then ask the agent to rebuild just that beat.
|
||
- **Edit a composition** — open `compositions/beat-3-proof.html` directly and tweak animations, colors, or layout.
|
||
- **Rebuild one beat** — _"Rebuild beat 2 with more energy. Use the product screenshot as full-bleed background."_
|
||
|
||
## Troubleshooting
|
||
|
||
<AccordionGroup>
|
||
<Accordion title="Capture times out">
|
||
Increase the timeout for sites with Cloudflare or heavy client-side rendering:
|
||
|
||
```bash
|
||
npx hyperframes capture https://example.com --timeout 180000
|
||
```
|
||
</Accordion>
|
||
<Accordion title="Few assets captured">
|
||
Sites using frameworks like Framer lazy-load images via IntersectionObserver. The capture scrolls through the page to trigger loading, but very long pages may miss images near the bottom. Adding a Gemini key improves descriptions of captured assets, but doesn't increase the count.
|
||
</Accordion>
|
||
<Accordion title="Colors look wrong">
|
||
The capture uses pixel sampling combined with DOM computed styles. Dark sites should show dark colors in the palette. Check the scroll screenshots in `captures/<name>/screenshots/` to see what the capture actually saw.
|
||
</Accordion>
|
||
<Accordion title="Agent doesn't find the skill">
|
||
Verify skills are installed:
|
||
|
||
```bash
|
||
npx skills add heygen-com/hyperframes
|
||
```
|
||
|
||
Lead your prompt with _"Use the /website-to-hyperframes skill"_ for the most reliable results. Agents also discover it automatically when they see a URL and a video request.
|
||
</Accordion>
|
||
</AccordionGroup>
|
||
|
||
## Next Steps
|
||
|
||
<CardGroup cols={2}>
|
||
<Card title="Quickstart" icon="rocket" href="/quickstart">
|
||
New to HyperFrames? Start here.
|
||
</Card>
|
||
<Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
|
||
Animation patterns used in compositions.
|
||
</Card>
|
||
<Card title="Rendering" icon="film" href="/guides/rendering">
|
||
Render to MP4, MOV, or WebM.
|
||
</Card>
|
||
<Card title="CLI Reference" icon="terminal" href="/packages/cli">
|
||
Full command reference.
|
||
</Card>
|
||
</CardGroup>
|