Author animated explainer diagrams as .anim.json files. Describe what is true at each step, scrub the timeline, and export to MP4 or GIF, with your agent doing the drawing.

An animation is a diagram that plays. Use one to show how a system, protocol, or process behaves over time: a request moving through a cache, a sync handshake, a pipeline filling stage by stage. Animations live in your project as .anim.json files and open in a dedicated editor with a live stage and a scrubbable timeline.

The animation editor showing a cache-aside read path diagram on the stage, with a step-based timeline below and playback controls — The stage shows the scene; the timeline below is the list of steps. Drag the playhead to scrub, or drag a step boundary to change how long a beat holds.

Steps, Not Keyframes

An animation is a named scene plus an ordered list of steps. Each step says what is true at that beat: a node becomes active, an edge starts flowing, a label lights up. The editor handles the motion between beats, so there are no keyframes, easing curves, or property tracks to manage.

States are cumulative. A step asserts only what changes, and anything it does not mention keeps whatever the previous step left it in.

The scene is built from five part types: nodes, edges, labels, shapes, and HTML blocks for real product UI the primitives cannot draw. Parts take semantic tones that follow the viewer's theme, so one file reads correctly in light and dark mode. Parts can also show a spinning indicator for a running or loading state.

Working in the Editor

Scrub and retime. Drag the playhead through the timeline, or drag a step boundary to change a beat's duration.
Click a part to talk about it. Clicking any node, edge, or label puts it in chat context along with its current state and time, so you can ask your agent to change exactly that thing.
Plays inline in the transcript. When an agent creates or edits an animation, it appears in the session transcript as a click-to-activate stage, so you can watch the result without opening a tab.

Export

Render an animation to a standalone HTML file, an animated GIF, or an MP4. The exports are self-contained, so they drop into a doc, a slide, or a social post as they are.

Plain-Text Files

An animation is a single .anim.json file: plain JSON, no binary format. It sits in your repository with everything else, syncs like any other file, and diffs readably in a pull request. Any agent can author or edit one with ordinary file edits.

Working with AI

The /animate command creates an explainer from a description. You can also just ask:

"Animate how a request flows through the cache-aside read path."
"Turn this architecture diagram into an animation that walks through the deploy."
"Make the retry step hold longer and mark the queue as running while it waits."
"Export this animation as an MP4."

Installing

Animation is installable from the Extensions marketplace. See Extension System & Marketplace.