Skip to main content

HTML TO VIDEO

HTML to video: render HTML and web pages to MP4

Two different jobs share this name. You may have an HTML or CSS animation you want as an MP4, or a web page or blog post you want explained in a video. Claude Motion handles both on HyperFrames, the open-source HTML renderer, from Claude Code or Codex.

Render your first videoSee rendered examples

Renders locally on your computer · Claude Motion is independent, not affiliated with Anthropic or HeyGen

A paid Creator or Studio subscription is required. There is no Free plan.

INDEX.HTML → HYPERFRAMES → RENDER.MP4

TEXT

TitleCallout

CHARTS

Organic barsChannel filter

INTERACTIONS

QuizDrag match

AUDIO

Music bed · voiceover

HTML, CSS AND JS IN · MP4 OUT · 1920×1080 AT 30 FPS BY DEFAULT · RENDERED WITH HYPERFRAMES

Why a screen recording is not enough

Recording a browser tab captures whatever the page happens to draw in real time. If the computer stutters, frames drop; timers and CSS animations drift from the music; and you cannot re-render one scene without recording everything again. A frame-accurate renderer works the other way round: it seeks the page to each exact moment, takes that frame, and stitches the frames into an MP4 with FFmpeg.

  • Same result every time

    Each frame is drawn at a known time, so two renders match.

  • No dropped frames

    A slow machine only renders slower; the video stays smooth.

  • Audio in sync

    Voiceover and music sit on the same timeline as the visuals.

Get started
SCREEN RECORDINGFRAME-ACCURATE RENDER
TimingWall clockSeeked frame by frame
Dropped framesPossibleNone
Re-render one sceneRecord againEdit and render
Audio syncManualOn the same timeline
OutputWhatever was on screenMP4, 1920×1080, 30 fps

Turn an HTML animation into MP4

HyperFrames treats an ordinary HTML page as a video: each clip carries a start time and a duration, and animations follow the timeline instead of the clock. Your agent writes that page, or adapts yours, then renders it with headless Chrome and FFmpeg on your own machine.

  • Use web tech you know

    HTML, CSS, SVG, charts and seekable JS animations such as GSAP.

  • Edit on a timeline

    Move and trim clips in HyperFrames Studio before you render.

  • Plan for seeking

    Animations driven by setTimeout or looping CSS need rewriting to follow the timeline; your agent does this.

An existing page with real-time effects, autoplay video or live data will not render as-is. Expect your agent to rework those parts into timed clips.

See the examples

Before you render

  1. 01Every scene is a clip with a start time and a duration.
  2. 02Animations are driven by the timeline, not by timers.
  3. 03Fonts and images are local files or load before the first frame.
  4. 04Node.js, Chrome and FFmpeg are installed (setup fetches what is missing).

Turn a web page into an explainer video

If you start from a blog post or article rather than an animation, give your agent the link or a saved .html file. Claude Motion keeps the main content, drops navigation, footers and share widgets, downloads the images, and turns the headings, points and numbers into scenes in a motion style. Add voiceover and music if you want, then render the MP4.

  • Link or saved file

    Public https:// pages and saved .html both work.

  • Numbers become charts

    Tables and figures keep their source text and animate.

  • MP4 and a web version

    Render the video, or share the interactive page with a link.

Pages behind a login, paywall or heavy client-side app may not load; save the page as .html or paste the text instead. Creating, rendering, voiceover and sharing need a Creator ($19.9/mo) or Studio plan.

Convert a page

TEXT

TitleCallout

CHARTS

Organic barsChannel filter

INTERACTIONS

QuizDrag match

AUDIO

Music bed · voiceover

HTML pages rendered to video

Every card is an HTML composition an agent built from a brief and rendered to MP4 with HyperFrames.

Open the example library

What you get on top of plain HTML rendering

  • Motion styles

    Pick a style or let your agent design freely.

  • Animated charts

    ECharts built in, styled to match.

  • Web page ingest

    Links and saved .html, main content only.

  • HyperFrames timeline

    Edit clips, timing and blocks.

  • Voiceover

    Narration fitted to each scene.

  • Music

    Generate now or add later.

  • Share links

    The interactive HTML, public or password.

  • MP4 render

    Local and deterministic.

Render HTML to video with Claude Motion in 3 steps

  1. 1Paste the one-line install from the install guide into Claude Code or Codex.
  2. 2Give your agent your HTML, a web page link or a brief, and pick a motion style.
  3. 3Check it on the HyperFrames timeline, then render MP4 or share a link.
Install Claude Motion: run npx -y claudemotion@latest setup and follow the output.

First run opens your browser to sign in — one click, no terminal.

Your questions, answered

How do I convert HTML to MP4?

Use a renderer that seeks the page frame by frame, such as HyperFrames, rather than recording the screen. The page needs timed clips and animations that follow the timeline. With Claude Motion your agent writes or adapts the page and runs the render for you.

Can I convert a CSS animation to video?

Yes, once it follows the timeline. Looping CSS keyframes and setTimeout run on the wall clock, so your agent rewrites them as timed clips or a seekable animation such as GSAP before rendering.

Can I turn any website into a video?

You can turn the content of most public articles and blog posts into an explainer video. A full interactive web app, a page behind a login or live data will not render as-is; save the page, paste the text, or describe what to show instead.

Is HyperFrames free?

Yes. HyperFrames is open source under Apache-2.0 and renders on your own computer. You can use it without Claude Motion; Claude Motion adds motion styles, web page ingest, voiceover, charts and share links on top.

What resolution and frame rate do I get?

Claude Motion compositions default to 1920×1080 at 30 fps. Draft, standard and high render qualities trade speed for quality.

Explore more

Render your HTML or web page to MP4

Get Claude Motion now