Destinos
Snap carousel with centered scale
Horizontal cards with scroll snap where the centered card grows and brightens while the side cards shrink.
Settings
Code
<div class="uv-tsn"><p class="ti">Destinations</p><div class="sc" tabindex="0" aria-label="Destinations"><article style="--a:#86efac;--b:#15803d"><b>Mountains</b></article><article style="--a:#fde68a;--b:#d97706"><b>Desert</b></article><article style="--a:#93c5fd;--b:#1d4ed8"><b>Ocean</b></article><article style="--a:#bbf7d0;--b:#166534"><b>Forest</b></article><article style="--a:#e0f2fe;--b:#0369a1"><b>Glacier</b></article></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Text & scroll
See all Text & scrollWhere to use it
A horizontal strip of destination cards that snaps each card to the center. The card closest to the middle reaches full size and opacity, and the neighbours shrink and fade according to their distance, which gives a gentle coverflow feel on touch screens, trackpads and mouse wheels alike.
Snapping is pure CSS with scroll snap, and a short script measures each card's distance to the center to set a single variable. The strip is focusable for arrow key scrolling, and the edges fade out with a mask. Replace the gradients with photos.