Convert HTML5, CSS, Canvas, Three.js, WebGL & GSAP Animations to Video up to 4k

Convert browser-based animations and interactive graphics to MP4 or WebM video online. We supports a wide range of HTML5 and JavaScript animation technologies, making it easy to turn web animations into high-quality video. You can convert HTML5 animations to video, Three.js animations to MP4, Canvas animations to video, CSS animations to video, WebGL animations to video, GSAP animations to video, and HTML Canvas animations to MP4 without installing desktop software.

If your HTML uses external files (JS, CSS, images, fonts, etc.), zip the folder containing the HTML and all its assets and upload the ZIP. If your creative is a single self-contained HTML file, you can upload the HTML file directly.

OR

Enter your HTML creative's http/https url.

Select Advance Options


Select an output dimension (Width x Height). If the item is not on the list, please type it into the input field manually.

Enter the output width between 34 and 3840. The value must be an even number.

Enter the output height between 34 and 3840. The value must be an even number.

Select frames per second.

Enter the duration of the creative in seconds. Unpaid members can convert for up to 30 seconds.
Maximum supported duration is up to 300 seconds.

Choose the bitrate value. A range of 17–20 gives good quality with smaller file size. Higher values reduce quality, while lower values improve it.

Select Yes to include audio in the recorded video. Make sure your animation and audio autoplay when the HTML loads. Click, tap, or keyboard interaction is not supported.

Select MP4 or WEBM as the output format.

Two steps: The tool will extract photos from your html animation for the length given. It will prompt you to select the Start and End frames (essentially the range to appropriately chop it) before generating the final result. If you are a new user, choose this option.

One Step: In this step, the tool will generate the final output directly till the duration limit is reached. It is only for experienced users.

If the animation fills the screen correctly, you can continue directly and click on "Convert to Video". If the content is centered, too small, or doesn't fill the screen, use Set Capture/Crop Area to select the portion you want to include.

Not sure? Use this to select the content area.

💡 Tip for AI-generated HTML animations: If you created this HTML animation using an AI tool, ask the AI to set a specific width and height for the animation (for example, 1080 × 1920px). This helps us create your video with the correct size and prevents unexpected sizing or layout issues.

⚠️ Please set your animation to autoplay and remove the Play button. The Play button cannot be clicked during recording.

Supported HTML5 Animation Libraries

Our HTML5 to video converter can process animations created with popular JavaScript and browser-based graphics technologies, including:

Three.js
Convert Three.js 3D and WebGL animations to MP4 or WebM.
WebGL
Render WebGL-based animations and interactive graphics to video.
GSAP
Convert GSAP timeline and JavaScript animations to video.
HTML Canvas
Convert HTML Canvas animations and graphics to MP4 or WebM.
JavaScript Animation
Convert browser-based JavaScript animations to video.
HTML5 / CSS3
Convert HTML5 and CSS3 animations and effects to video.

HTML5 Animation to MP4 Online

Whether you are working with a Three.js WebGL scene, a GSAP animation, an HTML Canvas project, or a traditional HTML5 animation, you can render your browser-based content and convert it to a video format suitable for websites, presentations, social media, advertising, demonstrations and other applications.

Frequently Asked Questions

It converts your HTML5/CSS animation into a video file (MP4 or WEBM).
A ZIP containing your HTML, CSS, JS, and all assets (images, fonts, libs).
The maximum supported ZIP file size is 200 MB.
Typically 2–3 minutes, depending on the length and dimensions of the animation.
It lets you select the specific portion of the rendered HTML animation that you want to include in the final video. Use it when the animation appears centered, too small, or does not fill the selected video dimensions correctly. If the animation already fills the video area as expected, you can convert it directly.
MP4 (H.264) and WEBM (VP9). MP4 is widely supported; WEBM can be smaller at similar quality.
Yes—if your HTML5 animation plays audio (e.g., via < audio >/WebAudio), it can be captured into the video.
Up to 3840×2160 (landscape) or 2160×3840 (portrait).
Yes. You can pick FPS (e.g., 24/30/60) and target quality/bitrate for MP4/WEBM.
Yes. You can convert CSS animations to video. The animation is rendered and captured based on the viewport size, duration, frame rate, and other settings you select. Animations that use JavaScript together with HTML and CSS can be rendered and converted to video.
Choose BEGIN and END frames (or duration) before conversion to capture only the segment you need. Select "Two Steps" in Frame Selection Option.
Yes—just include all required files in the ZIP and reference them with relative paths.
Yes. Three.js WebGL content can be rendered and converted to MP4 or WebM.
Embed web-safe formats (WOFF/WOFF2), ensure correct CSS @font-face paths, and include licenses if needed.
Yes—use our API for programmatic HTML5 ➜ MP4/WEBM exports and batch jobs.
Each job has a 600-second (10 minutes) processing limit.
Yes—outputs are yours, provided you own or have rights to the source assets.