Location map

Overview

The location map is a compact card that sits quiet until you touch it. Hover to tilt it toward the cursor, then click to expand a stylized street map with a dropped pin and the coordinates line. It reads as a single card in both states: the label, icon, and underline stay put while the map and pin animate in.

Use it wherever a place needs a small, tactile presence: an office location, an event venue, a shipping origin, or a live-status readout. The collapsed tile stays scannable; the expanded view carries the map and coordinates.

Installation

Import the pattern from loosethreads:

import { LocationMap } from "@pulp/loosethreads/patterns"

Usage

Pass the place name and its coordinates as strings. Both are optional and fall back to a Brooklyn sample, so an empty <LocationMap /> still renders:

import { LocationMap } from "@pulp/loosethreads/patterns"

function Office() {
  return (
    <LocationMap
      location="Brooklyn, NY"
      coordinates="40.6782 N, 73.9442 W"
    />
  )
}

Props

Anatomy

The collapsed card holds a layered-map icon, a Live pill with an iris dot, the location name, and a gradient underline. Moving the cursor tilts the card in 3D. Clicking expands it to reveal a stylized Brooklyn street grid drawn in SVG, a center pin with an iris glow, and the coordinates line fading in below the name.

The map geometry is fixed. The street grid renders a stylized Brooklyn regardless of the location and coordinates text, which are labels, not a live map lookup.

Accessibility

• Control semantics. The card is a role="button" with tabIndex=0, aria-pressed tracking the expanded state, and an aria-label that names the location and the next action.
• Keyboard. Enter or Space toggles between the collapsed and expanded views.
• Motion. The 3D tilt honors prefers-reduced-motion and stays still for users who opt out. The remaining reveals are user-triggered and run under five seconds, so no further gating is required.