How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Rows: 224px tall, growing to 256px on hover (0.5s, cubic-bezier(0.87, 0, 0.13, 1)). Inside a centred box (at most 1280px wide, 144px right padding): - The name is 36px, weight 600, on the left. - A column 30% wide on the right holds the 18px description (line-height 28px) and a row of pill buttons, 20px apart, that fade in on hover (0.3s). - A full-size background picture fades in behind the hovered row.
- Window: 35% of the list's width and 320px tall, 20% from the left, with 6px corners and clipped content. It starts over the first row, 32px above it. - On hover it moves to the hovered row, 224px per row (0.3s ease). - Inside, the images are stacked in one tall strip, which slides so the hovered project's image fills the window. It uses a spring (stiffness 500, damping 25) that overshoots slightly and settles in about half a second.
- Under 1000px: no window or background pictures. Each row stacks the name over the description with the buttons always shown, and rows size to their content.
- Fallbacks: reduced motion moves the window and strip instantly.