Is Office Pulse Map free for commercial use?

Yes. Office Pulse Map is MIT licensed, so you can use it in personal and commercial projects without attribution.

Is this React office locations section accessible?

Yes. Offices are an actual list with native selection buttons, pressed state, visible selected text, address elements and real address links. The SVG map is decorative and hidden from assistive technology, so no contact information depends on colour, animation or map interpretation. Reduced motion creates no trigger or pulse.

How does the office pulse affect performance?

The route entrance runs once and only the decorative path offset, marker transforms and opacity are animated. One observer and one visibility listener pause the single active pulse while the section is fully offscreen or the browser tab is hidden, and scoped GSAP cleanup removes every animation and listener on unmount.

Office Pulse Map

A free React office locations section with semantic contact cards and a decorative SVG network map.

Find us worldwide

A local team, wherever work takes you.

Meet the people closest to your next launch. Every studio shares one operating rhythm, with local context built into the way we work.

16 St John's Lane, London EC1M 4BSGMT / BST
180 Franklin Street, Brooklyn, NY 11222EST / EDT
71 Robinson Road, Singapore 068895SGT
5 Martin Place, Sydney NSW 2000AEST / AEDT

Customise

Map layout

Route curvature0.24

Pulse duration2.4s

Marker size14

Route stagger0.08s

Panel radius24px

Code

<ContactOfficePulseMap
  title="A local team, wherever work takes you."
  offices={offices}
  routes={routes}
/>

Office Pulse Map is a free contact section and React office locations section for Next.js, React and Tailwind. It pairs an accessible list of office addresses with a dependency-free SVG map, so visitors can find every location without relying on the visual network.

Scoped GSAP draws valid routes once, retargets the selected office from its current state and runs one restrained pulse only while the section and browser tab are visible. Reduced motion keeps the map settled, selection immediate and every address fully available.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/contact-office-pulse-map

Usage

import { ContactOfficePulseMap } from "@/components/contact-office-pulse-map";

const offices = [
  {
    id: "london",
    city: "London",
    country: "United Kingdom",
    address: "16 St John's Lane, London EC1M 4BS",
    timezone: "GMT / BST",
    href: "https://www.google.com/maps/search/?api=1&query=London",
    x: 48,
    y: 31,
  },
  {
    id: "singapore",
    city: "Singapore",
    country: "Singapore",
    address: "71 Robinson Road, Singapore 068895",
    timezone: "SGT",
    href: "https://www.google.com/maps/search/?api=1&query=Singapore",
    x: 77,
    y: 66,
  },
];

const routes = [
  { id: "london-singapore", fromId: "london", toId: "singapore" },
];

export default function Page() {
  return (
    <ContactOfficePulseMap
      title="Talk to a team in your time zone."
      description="Choose an office to see where our network is focused."
      offices={offices}
      routes={routes}
    />
  );
}

Props

Prop	Type	Default	Description
eyebrow	string	"Find us worldwide"	Introductory label above the section heading.
title	string	required	Section heading rendered as an h2.
description	string	undefined	Optional supporting copy below the heading.
offices	{ id; city; country; address; timezone?; href?; x; y }[]	required	Two to eight offices with stable IDs, complete contact details and map coordinates clamped from 0 through 100.
routes	{ id: string; fromId: string; toId: string }[]	[]	Stable relationships between office IDs. Missing endpoints, duplicate IDs and self-routes are ignored.
activeId	string	undefined	Active office ID in controlled mode.
defaultActiveId	string	first office ID	Initial active office ID in uncontrolled mode.
onActiveChange	(id: string) => void	undefined	Called after a valid office selection.
layout	"map-left" \| "map-right"	"map-left"	Desktop composition. Narrow screens always place semantic office content before the decorative map.
mapArcHeight	number	0.24	Route curvature as a fraction of endpoint distance, clamped from 0.08 through 0.48.
pulseDuration	number	2.4	Seconds between active-marker pulses, clamped from 1.2 through 6.
markerSize	number	14	Marker diameter in SVG coordinate units, clamped from 10 through 24.
routeStagger	number	0.08	Seconds between route draws, clamped from 0 through 0.18.
radius	number	24	Map-panel radius in CSS pixels, clamped from 8 through 36.
className	string	undefined	Additional classes merged onto the section root.

Customisation

Office Pulse Map exposes Tier 3 tokens for its surface, land, grid, routes and markers. Effect props control composition, geometry and timing while office names, addresses, links, coordinates and relationships remain authored data:

<ContactOfficePulseMap
  className="office-network"
  title="A studio close to every launch."
  offices={offices}
  routes={routes}
  layout="map-right"
  mapArcHeight={0.32}
  markerSize={18}
  radius={30}
/>

.office-network {
  --office-map-surface: var(--background);
  --office-map-land: var(--muted);
  --office-map-grid: var(--border);
  --office-map-route: var(--ring);
  --office-map-marker: var(--primary);
}

Frequently asked questions

Is Office Pulse Map free for commercial use?: Yes. Office Pulse Map is MIT licensed, so you can use it in personal and commercial projects without attribution.
Is this React office locations section accessible?: Yes. Offices are an actual list with native selection buttons, pressed state, visible selected text, address elements and real address links. The SVG map is decorative and hidden from assistive technology, so no contact information depends on colour, animation or map interpretation. Reduced motion creates no trigger or pulse.
How does the office pulse affect performance?: The route entrance runs once and only the decorative path offset, marker transforms and opacity are animated. One observer and one visibility listener pause the single active pulse while the section is fully offscreen or the browser tab is hidden, and scoped GSAP cleanup removes every animation and listener on unmount.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js templates with contact, team and conversion sections designed as one system.Explore Template Empire templates