How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- List: 16px padding. The list takes two thirds of the width (the last third is left empty for the frame). - Each row has three columns 16px apart: name (1 part), maker (2 parts) and year (1 part, right-aligned). - Rows are 12px uppercase (weight 600, line-height 1, letter-spacing -0.13px), 16px apart.
- Load: every cell rises out of its own mask (0.75s, ease-out). Rows start 50ms apart, after 0.95s.
- Frame: fixed 16px from the bottom-right corner, 32.5% of the screen wide, 5:3.
- Hover: entering a row adds that row's image on top of the stack, scaling from 0 to 1 from the centre (0.4s, ease-out). Every new image sits above the ones before.
- Rest: 2s after the mouse stops moving over the list, every image except the top one shrinks to 0 (0.4s) and is removed.
- Leave: when the pointer is outside the list, or scrolling carries the list out from under it, all images shrink away.
- Under 900px: the maker column and the frame hide, leaving a plain two-column list.
- Fallbacks: reduced motion shows the rows without the rise and swaps images without the scale.