Animated React card components
Tilt card
A card that tips in 3D toward your cursor, lifts a little, and catches a glare that slides the other way.
Cards, hover, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/tilt-card.tsx https://motion-brew.com/r/tilt-card.tsxOne self contained file for React and Tailwind CSS: tilt-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { TiltCard } from "@/components/tilt-card";
export default function Page() {
return (
<TiltCard maxTilt={14} className="w-72 p-6">
<h3 className="font-semibold">Pro plan</h3>
<p className="text-sm text-zinc-500">Everything, unlimited.</p>
</TiltCard>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| maxTilt | number | 12 | Largest tilt per axis, degrees |
| hoverScale | number | 1.03 | Scale while hovered |
| glare | boolean | true | Moving glare highlight |
| glareOpacity | number | 0.35 | Peak glare opacity |
| perspective | number | 800 | Camera distance, px |
| spring | SpringOptions | { stiffness: 260, damping: 22, mass: 0.7 } | Tilt and settle |
More cards
- Team morph: A presence pill that morphs into a team card: the shell reshapes while each avatar flies from the stack to its row.
- Profile card: A creator profile whose pastel cover flows toward your pointer.
- Bill list: Upcoming bills that rise in while the total counts up.
- Recap card: A summary that reads like a sentence: its numbers count up in little chips, and milestone badges pop in below.