How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Layout: the section is 150% of the screen tall, with the rows centred vertically. Each row is 250px tall and 125% of the section wide, 16px below the one before. The tiles share the row equally, 16px apart, with 16px corners.
- Slide: tied to the scroll, from when a row's top enters the bottom of the screen until it is 1.5 row-heights above the top. - Rows 1 and 3 slide right, from -15% to 5% of their width. - Rows 2 and 4 slide left, from 0% to -15%.
- Weight sweep: tied to the scroll, from when a row's middle reaches the bottom of the screen until its top reaches the top. - Each letter of the word animates from weight 100 to 900 over one unit of time, and the next letter starts 0.35 units later. - In rows 1 and 3 the sweep starts from the last letter, and in rows 2 and 4 from the first.
- Word: 68px heavy condensed uppercase (line-height 0.9, letter-spacing -2px), centred in its tile, using a variable font so every weight in between is smooth.
- Under 1000px: the section is one screen tall, the rows are 150px tall and 250% wide, rows 2 and 4 start at -35%, and the word is 40px.
- Fallbacks: reduced motion shows the rows still with the words at full weight.