Website to Video - HyperFrames

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

Install skills

Skills teach your AI agent how to capture websites and create HyperFrames compositions. Install once — they persist across sessions.

npx skills add heygen-com/hyperframes

Works with Claude Code, Cursor, Gemini CLI, and Codex CLI.

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, strategy & messaging, storyboard + script, voiceover, build, validate.

Agents also trigger this skill automatically when they see a URL and a video request.

Preview

npx hyperframes preview

Opens the video in your browser. Edits reload automatically.

Render to MP4

npx hyperframes render --output my-video.mp4

✓ Captured 750 frames in 12.4s
✓ Encoded to my-video.mp4 (25.0s, 1920×1080, 6.8MB)

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 for advanced use.

How the Pipeline Works

The skill follows the Hyperframes pipeline: seven steps, each producing a named artifact that feeds the next.

Step	Output	What happens
Capture	`capture/`	Extract screenshots, design tokens, fonts, assets, animations
Design	`DESIGN.md`	Brand reference — colors, typography, component stylings, spacing, iteration guide
Strategy & Messaging	—	Align on video type, style, the ONE message, and narrative arc
Storyboard + Script	`STORYBOARD.md` + `SCRIPT.md`	Concept-first storyboard and narration script, written together
VO + Timing	`narration.wav` + `transcript.json`	TTS audio with word-level timestamps
Build	`compositions/*.html`	Animated HTML compositions, one per beat
Validate	Snapshot PNGs + lint/validate pass	Visual verification and runtime checks before delivery

See the pipeline guide for a detailed walkthrough of each step, the contents of every generated file, and how to iterate without re-running the whole pipeline. The structure is useful for any Hyperframes project, not just website captures.

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 demo	30–60s	”45-second demo showing the top 3 features.”
Feature announcement	15–30s	”Feature announcement highlighting the new AI agents.”
Brand reel	20–45s	”30-second brand video. Celebrate the design.”
Launch teaser	10–20s	”12-second teaser. Super minimal. Just the hook.”

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.

Enriching Captures with Gemini Vision

By default, captures describe assets using DOM context — alt text, nearby headings, CSS classes. Add a vision API key for richer AI-powered descriptions. Create a .env file in your project root with either a Gemini API key:

echo "GEMINI_API_KEY=your-key-here" > .env

…or, if you don’t have Google access, an OpenRouter key — a single API that fronts many vision models:

echo "OPENROUTER_API_KEY=your-key-here" > .env

OpenRouter is used when its key is present (it takes priority if both are set). The default model is google/gemini-3.1-flash-lite; override it with HYPERFRAMES_OPENROUTER_MODEL (any vision-capable OpenRouter model), just as HYPERFRAMES_GEMINI_MODEL overrides the Gemini default.

Without Gemini
With 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.

- 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.

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.

npx hyperframes capture https://stripe.com

◇  Captured Stripe | Financial Infrastructure → capture

  Screenshots: 12
  Assets: 45
  Sections: 15
  Fonts: sohne-var

Flag	Default	Description
`-o, --output`	`./capture`	Output directory (auto-suffixes to `./capture-2/`, `./capture-3/`, … if `./capture/` is taken)
`--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:

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.”

See the pipeline guide for more re-entry patterns.

Troubleshooting

Capture times out

Increase the timeout for sites with Cloudflare or heavy client-side rendering:

npx hyperframes capture https://example.com --timeout 180000

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.

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 <output>/screenshots/ (default ./capture/screenshots/) to see what the capture actually saw.

Agent doesn't find the skill

Verify skills are installed:

npx skills add heygen-com/hyperframes

Lead your prompt with “Use the /website-to-video skill” for the most reliable results. Agents also discover it automatically when they see a URL and a video request.

Next Steps

The Pipeline

The canonical 7-step structure this workflow follows.

Quickstart

New to HyperFrames? Start here.

GSAP Animation

Animation patterns used in compositions.

Rendering

Render to MP4, MOV, or WebM.

​Getting Started

​How the Pipeline Works

​Video Types

​Enriching Captures with Gemini Vision

​Capture Command

​What Gets Captured

​Snapshot Command

​Iterating

​Troubleshooting

​Next Steps

The Pipeline

Quickstart

GSAP Animation

Rendering

Getting Started

How the Pipeline Works

Video Types

Enriching Captures with Gemini Vision

Capture Command

What Gets Captured

Snapshot Command

Iterating

Troubleshooting

Next Steps