Animated React card components
Score card
A score card whose bars slide in and whose number counts up. Hover a bar to roll the score to it.
Cards, in view, then hover, press and keys, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/score-card.tsx https://motion-brew.com/r/score-card.tsxOne self contained file for React and Tailwind CSS: score-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { ScoreCard } from "@/components/score-card";
const bars = [
{ label: "Sleep", value: 16, max: 20 },
{ label: "Activity", value: 18, max: 20 },
{ label: "Nutrition", value: 19, max: 20 },
];
export default function Page() {
return <ScoreCard title="Health score" bars={bars} change={4.1} period="month" />;
}Props
| Prop | Type | Default | Description | |
|---|---|---|---|---|
| title | string | "Health score" | Card title | |
| avatar | string \ | null | a portrait | Avatar in the corner; null hides it |
| bars | { label; value; max; color? }[] | Sleep, Activity, Nutrition | Bars top to bottom; colours default to violet, blue, green; the last one sits in full colour | |
| change | number \ | null | 4.1 | Change in points, shown as a chip; null hides it |
| period | string | "month" | Named in the caption, as in "Overall this month" | |
| decimals | number | 1 | Decimal places on the score | |
| className | string | Placement |
More cards
- Metal card stack: A stack of brushed metal payment cards that look like the real thing.
- Contact card: Not just a simple Contact button: an inline link that opens a card with an avatar, email to copy, LinkedIn and Book a call.
- Decay card: A 3D tilting image card with text over it that rots away from the inside when you hover, until a second picture takes the whole card, then grows back.
- Liquid metal card: Hover and black liquid metal pours in from the nearest corner, beaded rivulets running ahead, until a second picture surfaces from inside it.