Three timing systems
Ripple derives delay from the center, wave offsets rows and columns, and scan drives a clear directional pass.
Graphics & systems
Dot Matrix
Program a responsive field of light with radial echoes, directed waves, or scanning signals. Everything stays inside a small bounded CSS grid.
A generative feel without a render loop
Small CSS signals, deliberately orchestrated.
Create dashboard atmospheres, audio-reactive-looking panels, launch graphics, and digital identity moments with predictable DOM and no canvas work.
Bounded density
Choose up to a 12 by 8 field. The maximum remains 96 simple elements, even at the densest setting.
CSS-only export
The finished field is plain HTML and CSS with a static reduced-motion state and no runtime script.
Three-step workflow
How to use the Dot Matrix studio
- Select the signal
Start from six distinct compositions spanning bright systems, editorial paper, and quiet terminal moods.
- Set density and shape
Balance rows, columns, dot size, spacing, circles, squares, or diamonds.
- Tune the rhythm
Adjust speed and intensity, then copy a responsive fragment or standalone page.
Questions, answered.
Does the matrix use canvas?
No. It is a bounded CSS grid, so there is no requestAnimationFrame render loop or pixel buffer.
How many elements can it create?
At most 96 dots in the exported field.
What happens with reduced motion?
All dot animation stops and the final field remains visible.
Can I change the generated CSS?
Yes. The output is readable HTML and CSS with configuration values exposed as custom properties.