How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Rows: each row is an 80px window with a 1px ink rule under it. Inside is a 240px strip of three 80px bands: light (title and type), dark (project and link), light again (title and type).
- Roll: the strip rests at -160px (showing the bottom light band) or 0 (the top light band). Both look identical. - Entering from above: the strip snaps to -160px and slides to -80px, so the dark band drops in from the top. - Entering from below: the strip snaps to 0 and slides to -80px, so the dark band rises from the bottom. - Leaving: the strip slides on to -160px (leaving upward) or back to 0 (leaving downward). - Every move takes 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94).
- Scrolling: the rows also react when they scroll under a still cursor (mouse wheel or trackpad).
- Preview: a fixed panel 15px from the bottom-right corner, 30% of the viewport wide and tall. Each row you enter adds its photo on top of the others, scaling in from 0 to 1 over 0.4s. - Leave the list and every photo scales away. - Rest inside the list for 2s and all but the newest photo are cleared.
- Type: 72px extra-bold uppercase with line-height 0.9. The title sits on the left and the type on the right, with 15px side padding. A small 24px bold label sits above the list.
- Under 768px: rows keep their 80px height and roll, but the type shrinks to 20px so long titles fit, and the preview is 45% wide by 22% tall.
- Fallbacks: reduced motion switches bands without sliding. On touch devices, tapping a row plays the roll; rows with an href open their link.