Dot globe
widgetsProA plotted globe of dots from an embedded Natural Earth land mask, with drag momentum, a slow spin, arrow keys and an instrument readout. Canvas 2D, pauses off screen, still under reduced motion.
Opening soon
Pro cannot be bought yet. The page opens when payment is ready.
Preview
The preview could not load.
Live demo. The theme switches the demo itself.
Code
dot-globe.tsxPro
The code is locked
Dot globe is part of Manniche UI Pro. A key unlocks the source of all 60 effects.
Opening soon€49 · Introductory price until 31 December 2026. €79 after that.
- One-off payment
- One developer
- Your key arrives by email straight away
- No VAT (§ 19 UStG)
Have a key? Get the code with the CLI or MCP.
The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up
CLI
npx shadcn@latest add @manniche-pro/dot-globeMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
DotGlobeProps
| Prop | Type | Default | What it does |
|---|---|---|---|
speed | number | 4.5 | Idle spin in degrees per second. The surface drifts west to east; 0 stands still. |
dotSize | number | 1 | Scale for the dots; 1 is the plotter's own size. |
center | [number, number] | [10, 28] | The point that faces you, as [longitude, latitude]. Changing it turns the globe there. |
interactive | boolean | true | Drag and the arrow keys turn the globe. |
bezel | boolean | true | A ring of degree ticks round the globe. |
readout | boolean | true | A crosshair at the centre, a longitude tape and the coordinates under the globe. |
maxSize | number | 420 | The largest diameter in CSS pixels. The globe shrinks to fit narrower containers. |
label | string | – | Accessible name of the globe. |
Also takes every prop from Omit<HTMLAttributes<HTMLDivElement>, 'children'>.
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.