Website to Video

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

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

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

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

3. Preview

   npx hyperframes preview
   

   Opens the video in your browser. Edits reload automatically.

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

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 Gemini API key for richer AI-powered descriptions using vision.

Create a .env file in your project root:

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

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.

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.

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 → 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:

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

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 captures/<name>/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-hyperframes skill” for the most reliable results. Agents also discover it automatically when they see a URL and a video request.

Next Steps

Quickstart

New to HyperFrames? Start here.

GSAP Animation

Animation patterns used in compositions.

Rendering

Render to MP4, MOV, or WebM.

CLI Reference

Full command reference.