Card Deal

A grid that deals itself out from one point like a hand of cards: each card flies to its slot tilted and settles flat, and a shuffle sweeps them back into the deck and deals a fresh order, even mid-flight.

akadeal·shuffle·stagger

Install

Run this in any project set up for the shadcn CLI. It copies the Card Deal source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/card-deal.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { CardDeal } from "@/components/card-deal";

export default function Page() {
  return <CardDeal />;
}

Built with

A free React motion component in the Surfaces collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

npm: motion

Props

Read from the Card Deal source. Everything is optional unless it says required.

Prop	Type	Default
itemsrequired	T[]	—
getKeyrequired	(item: T) => string	—
renderItemrequired	(item: T, index: number) => ReactNode	—
origin	RefObject<HTMLElement \| null>	—
stagger	number	0.05
className	string	—
slotClassName	string	—
label	string	"Cards"

More in Surfaces

219

Morph Icons

Menu to close, play to pause, plus to check, sun to moon: each pair is one set of paths in two poses, so lines rotate and stretch into place on a spring and reverse cleanly mid-way.

220

Press Ripple

A quiet wave that spreads from exactly where you pressed, clipped to the element's corners, finishes filling even on a quick tap, and gives Enter and Space the same feedback from the centre.

221

Rim Light

A point of light that laps a card's border at a steady pace with a fading tail, tracing rounded corners exactly; every beam on the page shares one clock, so busy cards pulse in step.

245

Elastic List

A scrolling list with real rubber-band edges: drag or flick past either end and it stretches with growing resistance, then springs back, pulling down from the top winds up a spinner that snaps when it's ready to refresh, and the wheel hands off to the page once you reach an end.

Prop

Type

Default

itemsrequired

T[]

—

getKeyrequired

(item: T) => string

—

renderItemrequired

(item: T, index: number) => ReactNode

—

origin

RefObject<HTMLElement | null>

—

stagger

number

0.05

className

string

—

slotClassName

string

—

label

string

"Cards"