What it is
Our headlines set one letter at a time. Each letter rises into place from just below the line, a few milliseconds after the one before it, so the heading reads as if it is being set.
It is plain page text with no WebGL, so it works in every browser. Press Replay to set the line again, and use the sliders to change the timing.
How it's made
- Split into letters · A script splits the line into words and letters. Each letter sits in its own clipped box, so it rises into view without covering its neighbours.
- One stagger, one curve · Each letter starts 40 ms after the one before it and takes 450 ms to rise, on the same easing curve as the rest of the site. CSS transitions move the letters.
- Read as one line · Screen readers get the whole line at once, from a hidden copy. The moving letters are hidden from them.
- Still when you ask · With reduced motion turned on, the line shows whole, with no movement. It needs no WebGL, so it runs in every quality tier.
What we learned
Giving screen readers one whole line, and hiding the moving letters, kept the effect from costing anything in access.
If motion bothers you
With reduced motion turned on, the line shows whole and Replay does not move it. Every control works with a keyboard.
