Card Fan
A compressed collection that separates into an inspectable layered deck with selection and residual-stack reflow.
- stacks
- fan
- deck
- hand
- playful
Curated studio deck: 1 of 4 selected
Usage
import { CardFan } from "@pinky-ui/layouts";
<CardFan spread={28} rotation={8} activeIndex={active}>
{photos.map((photo) => (
<TiltCard key={photo.id}>{photo.title}</TiltCard>
))}
</CardFan>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| spread | number | 28 | Horizontal distance between cards when fanned, in px. |
| rotation | number | 8 | Rotation of the outermost cards, in degrees. |
| activeIndex | number | — | Controlled selection. |
| onActiveIndexChange | (index: number) => void | — | Selection callback. |
| collapsible | boolean | true | Start as a compressed deck and open on proximity, focus or selection. |
Accessibility
- Roving tab stop with arrow keys, Home and End.
- Fanning is triggered by focus as well as hover.
- The fan is a list; the spatial arrangement is presentation only.
Performance
- One spring per card, no pointer subscription.
- Cards render regardless of state — keep the set small.
Reduced motion
With prefers-reduced-motion: reduce, the cards sit permanently fanned and flat, with no lift on selection.
When to use
- Small curated sets — plans, categories, featured pieces
- A playful entry point into a few options
When not to use
- Anything needing careful comparison — overlap hides content
- More than about seven items
- Dense or text-heavy cards
Skill
Purpose
Treat a small collection as a compressed, inspectable layered deck. The resting stack exposes uneven edges and depth; the selected card separates, corrects its orientation and lets the residual collection reflow around it.
Good for
- small curated sets — plans, categories, featured pieces
- a playful entry point into a few options
Avoid for
- anything needing careful comparison; overlap hides content by design
- more than about seven items
- dense or text-heavy cards
How many items
Three to seven. A fan of twelve is a mess in any hand.
Mobile
Reduce spread for narrow cards. Touch does not depend on hover: tap selects a card and a horizontal drag advances or reverses the deck without turning it into a regular carousel.
Motion intensity
rotation={8} is only the ceiling for the outer cards. The resting stack uses small authored offsets and the inspection state keeps the selected card close to level; past about 12° content becomes hard to read.
Accessibility
- Roving tab stop with arrow keys, Home and End.
- Focus opens the inspection state and the selected card has a roving tab stop.
- ArrowLeft/ArrowRight, Home and End browse the collection; selection is announced separately from the visual depth cue.
- The fan is a list; the spatial arrangement is presentation only.
Because cards overlap, make sure the selected card is distinguishable by more than z-order — the lift is not visible to everyone.
Performance
The pointer proximity signal is scoped to the fan surface. Cards use transform and opacity/depth cues, so keep the set small and the content light.
Composes with
Tilt Card works well for photo hands. Avoid Jelly — the fan already rotates each card, and two rotation systems on one element fight.