a fork of Motion Canvas
Create animations with code.
A TypeScript framework for creating animations with code. Write animations with JSX and generators.
$npm create @canvas-commons@latest
trusted by creators makingexplainer videos·math & CS visualizations·interactive blog posts·lecture notes
The code is the animation.
Write structure just like building a website. Use generators to animate them.
THE EDITOR
Some things are easier with a mouse.
Write the animation in code, then sync it to audio or preview it in your browser. Tweak with the browser and see your changes in real time.
timeline
waitUntil('reveal')
scene
labels
audio
yourblog.dev/visualizing-sorting
RENDER & EMBED
Render with Javascript.
Render to an MP4 for editing and uploading, or build the animation and drop it into a webpage. Animations can respond to the page and users; try changing the theme on this page!
Great for interactive blog posts, docs and lecture notes.
BUILDING ON MOTION CANVAS
A few new features.
Migrating is mostly a package rename, with a couple exceptions. Check the migration guide for more.
Typesetting
- Txt.split() into grapheme / word / sentence nodes
- textPath along any SVG path or live Curve
- Knuth–Plass wrapMode, hyphenation, justify
- Wrap text around any shape
Animation
- Rough, hand-drawn shape rendering
- Animated layouts
- Explicit space positioning
- Better path, SVG, and image interpolation
- Simplified LaTeX editing
Quality of Life
- Export and Copy Frames
- Mediabunny Exporter (2x faster)
- Copy Coordinates in Viewport Space
Start with one command.
$npm create @canvas-commons@latest