A street map card that draws the route from the station to your studio for walking, tram or bike, with a traveling marker and step list. A validated visit form overlaps the map and confirms with the chosen route.
We are a six minute ride from Central Station. Pick how you are getting here and send us a note so someone is at the door.
npx shadcn@latest add https://hyperblur.dev/r/contact-route-map.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/contact-route-map.tsx.
import { ContactRouteMap } from "@/components/hyperblur/contact-route-map"
<ContactRouteMap onSubmit={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Visit the studio" | Small label above the title. |
| title | string | "Come by for coffee, leave with a plan" | Section heading. |
| subtitle | string | Paragraph beside the heading. | |
| studio | string | "Halden Studio" | Destination name on the pin and the form card. |
| address | string[] | 2 lines | Address lines on the form card. |
| hours | string | "Open today until 18:00" | Opening note with a status dot. |
| origin | string | "Central Station" | Starting point label on the map. |
| routes | { mode: "walk" | "transit" | "bike"; label: string; minutes: number; distance: string; steps: string[] }[] | Walk, Tram, Bike | Route options. Each mode has its own drawn path. |
| defaultMode | "walk" | "transit" | "bike" | "transit" | Route shown first. |
| mapLink | { label: string; href: string } | { label: "Open in maps", href: "#" } | Link to an external map. |
| onModeChange | (mode) => void | Called when another route tab is chosen. | |
| onSubmit | (values: { name: string; email: string; message: string }) => void | Promise<void> | Called with valid form values. Without it the form simulates a short send. | |
| accent | string | "#10b981" | Route, pin and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |