PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Destination Card

An interactive travel destination showcase card featuring overlapping fan-out image thumbnails, dynamic glow aura, and smooth hover physics.

When to use

  • Travel packages, vacation itineraries, and location discovery cards.
  • Showcasing a collection of preview photos that gracefully fan out on cursor hover.
  • Feature highlight sections needing an atmospheric glowing ambient background.

When not to use

  • Standard dense data tables or small list items.
  • Galleries requiring full-screen slideshows or lightbox expansions.

API Reference

DestinationCardProps

PropTypeDefaultDescription
titlestring"Scenic Horizons Tour"Main headline title for the card.
descriptionstring"Discover iconic mountain..."Descriptive summary paragraph.
actionLabelstring"Explore Tour"Text label for the action button.
actionIconReactNode<CompassIcon />Leading icon rendered inside the button.
onAction() => void—Callback fired when the action button is clicked.
itemsDestinationItem[]DEFAULT_DESTINATIONSArray of destination image items with idle and hover offsets.
classNamestring—Additional CSS class names.

DestinationItem

FieldTypeDescription
idstring | numberUnique identifier for each destination item.
titlestringName or caption of the destination.
srcstringImage URL source.
idle{ x: number, y: number, rotate: number, scale: number }Transform coordinates when not hovered.
hover{ x: number, y: number, rotate: number, scale: number }Transform coordinates when hovered.
zIndexnumberStacking order of the image card.

Motion

  • Spring physics with stiffness 380, damping 24, and mass 0.8 for responsive hover spread.
  • Continuous 360-degree rotating linear ambient glow behind the card.