How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Easing: everything uses one sharp ease-in-out, cubic-bezier(0.9, 0, 0.1, 1), and starts after a 0.3s pause.
- Counter: five numbers (00, 27, 65, 98, 99) at 240px, weight 400, centred. Each digit sits in its own clipping window. - Number *i* rolls in from 120% below at *i* seconds (1s per digit, the second digit 75ms after the first). - It rolls out upward (to -100%) one second later as the next number rolls in.
- Spinner: a 50px ring with a 1.4px border and a faint top segment, spinning once a second, 10% up from the bottom. It fades out (0.3s) when the counter ends.
- Name: at the same moment, two 32px words (weight 500) rise into the centre, the first from above and the second from below (1s), 8px apart.
- Hairline: a 1px line in the light colour at 12.5% opacity, down the middle of the screen, grows from the top to full height (1s). It fades out 0.3s later.
- Part: 0.3s after the line is drawn, the first word drops out below and the second lifts out above (1s).
- Lift: 0.75s after the words start leaving, the left half-panel wipes up to its top edge (1s), and the right half follows 0.1s later. Then the loader is removed and scrolling unlocks. The whole intro takes about 10.5s.
- Under 1000px: the digits are 112px.
- Fallbacks: reduced motion skips the intro. The page underneath is always in the DOM.