Code.Movie
Syntax highlighting, animated!
Level up your coding content with mighty morphing syntax highlighted source code
Why?
Animations make changes easy to follow, improving slide decks, codings tutorials, tools or video content. Also animations look pretty, are easy to create, and work reliably with zero dependencies.
How?
Frames of code are run through a semantic diffing algorithm and the resulting deltas get turned into animation information … and finally into bog-standard HTML and CSS. No runtime JS required!
Get started!
Code.Movie is just JavaScript library that's fast enough to run in web frontends, but also works server-side. Grab it from NPM or a CDN, add it to your project, follow the tutorial, done!
Latest update: Improved animation heuristics in 0.0.31
The Code.Movie core library has been upgraded with substantially improved animation heuristics
Performant
Fast enough to compute client-side animations on the fly. Throw a script into your page, done.
Flexible
Works in browsers as well as with Node.js and friends. Strings in, strings out!
Robust
Fault-tolerant parsers based on Lezer effortlessly deal with even the most broken code.
Reliable
Zero run-time dependencies - only HTML and CSS. Zero compile-time dependencies as well!
Customizable
Several themes, 140+ CSS variables and multiple styling hooks are available.
Deterministic
No AI involved at any stage. Only hand-crafted heuristics built by a real person.