Animated React card components
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.
Cards, hover, Motion + GSAP
Install
npm i @gsap/react clsx gsap motion tailwind-merge && curl -o components/liquid-metal-card.tsx https://motion-brew.com/r/liquid-metal-card.tsxOne self contained file for React and Tailwind CSS: liquid-metal-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { LiquidMetalCard } from "@/components/liquid-metal-card";
export default function Page() {
return (
<LiquidMetalCard
src="/work/day.jpg"
revealSrc="/work/night.jpg"
title="Daylight"
revealTitle="Golden hour"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | a photo | The picture on show |
| revealSrc | string | a photo | The picture the goo reveals |
| title | string | "Daylight" | Title for the first picture |
| revealTitle | string | "Golden hour" | Title while the second picture shows |
| subtitle | string | a short hint | Line under the title |
| tendrils | number | 9 | Rivulets that run ahead of the metal, up to 16 |
| speed | number | 2 | Speed of the pour and the drain; 1 is the slow, heavy pour |
| className | string | Size and shape of the card |
More cards
- 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.
- Booking card: Pick a month, a day and a time: ink pills glide between choices, the times unfold, and the button rolls to your slot and the whole card turns into a confirmation with GSAP-drawn icons.