Featured
Radial Pop-out
A hero card surrounded by a radial scatter of secondary cards. Hover the center to toss the stack outward with springy overshoot; un-hover snaps them back behind.
Installation
Coming soon. Components will be available via the registry once checkout goes live.
Usage
<RadialPopOut
hero={{ src: "/hero.webp", alt: "Featured" }}
items={[
{ src: "/c1.webp" },
{ src: "/c2.webp" },
{ src: "/c3.webp" },
{ src: "/c4.webp" },
{ src: "/c5.webp" },
{ src: "/c6.webp" },
]}
cardSize={140}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| hero* | RadialPopOutItem | — | Center card. `{ src, alt? }`. |
| items* | RadialPopOutItem[] | — | Secondary cards that scatter radially around the hero. |
| cardSize | number | 140 | Pixel size of each secondary card (square). |
| heroSize | number | — | Pixel size of the hero card. Defaults to 1.25× cardSize. |
| radius | number | — | Radius of the radial scatter, in px. Defaults to ~1.05× cardSize. |
| jitter | number | 8 | Maximum random tilt applied to scattered cards, in degrees. |
| stagger | number | 0.04 | Stagger between each card's entry, in seconds. |
| maxTilt | number | 10 | Maximum 3D tilt of the hero card in response to cursor position, in degrees. |
| shift | number | 0.08 | Maximum translation of the hero toward the cursor, as a fraction of heroSize (0–1). |
| className | string | — | Classes applied to the root wrapper. |
Use cases
Cast / character explorer
Hero protagonist with supporting characters that scatter on hover — perfect for film, anime, or game pages.
Featured collection
A spotlight item with related products fanning out behind it.
Team / org spotlight
Highlight a single person with their team scattering around them.
Album / playlist hub
Hero release with related tracks, EPs, or remixes radiating out behind it.