Fan-out cards

Cards that start stacked in the centre and spring out to their own tilted spots when scrolled into view.

Behaviour

Plays once, when 30% of the group is in view.
Offsets are container-relative, so the fan scales with its box; give the root a height (480px by default).
Each card springs out from the centre, tilting as it goes, while its opacity and scale ease in.
Reduced motion: the cards are already in place and tilted, and only fade in.

Props

Prop	Type	Description
cards	`{ content, x, y, rotate? }[]`	x and y are where each card's centre lands, in % of the container from its centre (-50 is the left or top edge); rotate is the tilt in degrees.
center	`ReactNode`	Something in the middle that the cards fan out from: a phone, a photo, a pill.
stagger	`number`default `0.08`	Seconds between one card leaving the stack and the next.
cardClassName	`string`	Classes for every card box (w-64 by default).

Installation

npx shadcn@latest add https://purrfectui.com/r/fan-out-cards.json

How to use

import { FanOutCards } from "@/components/ui/fan-out-cards";

<FanOutCards
  className="h-[480px]"
  center={<img src="/phone.png" alt="" className="h-72 rounded-3xl" />}
  cards={[
    { x: -30, y: -25, rotate: -6, content: <p>Your AAPL position is up 12%</p> },
    { x: 30, y: -25, rotate: 6, content: <p>On track to save $400 this month</p> },
    { x: -32, y: 25, rotate: 5, content: <p>Rebalancing opportunity detected</p> },
  ]}
/>

Source code

Loading…

Credits

Ported from armour.vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.