Gallery Dome 3D

ProNew

Tiles laid over a dome that you turn by dragging or with the arrow keys.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/gallery-dome-3d

Prop	Type	Default	Description
`items`	`{ id: string; title: string; art?: string }[]`	`-`	Tiles, placed ring by ring from the equator up (up to 32 on rings, extras on the pole).
`label`	`string`	`"Gallery"`	Accessible name.
`radius`	`number`	`330`	Radius of the dome in px.

Turning sets two CSS variables during the drag; there is no loop and nothing moves unless you act.
With prefers-reduced-motion: reduce the dome becomes a flat grid of the same tiles and the hint is hidden.
A focusable, labelled group; tiles are a list in DOM order.
Dragging is never required: the arrow keys do the same.