ZXN Motion documentation.
Motion graphics as React components, rendered frame by frame. Open source, MIT licensed.
zinxan/motion-graphics on GitHub Get started →
Getting started
Build the library from source, write your first film, preview it in the browser player, and render it to MP4 or WebM from code or the command line.
Read guide ↗Thinking in frames
Why a film must be a pure function of its frame, the hooks and primitives that make that practical, and how to make the motion read well.
Read guide ↗Controls and props
Why film props are JSON, how defaultProps and controls let a host draw an inspector, and what element ids are for.
Read guide ↗Canvas
When to draw a frame on a canvas instead of in the DOM, the Canvas2D API, and three worked examples of particle-like work.
Read guide ↗Using packages
Which libraries a film may import, and how to drive d3, GSAP, simplex-noise and culori from the frame instead of a clock.
Read guide ↗Tempo and music
Cut a film to a track: declare a tempo, place cues in bars and beats, and derive pulses and subdivisions from one musical clock.
Read guide ↗Interface films
Product tours and feature walkthroughs: a fixed board, a shot list that names what to look at, and a cursor a control can read its own pressed state from.
Read guide ↗Performance
Why a film costs what it costs, the true story of a Matrix rain built from 1,800 divs, and a budget you can hold a film to.
Read guide ↗Recipes
Eight verified example films, what each one teaches, the line worth copying, and what to change first.
Read guide ↗Writing films with an AI agent
The MCP server that gives a coding agent the authoring rules, the docs, the verified recipes and a checker for what it writes.
Read guide ↗Composition API
Reference for films, time, timing primitives, animation maths, stage and camera, pointer, tempo and footage.
Read guide ↗