Code Animator
Loading highlighter…
Code
How it appears
Look
Frame
Window
Motion
How to animate code
- Start from a sample, or open Samples and choose Blank project. Pick the language.
- Paste the first version of your code into step 1. Click + Step to add the next version (it starts as a copy), then edit it.
- For each step choose Morph, Type or Fade, how long the change takes and how long to hold. Add focus lines such as `3-5` to dim everything else.
- Open Style to choose the theme, font, background, aspect ratio, title bar and line numbers.
- Press Export to save an MP4, WebM, GIF or PNG sequence, or Copy link to share the project.
Animated code videos, made in your browser
The Code Animator turns code snippets into short videos for tutorials, social posts, slides and docs. Write each version of your code as a step, and Vartula animates the change: code that stays the same slides to its new place, removed code fades away and new code fades or types itself in.
Syntax highlighting covers 25 languages with 10 editor themes. Style the frame with a window title bar, line numbers, a gradient background and an aspect ratio for YouTube (16:9), Reels and Shorts (9:16) or feeds (1:1, 4:5), then export MP4, WebM, GIF or PNG frames. Everything runs on your device; your code is never uploaded.
| Feature | What it does |
|---|---|
| Morph | Unchanged code slides into its new position, like Keynote's Magic Move, so viewers can follow each edit. |
| Type | New code types itself in at a speed you choose, with a blinking cursor. |
| Fade | A simple crossfade between steps. |
| Focus lines | Dim every line except the ones you're talking about, per step. |
| 25 languages, 10 themes | TypeScript, Python, Go, Rust, SQL, HTML, CSS and more, in themes such as GitHub, Dracula, One Dark Pro and Tokyo Night. |
| Any format | 16:9, 9:16, 1:1 and 4:5 frames, exported as MP4, WebM (with transparency), GIF or PNG frames. |
How does the morph animation work?
Vartula compares each step with the one before. Lines that didn't change are matched first, even if they moved or were re-indented, then the words inside edited lines are matched one by one. Matched code slides from its old position to its new one, deleted code fades out and new code fades in.
Is my code uploaded anywhere?
No. Highlighting, the preview and video encoding all happen in your browser. Your project is saved in this browser's local storage so a reload doesn't lose it. A share link holds the code inside the link itself, after the “#”, which browsers never send to a server.
Which format should I export for social media?
MP4 plays everywhere, including X, LinkedIn, Instagram and YouTube. Pick the 9:16 frame for Reels, Shorts and TikTok. Use GIF for READMEs and chat apps, and WebM with a transparent background to place the animation over your own video.
Can I make the code bigger?
Font size is automatic by default: the code grows to fill the frame, sized for the largest step so nothing jumps between steps. Set a fixed size in Style if you prefer; long code still shrinks so it never overflows.
Why does my typing step take longer than the transition time?
Type steps follow the typing speed in Style (characters per second) instead of a fixed time, so longer code types for longer. Raise the typing speed to shorten them.
Which browsers support video export?
MP4 and WebM use the WebCodecs API, available in current Chrome, Edge, Safari and Firefox. Older browsers fall back to recording WebM in real time. GIF and PNG export work in every modern browser.