Bounce Cards

Free

A fanned hand of cards that bounces in, then lifts a card and pushes its neighbors aside on hover or focus.

Ember Falls

Glass Lagoon

Moss Hollow

Neon Bazaar

Frost Spire

Hover, tab or pick a card.

Customize

Cards5

Spread7°

Stagger0.08s

Installation

npx shadcn@latest add https://ui.mekaigames.com/r/bounce-cards.json

Works in any project set up with the shadcn CLI.

Install the dependency.
npm install motion
Copy the code from the Code tab into components/ui/bounce-cards.tsx.

Usage

import { BounceCards } from "@/components/ui/bounce-cards";

<BounceCards
  items={covers.map((c) => ({ id: c.id, src: c.url, alt: c.title, label: c.title }))}
  onSelect={(i) => open(covers[i])}
/>

Props

11 properties

Property	Type	Default	Description
items	{ id?, src?, alt?, content?: ReactNode, label? }[]	—	Cards. Pass content for any markup, or src and alt for an image cover.
spread	number	7	Degrees of rotation between neighboring cards.
stagger	number	0.07	Seconds between each card's entrance.
cardWidth	number	140	Card width in pixels.
cardHeight	number	cardWidth × 1.4	Card height in pixels.
overlap	number	0.42	How much each card hides under the next, 0 to 0.8.
push	number	36	How far neighbors slide away from the active card, in pixels.
lift	number	26	How far the active card rises, in pixels.
onSelect	(index: number) => void	—	Makes the cards buttons and reports the chosen one.
label	string	"Cards"	Accessible name of the hand.
className	string	—	Extra classes for the wrapper.

Dependencies: motion