v155 · css random()

Organic UI

Randomness is easy to overdo. This is the restrained version: a pinboard where each card gets a tilt of a degree or two and a few pixels of offset, so the grid stops looking like a spreadsheet. Turn the amount up to see where it stops being charming.

Pinboard

Every card also carries random(--tilt, …) shared between the rotation and the offset, so a card that leans left also sits slightly left — correlated jitter reads as physical, independent jitter reads as noise.

What the page has to ship

With random()

Without it

const cards = board.querySelectorAll(".pin");
for (const card of cards) {
  const t = (Math.random() * 2 - 1) * MAX_TILT;
  card.style.transform =
    `rotate(${t}deg) translate(${t * 2}px, 0)`;
}
// ...and again for every card added later,
// and nothing is tilted until this runs.

see also