Shuffle Cards

A hand of quotes fanned like a held deck: drag the front card past the edge (or press an arrow key) and it flies off while the next one straightens up into the light. Opaque frosted paper cards, serif italic quotes, no motion library.

Draw

draw a card

$npx shadcn@latest add @clow/shuffle-cards

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

Full setup →

Playground

“We opened the book once and the cards read like our own code. No ceremony. Just light and ink.”

drag to shuffle

props

hintfade

<ShuffleCards />

Examples

basic

“We opened the book once and the cards read like our own code. No ceremony. Just light and ink.”

drag to shuffle

Props

prop	type	default
hint	boolean	true
fade	boolean	true