Animated React card components
Bill list
Upcoming bills that rise in while the total counts up. Hover a row to pay it and watch it turn paid in place; filter the list from the pill.
Cards, in view, then hover, press and keys, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/bill-list.tsx https://motion-brew.com/r/bill-list.tsxOne self contained file for React and Tailwind CSS: bill-list.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { BillList } from "@/components/bill-list";
const bills = [
{ id: "internet", name: "Home internet", amount: 49, due: new Date("2026-11-16"), icon: "wifi", kind: "Bills" },
{ id: "backup", name: "Cloud backup", amount: 9.99, due: new Date("2026-11-25"), icon: "cloud", kind: "Subscriptions", autopay: true },
] as const;
export default function Page() {
return <BillList title="Coming up" bills={[...bills]} onPay={(bill) => payBill(bill.id)} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Coming up" | Card title |
| bills | { id; name; amount; due; icon; kind; autopay?; paid? }[] | five sample bills | The rows; kind feeds the filter menu |
| currency | string | "USD" | Currency code for the amounts |
| soonDays | number | 3 | Days ahead that count as due soon |
| onPay | (bill) => void | Called after a bill is paid | |
| className | string | Placement |
More cards
- Recap card: A summary that reads like a sentence: its numbers count up in little chips, and milestone badges pop in below.
- Brand bridge: A feature card with big brand tiles wired to a hub by gradient lines in each brand's colours, glowing comets and a particle field that scatters from the pointer.
- Flux card: A feature card on a pixelated, dithered gradient with a negative magnetic field: squares flee the pointer and leave a hole that follows it.
- Aura card: A feature card on a live shader gradient that leans toward the pointer and ripples when pressed.