Skip to main content

Introduction

MotionScript is a TypeScript-first animation library for creating programmatic 2D (and 3D) animations. You describe scenes as generator methods on a Scene class, compose animations with yield*, and render to video.

Quick start​

The fastest way to get going is to scaffold a new project:

npm create @motion-script@latest

Optional component packages​

npm install @motion-script/latex   # LaTeX equations
npm install @motion-script/code    # Syntax-highlighted code blocks
npm install @motion-script/three   # Three.js 3D scenes

How scenes work​

Every animation is a Scene — a class that extends Scene and implements a build() generator method. Inside build() you add nodes to the scene and use yield* to drive animations frame by frame.

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

export class MyScene extends Scene {
  *build() {
    const box = createRef<Rect>();

    this.add(
      <Rect ref={box} width={200} height={200} fill="royalblue" borderRadius={16} />
    );

    // Slide right over 1 second, then wait
    yield* box().to({ x: 400 }, 1);
    yield* wait(0.5);
  }
}

Key concepts:

  • this.add(node) — attach a node to the scene
  • createRef<T>() — get a typed reference to a JSX node
  • yield* node.to(props, duration) — animate properties over time
  • yield* wait(seconds) — pause for a duration

Next steps​