Animated React card components
Column card
A tall card whose columns grow up from the floor while their values count up inside. Hover a column to lift it and see its share.
Cards, in view, then hover, press and keys, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/column-card.tsx https://motion-brew.com/r/column-card.tsxOne self contained file for React and Tailwind CSS: column-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { ColumnCard } from "@/components/column-card";
const columns = [
{ label: "Out of range", value: 19 },
{ label: "In range", value: 148 },
];
export default function Page() {
return (
<ColumnCard
title="Data that puts your health in motion"
description="Every result finally lines up in one place."
columns={columns}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | "Data that puts your health in motion" | Headline |
| description | ReactNode | a short line | Body text under the headline |
| columns | { label; value; color? }[] | Out of range 19, In range 148 | Columns left to right; colours default to violet, ink |
| eyebrow | ReactNode | "Last 30 days" | Small pill above the headline; null hides it |
| unit | string | "readings" | Word after the total in the footer |
| columnHeight | number | 220 | Height of the tallest column in px |
| className | string | Placement |
More cards
- Score card: A score card whose bars slide in and whose number counts up.
- 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.