Skip to content

Motion Canvas, TypeScript, and React — Summary Reference

⚙️ Motion Canvas Overview

  • Purpose: A TypeScript-based animation framework for web animations using code and timelines.
  • Rendering: Built on HTML5 Canvas API (2D raster drawing).
  • Programming Model: Combines functional-reactive programming, generator functions, and declarative scene graphs.
  • Inspiration: React (declarative), Unity/Manim (timeline & coroutines), creative coding (canvas control).

🧩 Core Motion Canvas Concepts

Concept Description Analogy / Relation
Scene Graph Tree of visual elements (Circle, Rect, etc.) Object hierarchy
makeScene2D() Wraps generator function into a scene Scene “main” function
function* (Generator) Function that can pause using yield Coroutine
yield* Runs animation, waits until it finishes Blocking call
createSignal() Reactive variable Observable property
createRef() Reference to scene object Pointer
JSX Syntax HTML-like shorthand for objects Struct-style construction
Reactivity Auto updates on dependency change Automatic dependency tracking
size={() => radius() * 2} Function binding for reactive property Function pointer / computed property

💡 Key Syntax Examples

export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();
  const radius = createSignal(50);

  view.add(<Circle ref={circle} size={() => radius() * 2} fill="blue" />);
  yield* radius(200, 1).to(50, 1);
});

Breakdown

  • function* → Generator for time-based animation
  • yield* → Sequential synchronization
  • createSignal() → Reactive variable
  • size={() => radius() * 2} → Computed reactive property
  • createRef() → Object reference for later modification

🧠 TypeScript Core Concepts (C Programmer’s View)

Concept TypeScript C Equivalent
Variable Declaration let x: number = 5; int x = 5;
Typing Optional static types Required static types
Functions function add(a: number, b: number) int add(int a, int b)
Arrow Functions (a, b) => a + b Anonymous/lambda
Interface interface Point {x: number; y: number;} struct Point {int x; int y;};
Class class Foo {} C++ struct with methods
Generics function id<T>(x: T): T {} C++ templates
Modules import { add } from './math' #include
Async/Await await fetch() Coroutine / blocking call

🧭 React Concepts that Influence Motion Canvas

  • Declarative Programming: Describe “what” not “how.”
  • Components: Reusable visual units (<Circle />).
  • Props: Inputs or parameters to components.
  • Reactivity: UI auto-updates when state changes.
  • JSX: HTML-like syntax for defining structures.

🔁 Functional & Reactive Programming Features

  • Arrow Functions (() => expr) → Inline anonymous functions.
  • Signals → Reactive data; trigger updates automatically.
  • Declarative Dependencies → Automatic recomputation.

Example:

size={() => radius() * 2}

Means “size is always twice the current radius.”

⚖️ Core Conventions Summary

  1. yield* → Sequential animation timing.
  2. createSignal() → Reactive state variable.
  3. Arrow functions → Computed, reactive expressions.
  4. JSX → Declarative scene definition.
  5. createRef() → Direct reference for object manipulation.
  6. Type annotations (: number, <Circle>) → Type safety.
  7. Reactive design → Automatic updates based on dependencies.