Slate — browser-native motion studio for mathematics

Slatemotion studio

Idle

What should the scene explain?

Starting points

Built-in scenes · no key needed

Run log

This JSON is the whole scene. Edit any number and press Apply — the renderer rebuilds instantly. Nothing here is code; the model only ever writes data.

Coordinates

The stage is 16 × 9 units, origin dead centre. x runs −8→8, y runs −4.5→4.5 and points up, like a blackboard rather than a screen.

An object

{"id":"c","type":"circle","x":0,"y":0,"r":1.2,"color":"#58C4DD"}

An animation

{"type":"draw","target":"c","duration":1.2} — entries run one after another. Add "with":"prev" to run alongside the previous one, or "start":4.5 to pin an absolute time.

Targeting parts

Composite objects expose their cells: arr[3] is the fourth array cell, m[0,2] a matrix entry, tree[root] a node. Highlight them directly.

Keyboard

Space play / pause
R restart · F fullscreen
← → step 0.1s · \ hide panel

Your API key

It is held in memory for this tab only — no storage, no proxy, no telemetry. Requests go straight from your browser to Google. Reload and you re-enter it. If you host this file publicly, do not bake a key into it.

Export notes

WebM records real frames off the stage. GIF is quantised to 256 colours at 12 fps. Both render offline, frame by frame, so the result is smooth even if your machine is not.

untitled scene

Composing

0.0 / 0.0s

Speed 1.0×

Score

No scene loaded. Generate one, or pick a built-in.