diffusion.css

A diffusion model that runs entirely in CSS.

No JavaScript, no WebAssembly, no images. Press the button: the stylesheet freezes a seed, turns it into noise, and denoises that into a 16×16 sprite in 12 steps.

This browser lacks :has(), which the page needs. Try a current Chrome, Edge, Firefox or Safari.

• 202,863weights
• 12sampler steps
• 5.2 MBof CSS
• 0lines of JS

How it works

1. Seed. An @property integer counts up inside a keyframe animation. Ticking the hidden checkbox pauses it, so the moment you press is the random seed.
2. Noise. Each of the 768 pixel channels hashes that seed with mod() and sums four draws into roughly Gaussian noise. That is the static on screen before you press.
3. Model. 11 small neural networks, one per noise level, trained in PyTorch on ten hand-drawn sprites recoloured to random hues, then pruned and rounded to integers. All 202,863 weights are written out as literals inside calc().
4. Sampling. 12 DDIM steps, unrolled. Every intermediate value is its own @property <integer> register, 12,518 in all, so the browser computes each once and rounds it.
5. Timeline. One @keyframes rule points the 256 pixel elements at each sampler state in turn. Nothing is pre-rendered: a different seed gives a different sprite and colour.
6. Check it. View source. There is no <script>, and a Python reference using the same integer arithmetic produces identical pixels for the same seed.

Source, training code and a reference sampler