How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- List: each name is 112px uppercase (line-height 0.9), with 32px side padding. The list has 160px of space above and 320px below.
- Preview: each name owns a hidden photo that sits directly under its row, the full width of the list and three rows tall, above the names that follow.
- Hover in: - The photo's bottom edge sweeps from its top to its bottom (0.3s, fast then slow). - The photo scales from 1.5 to 1 (0.75s, same ease). - The name turns the accent colour. Its letters, except the first, each swap to a random character every 25ms, 5 times, 25ms apart letter to letter (at most 0.1s per letter).
- Hover out: - The photo's top edge sweeps down to its bottom, wiping it away (0.5s). - It scales back to 1.5 (0.5s). - The name returns to the ink colour right away.
- Under 1000px: no hover effects. Names are 56px and wrap if needed. Each photo sits in the flow under its name, 300px tall with 16px padding, and there are 32px between entries. The list has 80px of space above and below.
- Fallbacks: reduced motion shows and hides the photo instantly, with no zoom or scramble.