Card Fan Landing Reveal
A load sequence that deals a hand. Eight cards pop out around a circle one at a time, then collapse back to nothing. As they go, a second set is already stacked at the first card's exact slot, face down and scaled to a tenth. Those five lift, the front one flips over, and they fan out to evenly spaced positions measured from the real frame width, so the spread always fits its container.
npx shadcn@latest add https://ui.aryank.space/r/card-fan-landing-reveal.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| introImages | string[] | 8 BLANK cards | Faces of the cards that pop around the circle. Count drives the circle spacing. |
| outroCards | FanCard[] | Five lettered cards | Code and number on each fanned card. The first also carries an image on its back face. |
| wordmark / background | string | BLANK / #6c9a8b | Footer wordmark and page color. |
outroCardstextThe code and number printed on each fanned card.
backgroundcolorThe page color behind the deal.
gsap