Top Destinations

A dual-row scroll-driven destination showcase inspired by the Exploreo travel template. As the user scrolls down the page, two parallel rows of destination cards travel in opposite directions via GSAP ScrollTrigger scrub animation.

Each card features full-bleed photography, subtle vertical typography by default, smooth hover scaling, and an interactive bordered overlay revealing place counts, tags, and an "Explore" action.

Dual-row parallax travel

Scroll down to watch top and bottom rows travel in opposite directions across the screen.

scrollOffset450: controls the horizontal travel distance in pixels scrubbed by the scrollbar.
items: accepts an array of destination objects with title, country, image, placesCount, and tag.
onExplore: callback fired when a card's Explore action button is activated.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Top Destinations

npx shadcn@latest add @algorize-ui/top-destinations

components/custom/blocks/TopDestinationsBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Top Destinations to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

gsap is an npm package.

npm install gsap

Features

Opposite Direction Scrub

Row 1 and Row 2 glide in opposite directions as the viewport scrolls, creating an immersive cinematic depth effect.

Interactive Hover Frame

Hovering over any card dims the background, smoothly frames the destination with a frosted border, and displays place count and explore CTA.

Flexible Split or Unified Rows

Pass a single unified items array to automatically split across rows, or supply row1Items and row2Items explicitly.

Reduced Motion Safe

Automatically respects user motion preferences, gracefully falling back to a clean horizontal carousel without jarring animations.

Props Reference

Prop	Type	Default	Description
`title`	`string`	`"Top Destinations"`	Section main heading displayed above the card rows.
`subtitle`	`string`	Exploreo lead copy	Secondary descriptive paragraph beneath the title.
`badgeText`	`string`	`"Top Destinations"`	Text rendered in the circular map pin badge header.
`badgeIcon`	`ReactNode`	`<MapPin />`	Custom icon placed inside the badge pill.
`items`	`DestinationItem[]`	`DEFAULT_DESTINATIONS`	Complete list of destinations, automatically split 50/50 between the two rows.
`row1Items`	`DestinationItem[]`	First half	Explicit destination items for the top row (travels towards the left).
`row2Items`	`DestinationItem[]`	Second half	Explicit destination items for the bottom row (travels towards the right).
`scrollOffset`	`number`	`450`	Horizontal travel distance in pixels as the section traverses the viewport.
`scrollerRef`	`RefObject<HTMLElement>`	`undefined`	Custom scroll parent element driving ScrollTrigger (useful inside sandboxes and modals).
`onExplore`	`(item) => void`	`undefined`	Click handler triggered when a user explores a specific destination.