Endless loops, drawn in dots.
Grain turns procedural noise into looping dithered animation, right inside a browser tab. Fifteen fields, three dither methods, nothing to render. Each card below is the live engine at work, this very second.
The real editor, not a picture of it.
This is /app, running inside the page and fully usable. Swap the preset,
pull a slider, step through frames. None of this is a recording.
How a frame is built.
Three stages: what you choose, what the renderer does with it, what you get. Adjust any input and the output responds at once, since it is the very renderer the editor uses.
Drag a node by its header, or focus one and move it with the arrow keys.
Shape
Dither
Squeezes the grayscale field into two values. Each method picks differently which cells stay lit.
Output
frame 000 of 120
Drag with the pointer, or move with the arrow keys once focused.
Like what you made? Carry this exact setup into the editor.
Open this in the editorFour ways out.
- GIF
- Up to 50fps, with frame delays that keep the loop length exact.
- Lottie JSON
- Works in After Effects, Figma, iOS, Android and on the web.
- APNG
- Full colour and true alpha, for when 256 GIF colours are not enough.
- HTML embed
- A single self-contained file that renders live in the browser, using the same renderer as this page.