What is Motion Script?​

Motion Script lets you describe animations as TypeScript/JSX scenes and render them in real time in the browser. You write declarative scene code; the engine turns it into frames using a Skia (CanvasKit) rendering backend, and the bundled player gives you a timeline-based editor to preview, scrub, and export.

import { Scene, createRef, Rect, Ellipse } from '@motion-script/core';

export class ShapeScene extends Scene {
  *build() {
    const lens = createRef<Ellipse>();

    this.add(
      <Rect width={400} height={400} fill="white" borderRadius={20}>
        <Ellipse ref={lens} x={200} y={200} width={350} height={350} />
      </Rect>,
    );

    // Animate: tween the ellipse to x=700 over 3 seconds.
    yield* lens().to({ x: 700 }, 3);
  }
}

Animations are driven by generators — yield* a tween and the engine advances time, interpolating attributes frame by frame.

What's in 1.0.0​

This release marks the point where the core API is stable and ready for real projects:

• Declarative scenes — describe animations as TypeScript/JSX and let the engine render them frame by frame.
• Reactive signals — derive values that update automatically as time and state change.
• Skia/CanvasKit rendering — a WASM-powered backend for crisp, high-quality frames, plus a built-in video exporter.
• Rich primitives — flex layout, fills, gradients, filters, SkSL shader effects, paths, text, and audio are all supported.
• Timeline editor — the bundled player lets you preview, scrub, and export your animations with hot reload.

Getting started​

Scaffold a new project with the create CLI:

npm create motion-script@latest

Then:

cd my-video
npm install
npm run dev

This launches a Vite dev server with the Motion Script player. Edit the scenes in src/, and the preview updates with hot reload.

For a full walkthrough, see the Getting Started guide.

Thank you​

A huge thank you to everyone who tested early builds, filed issues, and helped shape the API along the way. This is just the beginning — we can't wait to see what you create.

Happy animating! 🎬

Here are a few tips you might find useful.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

• 2019-05-30-welcome.md
• 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.