Atlas
Infinite pannable canvas — grab and throw a modulo-tiled grid of cards across an unbounded plane with weighted momentum, a faint coordinate grid that rises only while in motion, velocity parallax, and a soft edge vignette. Arrow-key panning and focusable tiles.
csspro
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/atlasProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | React.ReactNode[] | a built-in set of chart plates | Tile contents. Each node fills one cell; the set repeats forever across the plane. |
| cellSize | number | 180 | Cell size in px (tiles are square). |
| gap | number | 18 | Gap between cells in px. |
| friction | number | 0.92 | Momentum decay per frame at 60fps — lower stops sooner, higher glides longer. Tuned heavy by default: a table, not ice. |
| paused | boolean | false | Freezes the physics loop (drag still pans 1:1). |
| label | string | "Pannable canvas" | Accessible name for the region. |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.