Every dot is an empty element. CSS throws it somewhere with the new random() function: its place, its size, its colour, its spin and how late it reacts. Scroll or drag, and the dots gather into the text you type. The text and the colour go in the address, so you can send them to someone. They get the same words, with a mess of their own.
- Scroll or drag
- up to gather the dots, down to scatter them
- Type
- new words, and the dots move to their new places
- Colour
- one of the site’s colours or your own, for the dots in order
- Throw again
- new dots, so every one of them rolls again
How it’s built
JavaScript makes empty elements and moves one number, --t, from 0 to 1. The rest is CSS: random() for the mess, calc() for the way back to order.
- A throw per element.
random(--x element-scoped, -48cqi, 48cqi)gives every dot a place of its own. Each random() needs its own name: without one, all of a dot’s random()s share one throw, and my first try put every dot on one diagonal. - Order from a hidden canvas. Your text is drawn on a canvas the size of the screen and sampled into a grid, about one point per 900 px². Each dot gets its point as
--oxand--oy. - Late on purpose. Every dot also rolls when it starts to move (
--late), so the crowd doesn’t arrive as one block. - Cheap to move. Dots grow with
scaleand move withtranslate, so scrolling never touches the layout. They only get a transition while the text changes. - A fallback. A browser without random() gets the same custom properties from
Math.random(). The line under the controls tells you which one you got.