Move the pointer over the letters to scatter them. Click for the next word.
Particles on springs, each holding its place inside a letter. The pointer scatters them; after a click (or a few seconds) they spell the next word.
- Canvas 2D
- Spring physics
How it works
The words are drawn onto a hidden canvas in the site's own typeface, and the targets are sampled from the painted pixels. Every particle is a spring tied to one target — slightly underdamped, so it overshoots and then settles. On a word change everyone gets a random shove, which is why they scatter and re-gather.
Moving particles are sorted into three colour buckets by speed and drawn one fill per bucket — ten thousand of them run comfortably.
Want something like this on your own site?
Motion and WebGL are part of what I do — we'll work out what fits your site while keeping it fast.
Get an estimate