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
Install the packages, 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
Nine verified recipes and one larger showcase film, with rendered videos, techniques and starting points.
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 ↗