MotionScript — Open Source Motion Design Tool | MotionScript

Skip to main content<br>FeaturesDocsAPIBlogGitHubDiscordGet Started

Motion graphics<br>with CODE<br>Open Source · Free Forever<br>An open-source motion design tool, inspired by tools like Manim to help developers and educators create stunning animations, all from code!<br>Get Started<br>npmyarnpnpmbash<br>$npm create @motion-script@latest

0100200300400500600700800

1x00:00:000

Rect<br>Text<br>Ellipse

0f

20f

40f

60f

80f

EditorBest of Both Worlds<br>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.<br>Powered by Vite, a real-time preview of your animation automatically updates upon any changes.<br>Launch EditorRead the Docs

ProceduralProcedural for a Change<br>Let the execution of your code define the animation. Write generator functions that describe what should happen — step by step.

scene.tsCopy<br>export class HelloScene extends Scene {<br>*build() {<br>this.set({ fill: "#0D0F15", padding: 80 });

const card = createRefRect>();

this.add(<br>Rect ref={card} width={240} height={120} fill="#5ea8d8"><br>Text text="Hello" fontSize={32} fill="white" /><br>Rect><br>);

// The execution of your code defines the animation<br>yield* wait(0.5);<br>yield* sequence(<br>card().to({ cornerRadius: 60 }, 0.8, easeOutBack()),<br>card().to({ rotation: 360 }, 0.8),<br>);

FeaturesEverything you need to CREATE<br>A complete toolkit for motion designers and creative developers. From vector shapes to GPU shaders, all driven by code.

Code-firstAnimate with CODE<br>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.<br>TypeScriptComponent-driven animations, fully typed<br>Instant previewVite hot-reloads every change live<br>Git-friendlyReadable diffs you can actually review

scene.ts · live

reflowing

LayoutFlexbox Layouts<br>Lay out scenes with a familiar flexbox model — rows, columns, gaps, wrapping — and watch everything reflow as your content animates.<br>Flexbox engineAuto reflowNestable

text on path

TextText Animation<br>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.<br>Variable fontsRich fillsDashed strokesAutosize

GPU effectsCustom SkSL Shaders<br>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.<br>SkSL shadersStackableAnimatable uniformsReal-time

Chromatic Aberration

Support the project today<br>MotionScript is open source and thrives on community contributions. Whether you're fixing bugs, adding features, or improving docs — every contribution matters.<br>Star on GitHubRead Contributing Guide