Skip to content

Dot Globe

A turning globe of dots with glowing markers and arcs that join them in order.

Where this season’s lots come from

Four farms, one roastery.

Each lot travels green to London and is roasted the week it ships. Drag the globe to follow the route.

import { DotGlobe } from '@brand-studio/ui';

const origins = [
  { label: 'Huila, Colombia', lat: 2.5, lng: -75.6 },
  { label: 'Cerrado, Brazil', lat: -18.9, lng: -47 },
  { label: 'Sidama, Ethiopia', lat: 6.7, lng: 38.5 },
  { label: 'Kirinyaga, Kenya', lat: -0.5, lng: 37.3 },
  { label: 'The roastery, London', lat: 51.5, lng: -0.1 },
];

export default function DotGlobeDemo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 24, width: '100%', maxWidth: 820 }}>
      <div style={{ flex: '1 1 260px' }}>
        <p style={{ margin: '0 0 8px', fontSize: 13, color: 'var(--bs-muted)' }}>Where this season’s lots come from</p>
        <h3 style={{ margin: '0 0 12px', fontSize: 'clamp(26px, 5vw, 40px)' }}>Four farms, one roastery.</h3>
        <p style={{ margin: 0, color: 'var(--bs-muted)' }}>Each lot travels green to London and is roasted the week it ships. Drag the globe to follow the route.</p>
      </div>
      <div style={{ flex: '1 1 300px', display: 'grid', placeItems: 'center' }}>
        <DotGlobe label="Origins and roastery" markers={origins} />
      </div>
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, DotGlobe } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { DotGlobe } from '@brand-studio/ui';

<DotGlobe label="Origins" markers={[
  { label: 'Huila, Colombia', lat: 2.5, lng: -75.6 },
  { label: 'The roastery, London', lat: 51.5, lng: -0.1 },
]} />

Arcs join the markers in the order you list them. The globe starts facing the first marker. It fills its width up to 36rem and stays square.

Accessibility

Screen readers get the markers as a labelled list; the canvas is hidden from them.
Dragging sideways spins it; vertical swipes still scroll the page.
Under reduced motion it holds still until someone drags it.

API Reference

Prop	Type	Default
`markers?`	`GlobeMarker[]`	–
`label?`	`string`	`'Locations'`
`speed?`	`number`	`1`
`className?`	`string`	`''`