Location Map — Animated location card component

LocationMap is an interactive, animated location card component for Framer that visualizes a specific location with coordinates. It includes hover effects, 3D tilt, a subtle grid overlay, a live indicator, and a clickable map link. The card can be collapsed or expanded with smooth motion animations, and it supports both light and dark modes.

Perfect for dashboards, landing pages, portfolio websites, and any UI that requires visually appealing location displays.

Key Features

• Dynamic Location & Coordinates: Display any location name with its coordinates.

• Expandable Card: Toggle between collapsed and expanded views with smooth animation.

• 3D Tilt Effect: Interactive tilt based on mouse position for depth effect.

• Hover Animations: Subtle hover highlights and animated text and icons.

• Live Indicator: Optional “Live” status with animated pulse.

• Grid Overlay: Optional subtle grid when collapsed.

• Map Link: Option to open the location in Google Maps on click.

• Dark Mode Support: Automatically adjusts colors for dark/light themes.

• Custom Fonts & Colors: Choose your own fonts for location and coordinates, and set a custom accent color.