Pixel Atlas, animated React component

Pixel Atlas: a live map of where you are in the world, drawn in glowing pixels. Every place warms the land around it, from slate through violet and magenta to orange and cream at the busiest, with slow waves of signal running outward. The map pops in from west to east, then tours your places one by one. Hover to swell the pixels under the pointer, click a place for its card, drag to pan all the way round the world, and use the filters to glide to one kind of place. Pinch, Ctrl-scroll or the buttons zoom. Keyboard: arrow keys pan, plus and minus zoom, Escape closes the card.

Pro
Dashboards
Hover

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

0.00°N 0.00°E · SEA·15 PLACES

LowActivityHigh

Pixel Atlas

Tour the places

Pixel size3.2°

The code you copy has the settings you chose. Pro also gives you the one-line install and a build prompt to rebuild it with your AI tool.

Props

Prop	Type	Default	What it does
points	AtlasPoint[]	DEFAULT_POINTS	The places to show: id, name, type, lat, lon, optional description and activity. The busiest place is the hottest on the map, and any new type gets a filter of its own.
height	number \| "fill"	520	Height in px, or "fill" to fill a positioned parent.
resolution	number	3.2	Degrees of the world in each pixel of the map: smaller is finer.
palette	string[]	—	Six colours for the heat, coolest to hottest.
tour	boolean	true	Visit the places one by one until someone takes over.
tourEvery	number	4	Seconds at each place on the tour.
onSelect	(point: AtlasPoint \| null) => void	—	Called with the place that is selected, or null.
className	string	""	Extra classes for the outer element.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Pixel Atlas is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```

Pro
New
Flap Clock
Pro
NewSound
Global Deploy
Pro
NewSound
Storage Clean
Pro
NewSound
Empty Chart

Pixel Atlas, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Pixel Atlas, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More dashboards