Updated 15 November 2026
To turn your website into a promo video with AI, give its URL to HyperFrames with one line about the video. HyperFrames captures the real site, its screens, colours, fonts, words and videos, and your AI agent turns them into a short story, builds each scene and renders an MP4. HyperFrames is free and open source, and the video stays editable after it is made.
Short answer: most URL-to-video tools rewrite your page as a script and fill it with stock clips. HyperFrames shows your real product, in your own colours and fonts, and you keep the video as a project you can change.
What does a video made from a website look like?
We gave HyperFrames one URL, hyperframes.heygen.com, and asked for a launch film. An AI agent (Claude Code with the HyperFrames skills) captured the page and built the 24-second film at the top of this page from what came back. Nothing on screen was generated by an AI model: every screen, colour, font, word and number comes from the site. The music and sound effects come from a music catalog and free sound libraries.
- The browser and the film strip are the page's own screenshots: a full-page image and five screens.
- The colour bands are five of the eight brand colours the capture read from the page.
- The type is the site's own fonts, TT Norms Pro and ABC Solar Display.
- The words and numbers come from the page's text: its headline and its GitHub stars, npm downloads, forks and contributors on the day we ran it.
- The quick cuts are the showcase films on the page, which the capture downloaded with everything else.
The capture is one command, npx hyperframes capture https://hyperframes.heygen.com. Rendering the 24-second film took about 20 seconds on a MacBook Pro with an M4 Max chip.
How do you turn a website into a video with HyperFrames?
There are three ways in. All of them capture the site and build the same kind of project.
In the Studio app, with no terminal
- Download the Studio app for Mac, Windows or Linux and sign in with a free HeyGen account.
- Type the request in Make something with your URL, then choose Let's go. For example:
A 30-second launch video for https://example.com. - Turn on Start with a storyboard if you want to approve the shots as still frames before anything moves.
- Add only what must be exact: who it is for, a claim, the last line on screen.
- Watch it and ask for changes in plain words, or point at the picture. Then export the MP4.
The app runs your agent beside a live preview and a timeline. It has a built-in HyperFrames agent that needs no install and runs on your HyperFrames credits, and it works with Claude Code, Codex, Grok, Antigravity, GitHub Copilot, Hermes Agent, OpenClaw, Qoder, or OpenCode with free models (connect your agent). The product launch guide says a launch video takes the agent about 10 to 15 minutes to build.
With your own AI agent
For Claude Code, Codex, Cursor, Gemini CLI or any agent that works in a folder on your computer. You need Node.js 22 or newer and FFmpeg. The quickstart has the steps for each agent.
npx hyperframes skills update
# installs the HyperFrames skills for your agents; then open or restart your agent in your project folderThen ask your agent, starting with /hyperframes:
Using /hyperframes, make a 30-second 1920x1080 launch video for https://example.com.
Use the site's own palette and screenshots. End on "Try it free".The agent runs the capture itself, offers three storylines for a longer film, builds the scenes, checks its own frames and opens a preview. These are the commands it uses, if you want to run them by hand:
npx hyperframes capture https://example.com --json
# screenshots, colours, fonts, text, images and videos into ./capture
npx hyperframes preview
# opens the browser editor to scrub the timeline and fix anything
npx hyperframes render --output launch.mp4
# writes the MP4 on your computer, free, no watermarkIn Claude.ai or ChatGPT, with nothing to install
The HyperFrames connector builds and renders the video in your HeyGen account. You give up the project folder and local rendering. In Claude.ai a custom connector works on every plan, including Free; in ChatGPT, custom connectors need a Business, Enterprise or Edu plan. Connect HyperFrames to an AI chat.
What does HyperFrames take from your website?
Capture opens the page in a browser, scrolls it and saves what a visitor sees. This is what came back from hyperframes.heygen.com, and what the film used it for.
What it saves | From our site | How the video uses it |
|---|---|---|
Screenshots | A full-page image 1920 wide and 5 screens | Shows the site as it is, never a mock-up |
Colours | 8 brand colours | The video's palette, so it matches your brand |
Fonts | 4 font families with their weights | Titles in your own type |
Words | Every visible line of text | Headlines, claims and numbers, quoted as written |
Images, icons and videos | The logo mark and 4 videos | Your logo on the end card, your clips in the cut |
- Real screens beat a rebuild. The skill tells the agent to show the site with its screenshots and to rebuild only the part that moves, because a page redrawn in HTML drifts from the real layout.
- Screens behind a sign-in need your help: capture has no sign-in option, so give the agent your own screenshots or a screen recording of those screens.
- Heavy pages stop at a time budget, two minutes by default, and the capture says what it skipped. Ours skipped 46 files and still had everything the film needed.
- No site to capture? Say "don't capture the website" and paste a script instead, and name your brand colours, since the visuals are then invented.
Which kind of video should you ask for?
Kind | What it shows | Ask for |
|---|---|---|
Launch video | Your product's real evidence as a story, with one action at the end | 30 to 45 seconds, 16:9 |
Product tour | One complete task through the real screens, first click to result | 30 to 90 seconds, 16:9 |
Short social video | One useful point, its proof, then stop | About 20 seconds, 9:16 for TikTok or Shorts |
Site tour | The homepage and inner pages as they are, calm and editorial | About 30 seconds, "a showcase, not a sales pitch" |
Length and destination are the two most useful details to give. The destination sets the shape: 16:9 to embed on a site, 1:1 for a feed, 9:16 for Shorts, Reels and TikTok.
What other videos has HyperFrames made from websites?
A launch film for ycombinator.com, built from its website.
From a Figma design instead of a website: Figma to HyperFrames, from HeyGen's announcement.
How is HyperFrames different from Pictory, InVideo and Lumen5?
These are the tools AI answers name most for "URL to video". They read your page's text, write a script and fill the scenes from a media library. HyperFrames builds the scenes from your real site. Facts and prices are from each company's own site on 6 November 2026.
Tool | What it takes from your URL | What fills the video | Price |
|---|---|---|---|
HyperFrames | Screens, colours, fonts, words, images and videos | Your real screens and brand, built as editable code by your agent | Free and open source; Studio app free plan; Pro $25/month |
Pictory | The page text, turned into a script with a hook and a call to action | A matched visual per scene from 18M+ clips and images, including Getty Images | 14-day trial with watermark; from $25/month billed yearly |
InVideo | The link plus your brief; it warns that not every page image is carried over | Visuals, music, subtitles and voiceover, plus your own media | Credit-based; Starter $20 a seat a month ($10 billed yearly in an offer on 6 November) |
Lumen5 | The text and images of a blog post | Stock photos and clips, or AI generation, paired to an AI script | Free: 5 videos a month, 720p, Lumen5 outro; Basic $19/month billed yearly |
- Choose Pictory or Lumen5 to turn a blog post into a narrated video with stock footage, online.
- Choose InVideo if you want generated footage from many AI models and a timeline editor in the browser.
- Choose HyperFrames when the video should show your real product, match your brand exactly, render on your computer for free, and stay editable by you or your agent.
What goes wrong, and how do you fix it?
- The capture is thin. If it reports almost no text and no assets, it is not usable even when it says it worked. Try the page that holds the content, or give the agent screenshots.
- A claim is out of date. The video quotes the page as it is today. Check every number and claim before you post.
- It reads like a slideshow. Ask for the product doing something in each shot, not a title over a screenshot.
- The text is too small on a phone. Ask for bigger close-ups of the part that matters; keep the full screen for context.
- Private material shows. Capture a public page, and never put customer data or internal screens in a public video.
Related guides: product demo videos, AI motion graphics, the best free AI video editor, the HyperFrames MCP server.
Questions people ask
Is there an AI tool that makes a video from a website URL?
Yes. Give HyperFrames your URL and one line about the video, in the HyperFrames Studio app, your own AI agent or a chat with the HyperFrames connector. It captures your real screens, colors, fonts and words and builds a promo or launch film you can still edit, instead of a script over stock clips.
Is it free to turn a website into a video with HyperFrames?
Yes. HyperFrames is free and open source under Apache 2.0, and capture, preview and render on your computer cost nothing and add no watermark. The Studio app has a free plan with AI voiceovers, captions, music, sound effects, 3 AI video clips and 5 cloud exports a month. Pro is $25 a month. Your AI agent may need its own plan.
How long does it take?
The product launch guide says a launch video takes the agent about 10 to 15 minutes to build. Turn on Start with a storyboard to approve the shots as stills first.
Does it use my real website or stock footage?
Your real website. The capture saves its screenshots, colours, fonts, words, images and videos, and the HyperFrames skill tells the agent to show real screens, logos and footage from their source and to draw only what has none.
Can I make a vertical video for TikTok or Reels?
Yes. Say the size, such as "1080x1920 for TikTok". The agent lays every scene out for 9:16.
Can it add a voiceover and music?
Yes. Ask for a voice and a tone, such as "female voice, confident", and say how loud the music sits under it, or say "no voiceover".
Can I copy the style of a launch video I like?
Yes, in the Studio app with Reference: paste the video's link and add your URL to get that structure with your product in it. Reference is a Pro feature.
Can I edit the video after it is made?
Yes. Ask the agent for changes, point at the picture in the Studio app, or open npx hyperframes preview and edit in the browser. The video is a project of HTML files, not a flat export.
