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.