Motion graphics
with CODE
An open-source motion design tool, inspired by tools like Manim to help developers and educators create stunning animations, all from code!
Best of Both Worlds
Some things are easier with a mouse. Write animations in TypeScript with your favorite IDE; use a web-based editor to sync them with audio.
Powered by Vite, a real-time preview of your animation automatically updates upon any changes.
Procedural for a Change
Let the execution of your code define the animation. Write generator functions that describe what should happen — step by step.
export default createScene(function* (stage) {stage.set({ fill: "#0D0F15", padding: 80 });const card = createRef<Rect>();stage.add(<Rect ref={card} width={240} height={120} fill="#5ea8d8"><Text text="Hello" fontSize={32} fill="white" /></Rect>);// The execution of your code defines the animationyield* wait(0.5);yield* sequence(card().to({ cornerRadius: 60 }, 0.8, easeOut('back')),card().to({ rotation: 360 }, 0.8),);});
Everything you need to CREATE
A complete toolkit for motion designers and creative developers. From vector shapes to GPU shaders, all driven by code.
Animate with CODE
Describe motion the way you describe logic. Compose animations in TypeScript with full type-safety, reuse components, and let Vite stream every change into a live preview.
- TypeScript
- Component-driven animations, fully typed
- Instant preview
- Vite hot-reloads every change live
- Git-friendly
- Readable diffs you can actually review
Flexbox Layouts
Lay out scenes with a familiar flexbox model — rows, columns, gaps, wrapping — and watch everything reflow as your content animates.
Text Animation
A full text engine built for motion: animate variable-font axes, paint glyphs with gradient and image fills, stroke and dash letterforms, and autosize to fit.
Custom SkSL Shaders
Author GPU shader effects in SkSL and apply them to any node. From vignettes and ripples to chromatic aberration — real-time visuals that animate frame by frame.
Support the project today
MotionScript is open source and thrives on community contributions. Whether you're fixing bugs, adding features, or improving docs — every contribution matters.