Skip to content
The Design Stack

How it behaves

Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.

  • Row: a strip 400px tall, centred on a black section, inside a box 90% of the screen wide (at most 1400px). Slivers sit 5px apart and the row is always centred.
  • Open: exactly one sliver is open at a time, 400px wide, and the first one starts open. - Desktop: hovering a sliver opens it (and leaving keeps it open until another is hovered). - Under 1000px: tapping opens it, and tapping it again returns to the previous one. The strip shows 10 slivers and an open one is 100px.
  • Motion: widths animate over 1s on cubic-bezier(0.075, 0.82, 0.165, 1).
  • Photos: each photo is 400px wide, scaled 2× and centred, so a closed sliver shows a thin crop from the middle of the frame.
  • Footer: a label on the left and a bracketed link on the right, along the bottom of the section with 32px padding.
  • Fallbacks: reduced motion switches instantly. Keyboard users can tab to each sliver to open it.

More prompts