Animated React card components
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.
Cards, hover, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/decay-card.tsx https://motion-brew.com/r/decay-card.tsxOne self contained file for React and Tailwind CSS: decay-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { DecayCard } from "@/components/decay-card";
export default function Page() {
return (
<DecayCard
src="/work/coast.jpg"
revealSrc="/work/coast-night.jpg"
tag="Field notes"
title="Nothing stays"
subtitle="Hover the picture and watch it rot away from the inside."
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | a photo | The picture |
| revealSrc | string | a photo | The picture the decay reveals underneath |
| tag | string | "Field notes" | Small label in the top corner |
| title | string | "Nothing stays" | Title over the picture |
| subtitle | string | a short line | Line under the title |
| depth | number | 1.6 | How far the decay eats, as a share of the card; above about 1.5 it takes the whole card |
| speed | number | 1 | Speed of the decay and the mending |
| tilt | number | 8 | How far the card leans toward the pointer, in degrees; 0 keeps it flat |
| glare | boolean | true | A soft glare that follows the pointer |
| className | string | Size and shape of the card |
More cards
- 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.
- Reaction card: A post with three reaction buttons.
- Event card: Minimal event details with a clock that sweeps to the start time, a guest stack that fans out, and round GSAP-drawn tools beside a Join button.
- Add card: An empty state for payments: a card floats over its slot and tilts toward you.