How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- List: in a box up to 1200px wide with 32px padding. Each row is 112px tall with a 112px uppercase name (line-height 0.9).
- Photo: a hidden 0-width window before the name opens to 168px (0.3s), and the 160px photo inside scales from 1.5 to 1 (0.3s), anchored left.
- Scramble: each letter of the hovered name swaps to a random character every 25ms, 5 times, 25ms apart letter to letter (at most 0.1s per letter), then shows the real letter. The name stays in the accent colour until the pointer leaves.
- Label: it sits 32px from the top-right of the list, in the muted colour. On hover it slides (0.4s ease-out) to line up with the row's centre, kept 20px inside the list, and shows that service's keyword. When the pointer leaves the list it returns to the top with the first keyword.
- Under 1000px: rows are 48px tall with 44px names, and there is no photo, label or scramble.
- Fallbacks: reduced motion keeps the photo and colour change without the scramble or slide.