Exploration

Loading scene

Card Carousel

An endless row of pale grey cards runs through a window cut into a near-black page, each card stamped with a concave eight-point star and a serial number. Drag or flick the row and it glides, then settles into a slot. Whichever card lands in the centre rises out of the line.

Category
Exploration
Medium
JavaScript
Built with
React client component (Next.js)CSS ModulesGSAP (the 0.4s card lift only)requestAnimationFrame with clamped deltaIntersectionObserver (50px rootMargin)ResizeObserver (10ms debounce)
Controls
  • Drag the row, or flick it and let go.
  • Horizontal wheel or trackpad travel moves it.
  • Left and right arrow keys step one card.
  • Two buttons top right do the same.

Also inAll work