Mercator
A dotted world map as a live data surface: connection arcs launch with bright comet heads, land with a two-ring radar ripple, and dock event chips by hairline leader lines. Deterministic seeded dot grid (self-contained land bitmask), static events or live callback, chart-room palette. Canvas 2D, capped arc pool, offscreen-paused, reduced-motion-safe.
canvaspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/mercatorProps
| Prop | Type | Default | Description |
|---|---|---|---|
| events | MercatorEvent[] | Static event roster — arcs launch from it cyclically, seeded jitter on timing. Omit to use the built-in seeded demo-event generator. | |
| getEvent | () => MercatorEvent | null | undefined | Live event source, polled once per launch slot; return null/undefined to skip that slot. Takes precedence over events. (Under reduced motion the static roster / generator is used instead — this is never polled.) | |
| arcFrequency | number | 0.45 | Mean arc launches per second (seeded jitter applied). |
| arcSpeed | number | 1 | Arc travel-speed multiplier. 2 = twice as fast. |
| arcCurvature | number | 1 | How high arcs bow off the great line, 0–2. |
| cometIntensity | number | 1 | Comet head/tail brightness, 0–2. |
| rippleIntensity | number | 1 | Landing radar-ripple strength, 0–2. |
| renderChip | (event: MercatorEvent) => React.ReactNode | Replace the default event chip (leader line + anchor dot are kept). | |
| chipDwell | number | 4 | Seconds a chip stays docked before retiring. |
| maxChips | number | 3 | Max chips shown at once — oldest retires when a new one lands. 0 disables chips. |
| dotDensity | number | 160 | Dot columns across the full 360° of longitude. Clamped 40–320. |
| dotSize | number | 1 | Dot radius multiplier relative to grid spacing. |
| center | { lat: number; lng: number } | { lat: 14, lng: 10 } | Projection center. |
| zoom | number | 1 | Projection zoom — 1 fits 360° across the container width. |
| maskFalloff | number | 0.65 | Radial edge-fade strength for the dot grid, 0 (none) – 1. |
| colors | MercatorColors | Palette: dots, arc paths, and the single accent. | |
| seed | number | 7 | Seed for the dot jitter, launch jitter and demo-event generator. |
| announceEvents | boolean | false | Mirror landed events to a visually-hidden polite live region. |
| dpr | number | 2 | devicePixelRatio ceiling. Clamped 1–2. |
| paused | boolean | false | Freeze at the static chart frame (dots + plotted routes + chips). |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.