How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Header: a small bracketed label and a 80px uppercase heading, centred, 64px above the grid.
- Grid: 90% of the section wide and 60% tall, with a 1px border and 1px dividers. There are two rows: three equal cells, then five. Names are 20px uppercase, centred in the light colour.
- Block: the accent-coloured block starts behind the first cell. When the cursor moves into another cell, the block slides and resizes to cover it (0.25s ease). - The previous name returns to the light colour and the new name turns the dark colour. - The new name scrambles: each letter swaps to a random character every 30ms, 3 times, 20ms apart, and all letters have settled within 0.3s.
- Under 1000px: no block. The heading drops to 36px, the padding to 16px, the cells stack in one column, 64px each with dividers, and the section is 110% of the screen tall.
- Fallbacks: reduced motion keeps the block moving without the scramble.