Vault
Dome-style circular drag gallery on a CSS 3D perspective ring — drag, throw, or scroll to spin with inertia and detent snapping while off-focus panels rest in museum duotone and the front panel blooms to full color. Arrow keys rotate; panels are focusable with announced captions.
gsappro
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/vaultManual — install dependencies, then copy the source
npm install gsapProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | VaultItem[] | a built-in set of gradient artworks | Panels to arrange around the ring. |
| radius | number | computed from panel width and item count so panels never overlap | Ring radius in px (distance from center to each panel). |
| autoRotate | number | 4 | Idle drift speed in degrees per second. Set 0 to disable. Pauses on hover, focus, and interaction. |
| panelWidth | number | 150 | Panel width in px. |
| panelHeight | number | 210 | Panel height in px. |
| onItemClick | (index: number, item: VaultItem) => void | Fires when the front-facing panel is clicked. Clicking any other panel rotates it to the front. | |
| paused | boolean | false | Halts the idle auto-rotation (drag, wheel, and keys still work). |
| label | string | "Drag gallery" | Accessible name for the gallery. |
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.