AlgoMotion

An animation studio for algorithms, in the browser

NEXT.JS
REACT 19
TYPESCRIPT
PIXI.JS
GSAP
SUPABASE

Summary

AlgoMotion is a real-time studio for animating algorithms and data structures — compose CS primitives on a canvas, drive them from code, scrub a timeline, export to video or GIF. Pixi.js and GSAP under a React shell, with a custom DSL that keeps the code and the animation in lockstep. In development.

A · Problem

Explaining an algorithm visually means a bad trade: Manim needs Python and offline renders, slideware can't be programmed, drawing tools have no timeline. There's no real-time, browser-based studio built for teaching computer science.

B · Approach

React renders only the chrome; the canvas is imperative Pixi.js driven by a SceneManager, with GSAP animating display objects directly and Zustand as the serializable source of truth. A custom DSL compiles scripts into scenes, and an execution controller line-highlights the code in Monaco as the visualization advances — source and motion, in sync.

C · Artifacts

data-structure renderers: 22
test files: 168
export formats — video · gif · svg · png · html: 5
built-in algorithm templates: 5

Renderers from arrays and trees to CPU datapaths and cache hierarchies; an ELK-laid-out graph engine; FFmpeg-in-WebAssembly video export; Supabase auth, storage, and Postgres behind it.

D · Outcome

Author an algorithm once and watch the source and the animation move together — then export it anywhere. In development.

MemberBay