gamma logo

1

Location Map

PreviousNext

An interactive 3D-tilting location card with expandable animated map, live indicator, and motion-based hover effects.

Installation

pnpm dlx shadcn@latest add @gammaui/location-map

Usage

import { LocationMap } from "@/components/gammaui/location-map"
 
export default function Page() {
  return (
    <div className="p-10">
      <LocationMap
        location="San Francisco, CA"
        coordinates="37.7749° N, 122.4194° W"
      />
    </div>
  )
}

Examples

Default

<LocationMap />

Custom Location

<LocationMap location="Berlin, Germany" coordinates="52.5200° N, 13.4050° E" />

With Custom Styling

<LocationMap
  className="max-w-sm"
  location="Tokyo, Japan"
  coordinates="35.6762° N, 139.6503° E"
/>

Props

PropTypeDefaultDescription
locationstring"San Francisco, CA"Displayed location name
coordinatesstring"37.7749° N, 122.4194° W"Coordinates shown when expanded
classNamestring-Optional wrapper classes

Features

  • 3D Hover Tilt powered by motion values & springs
  • Expandable Map View with animated roads & buildings
  • Live Status Indicator
  • Animated SVG Streets & Buildings
  • Smooth Layout Transitions
  • Click-to-Expand Interaction
  • Fully Theme-Aware (light & dark mode)
  • No external map APIs required

Behavior

  • Hover to tilt the card in 3D space
  • Click to expand and reveal the animated map
  • Hover effects enhance depth, glow, and motion
  • Coordinates fade in only when expanded

Use Cases

  • Location previews
  • Event cards
  • Office & company locations
  • Dashboard widgets
  • Interactive UI showcases
  • Landing page highlights