HTML to Video
Turn web animation, Canvas and Three.js code into MP4
Start from a template
- Live explainer window Rounded speaker window with a LIVE badge and name tag; the video's sound goes on the timeline too
- Framed media White-edged glowing window with a corner label; scales in and can zoom into a region (great for screen recordings)
- Photo wall Portrait photos pop in side by side, each with a caption
- Triptych close-ups Images side by side edge to edge, each labelled, with a chapter number and title below
- Gallery strip Thumbnails along the bottom take turns; the big image follows
- Storyboard split A column of storyboard frames on the left, a labeled main window on the right
- Split explainer Big text on the left (second line in an accent color), media on the right, a timeline marker below
- Media-filled title Your video or image shows through giant letters, with a kicker above and a subtitle below
- Phone mockup Your footage inside a phone frame, gently floating
- Corner badge Your logo and name stay in a corner
- Grainy gradient A slow teal-to-orange gradient with film grain — put it on the bottom track as a backdrop
- Title pop Big title pops in with an underline and subtitle
- Word by word Words pop in one by one on the beat
- Data growth Bars grow while the number counts up
- Lower third Name and role banner
- Light sweep A beam of light sweeps across
- Countdown 3, 2, 1 pop in while the ring runs down
- Typewriter Types out letter by letter with a blinking cursor
- Progress ring The ring fills to your percentage as the number rises
- Circle highlight A hand-drawn circle loops around what matters
- 3D spinner A metallic knot slowly spins (Three.js)
- Music bars Bars bounce to the music on your timeline and flash on the beats
- Caption cards Captions at the same time pop up one card each with an accent bar; hide the caption track to keep only the cards
- Highlight title A bright highlighter bar wipes across a cream card as big letters drop in
- Kinetic slam One word per screen slams in while black, yellow and cream blocks wipe diagonally
- Question card A small tag plus two big lines, the second on a bright band
- Sticker tags Cream paper strips pop in at playful angles (separate lines with |)
- Block countdown Huge numbers tick down, each pushing in a new color block
- Pill tags Big title, a row of dark pill tags rising one by one, and a highlighted takeaway below
- State cards A column of cards on the left scrolls each into focus; a bold comparison on the right
- Tag table A dark panel listing “tag → meaning” row by row, with the tags in a monospace font
- Quote card A small label at top left and a long quote that fades in line by line
One click opens the editor with the motion already added. For templates with media slots, drag a video or image onto the card, or tap “Use my files”, and it is already in place when the editor opens. Files stay on your device; nothing is uploaded.
Paste a web animation made with Canvas, SVG, GSAP or Three.js. It is drawn frame by frame, layered over your video and exported as MP4 or GIF. Runs in your browser, free, no watermark.
Paste web animation code or import an .html file and it becomes a motion clip on the timeline: transparent background, layered over your video or image, and movable, scalable, fadeable, keyframable and animatable like any other clip.
The editor draws it frame by frame by time instead of screen-recording it: the same moment always gives the same frame, so the preview is exactly what you export. Math.random, Date and requestAnimationFrame are switched to a deterministic clock; GSAP and Three.js are built in, so no external script tags are needed.
The code runs in an isolated sandbox with no network access, so external images and fonts do not load; inline them as data: URLs if you need them. Parameters the piece declares (text, colors, numbers) appear in the settings panel on the right, and you can export MP4 or GIF right away.
FAQ
- Which coding styles are supported?
- Four common styles work as-is: define window.__seek(t) to draw one frame per second value; build a paused GSAP timeline and put it in window.__timelines; position a Three.js scene by time inside __seek and render it; or a plain requestAnimationFrame loop. If the page is a single canvas, the canvas is captured directly; otherwise the whole page (SVG, CSS, text) is drawn as one frame.
- Can I use libraries from a CDN?
- GSAP (with the CustomEase, MotionPath, MorphSVG, DrawSVG and SplitText plugins) and Three.js are built in, and CDN addresses pointing to them are swapped for the built-in copies automatically. Other external libraries cannot load, because the sandbox has no network access.
- Does the exported video have sound?
- Motion clips have no sound of their own, and audio played by the code is not recorded. Add music or a voiceover on the timeline separately and export it together with the motion.
- What if my code throws an error?
- The top of the preview and the clip itself show that something went wrong, and the original error message appears in the code dialog. Click “Ask AI to fix” and the AI reads your code, fixes it and checks the result. Until then the preview holds the last good frame, and other clips are not affected.
- Is my code uploaded?
- No. The code is saved with the project in your browser and is rendered and exported on your device. It is uploaded only if you choose to save the project to the cloud.