Turn your AI-generated HTML animation into a video

ChatGPT, Claude and Gemini hand you code, but social apps, slides and editors want a video file. Paste the code here and download one.

Or start from an example:

Getting the code from an AI?

Preview

Your animation plays here as soon as you paste it.

Keep this tab in front while it renders.

Download
Format
Aspect ratio
sec

Runs on your device. Your file is never uploaded.

Ask AI for export-ready HTML

Paste this after your request, or send it with the code you already have. This gives the result the best chance of rendering cleanly.

From chat to video
  1. 1
    Ask for one HTML file
    Tell the assistant what to animate and ask for a single HTML file. Add the prompt below so the result is ready to export.
  2. 2
    Copy the code
    In ChatGPT, Claude or Gemini, use the copy button on the code block. If the assistant shows a live preview instead, switch to the code view first.
  3. 3
    Paste and export
    Paste it at the top of this page, pick the frame for your platform (9:16 for Reels, Shorts and TikTok, 16:9 for YouTube and slides) and export.
Ask AI for export-ready HTML
Paste this after your request, or send it with the code you already have. This gives the result the best chance of rendering cleanly.
Rewrite this animation as one self-contained HTML file that I can export to video with htmlto.video:
- Design it for a 16:9 frame. It must fill the browser window exactly (100vw by 100vh, no scrolling). Size everything in vw and vh so it scales to any resolution.
- It starts by itself when the page loads and needs no mouse, keyboard or scrolling.
- It has a fixed length. State the length in a comment on the first line, like <!-- duration: 8s -->.
- Animate with CSS animations, the Web Animations API, GSAP, or requestAnimationFrame using its timestamp argument. Do not use video, audio or iframes.
- Put all CSS and JavaScript inline. Embed images as inline SVG or data URLs. Fonts and libraries may only come from a CDN that allows cross-origin loading, such as Google Fonts, cdnjs or jsDelivr.
- Reply with the complete HTML in a single code block.
Why not record the screen or use the command line?
Screen recordings stutter, show the cursor and come out at the wrong size. Command-line tools give exact results but need Node, a headless browser and FFmpeg installed. This page does the same frame-by-frame rendering with nothing to install.
What it can render
  • CSS animations and transitions
  • GSAP, anime.js, Motion and other JavaScript libraries
  • Canvas 2D
  • SVG animated with CSS or JavaScript
  • WebGL and Three.js
  • The Web Animations API and requestAnimationFrame
What it cannot do yet
  • Safari, iPhone and iPad cannot export. The preview works there.
  • Videos, audio and iframes inside the page are left out.
  • Images and fonts from servers that block cross-origin reading will be missing.
  • Animations that wait for a click, hover or scroll will not advance.
  • SVG animated with SMIL tags such as <animate> is not captured.
  • Very heavy WebGL scenes can fail on slower computers.