Animated React card components
Add card
An empty state for payments: a card floats over its slot and tilts toward you. Press to type it in and drop it into place.
Cards, press, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/add-card.tsx https://motion-brew.com/r/add-card.tsxOne self contained file for React and Tailwind CSS: add-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { AddCard } from "@/components/add-card";
export default function Page() {
return <AddCard onAdd={() => openCardForm()} />;
}Props
| Prop | Type | Default | Description | |
|---|---|---|---|---|
| title | string | "Add your first card" | Card title | |
| subtitle | string | a short line | Line under the title | |
| cta | string | "Add card" | Button label | |
| doneLabel | string | "Card added" | Button label once the card is in | |
| note | string | a short line | Small line under the button; empty hides it | |
| last4 | string | "4242" | Last four digits shown once added | |
| holder | string | "Alex Morgan" | Name shown once added | |
| expiry | string | "08/29" | Expiry shown once added | |
| onAdd | () => void \ | Promise | Called on press; a promise holds the card until it settles, a rejection puts it back | |
| className | string | Size and shape of the card |
More cards
- Booking card: Pick a month, a day and a time: ink pills glide between choices, the times unfold, and the button rolls to your slot and the whole card turns into a confirmation with GSAP-drawn icons.
- Orbit card: A community card where people and app chips orbit a center mark.
- Globe card: A feature card with a dotted three.js globe: arcs fly between people around the world and land with their avatar.
- Avatar testimonial: Testimonials driven by a row of avatars: each quote rises in word by word out of a blur, and a ring fills around the active avatar until the next one.