Code Animator
REC · client-side render · v0.1

Type code.
Record motion.

A browser-native studio for typing animations of source code. Turn a snippet into a GIF for your tweet, an MP4 for your conference talk, or a PNG for your README — without launching a video editor.

Themes54
Languages23
Formats5
●TYPERECORDEXPORTSHAREPUBLISHREPEATTYPERECORDEXPORTSHAREPUBLISHREPEAT
●TYPERECORDEXPORTSHAREPUBLISHREPEATTYPERECORDEXPORTSHAREPUBLISHREPEAT
Why

Animated code gets read.
Static code gets scrolled past.

Devs on socials. Creators on YouTube. DevRels at conferences. Open-source maintainers writing READMEs. Indie hackers in launch posts. Wherever code lives in public, the problem is the same: getting it to be the thing readers stop on. A few of the camps that already use Code Animator — yours is probably nearby.

Make the post →

Devs on socials

The reason your last code screenshot got eight likes isn't the code — thumbs scroll past screenshots. A snippet that types itself out reads as motion, and motion is what stops the thumb on a feed full of static text.

Make the clip →

Creators on YouTube, TikTok, Shorts

A thirty-second clip of your side project doesn't need a screen-recording rig. Drop in an MP4 of the code typing itself out — viewers stop scrolling, you skip the editing pass, and the result reads as a finished short, not a cursor following hunt-and-peck.

Make the slide →

DevRels and conference speakers

Drop a clean MP4 into your slide deck or YouTube intro. No screen-recorder cursor jumping around, no IDE sidebar in the corner, no system menu bar to crop out. Just code in the theme you actually want.

Make the README →

OSS maintainers and tutorial writers

A README that opens with a typing animation reads like a product. A README that opens with a fenced code block reads like a wiki. Use the same composition across your docs, your launch post, and your tutorial.

The math

You already do this.
It just takes longer.

Open the editor, paste, scrub, export. The whole loop fits in less time than your screen recorder takes to launch.

Without Code Animator8 steps
  1. 1Open OBS or QuickTime
  2. 2Hide your dock and notifications
  3. 3Open VS Code, find a clean theme
  4. 4Resize the window, position it
  5. 5Hit record, type carefully, hit stop
  6. 6Trim, crop out the cursor, compress
  7. 7Re-export because the file is too big
  8. 8Post — and notice the system bar in frame
With Code Animator5 steps
  1. 1Open the editor
  2. 2Paste your snippet
  3. 3Pick a theme, scrub the speed
  4. 4Click GIF or MP4
  5. 5Post
How it works

What you actually get.

Paste a snippet, pick a theme, scrub the typing speed, hit export. The result lands in your downloads folder a second later. No signup, no upload, no waiting in a queue.

01

Real grammars, 200+ languages.

Powered by Shiki — the same TextMate engine VS Code uses. Python f-strings, JSX expressions, embedded SQL: all highlight the way they should.

02

Export in your browser.

PNG, SVG, GIF, MP4, and WebM — all encoded client-side. No upload queue, no server bill, no third party seeing your code.

03

A URL is a project.

Every snippet, theme, and timing detail compresses into the address bar. Drop a teammate a link; they open exactly your composition.

No login · No queue · Browser only

Open the editor.
No friction.

Free forever — every format, every theme. Free exports carry a small watermark. Upgrade when you want to drop it, export without limits, and save your snippets, themes, and settings across devices.

  • Twenty-three languages today; more arriving each week.
  • Fifty-four themes — bring your own VS Code JSON soon.
  • Every export runs in your browser. We don't see your code.
  • URL share-links carry the entire composition.