CodeMotion by Septiyan Bintang Ramadhan Putra — Animated Code Snippet & Video Generator (MP4 & GIF)
An open-source developer tool built by Septiyan Bintang Ramadhan Putra. Source code available on GitHub (putrarawr/CodeMotion).
CodeMotion is a free, zero-login, 100% client-side developer application designed to transform plain source code into aesthetic, high-resolution code snippet graphics (2x/3x Retina DPI PNG, vector SVG) and butter-smooth 60FPS animated typing motion videos (MP4 & GIF).
How to Use CodeMotion to Create Code Videos & Snippets
1. Paste Your Source Code
Paste any programming code into the editor, drag and drop a file, or import from a GitHub URL. Select your target language (TypeScript, JavaScript, Python, Rust, Go, C++, HTML, CSS, SQL, JSON) and edit tab titles.
2. Customize Styling & Motion
Pick a dark or light syntax theme, gradient canvas background, line diff highlights (+/-), font family, window controls, and typing speed (0.5x, 1x, 2x).
3. Export 60FPS Video or Image
Click Record Motion (MP4 / GIF) for an instant 60FPS typing video, or Export PNG for high-DPI Retina graphics ready for X (Twitter), LinkedIn, and slides.
Why Software Engineers & Educators Choose CodeMotion
- 60FPS Real-Time Motion Code Animation: Simulates realistic typewriter and line-by-line code typing motions exported directly into pure ISO MP4 video and animated GIF format with zero CPU freeze.
- CodeMirror 6 Syntax Engine: Powered by Lezer grammars with lazy-loaded language support across 28 programming languages, plus bracket auto-close, auto-indent, search & replace (Cmd/Ctrl+F), and undo history.
- Snapshot Library: Save, load, rename, and delete named snapshots of your full snippet setup locally in the browser (up to 50 snapshots).
- Import from URL & Drag-and-Drop: Fetch code directly from GitHub file links, gists, or any raw text URL, or drop and paste files straight into the workspace.
- High-DPI Retina Graphics Export: Download 2x or 3x DPI PNG images, vector SVG graphics, or copy PNG images directly to the system clipboard.
- Code Diff Line Highlights: Showcase code changes, pull requests, and refactoring with emerald line addition (+) and rose line deletion (-) badges.
- Line Spotlight & Callout Annotations: Spotlight specific lines and attach colored callout note badges for tutorials and documentation.
- Multi-File Window Header Tabs: Organize complex code snippets into window frames with tab switching, title editing, and macOS/Windows window controls.
- 100% Local Browser Privacy: Syntax highlighting and video encoding run locally inside your web browser. Zero code is sent to remote servers.
- LZ Short URL State Sharing: Compress code, tab titles, languages, and theme configurations into ultra-short URL hash links.
Supported Languages & Syntax Color Themes
CodeMotion supports TypeScript, JavaScript, Python, Rust, Go, C++, C#, Java, PHP, HTML, CSS, SQL, JSON, YAML, Bash, Dockerfile, Markdown, Swift, Kotlin, Ruby, Scala, R, Dart, Vue, Svelte, Astro, Elixir, and GraphQL.
Choose from curated syntax color palettes including Vitesse Dark, One Dark Pro, Dracula, Tokyo Night, Nord, Catppuccin Mocha, GitHub Dark, GitHub Light, Vitesse Light, and Catppuccin Latte.
Frequently Asked Questions (FAQ)
What is CodeMotion?
CodeMotion is a free, zero-login developer tool that transforms source code into high-resolution code snippet graphics (2x/3x DPI PNG, SVG) and 60FPS animated typing motion videos (MP4, GIF).
How do I export 60FPS code videos?
Paste your code in the CodeMotion Editor, choose your preferred typing speed and format (MP4 or GIF), and click Record Motion Video to download an instant 60FPS animation.
Is my source code private and secure on CodeMotion?
Yes. CodeMotion is 100% client-side. All syntax highlighting, image rendering, and video encoding happen locally in your web browser. Zero code is transmitted to remote servers.
Is CodeMotion free to use?
Yes, CodeMotion is completely free, open-source, ad-free, and requires no account registration.