Animated React card components
Particle card
A product feature card whose hero visual is a particle field: it morphs like ripples on water and parts around the cursor. Upload your own SVG to make the pattern.
Cards, hover, Motion
Install
npm i clsx lucide-react motion tailwind-merge && curl -o components/particle-card.tsx https://motion-brew.com/r/particle-card.tsxOne self contained file for React and Tailwind CSS: particle-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { ParticleCard } from "@/components/particle-card";
const shape = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5 2 7.5L12 16.5 5.5 21l2-7.5L2 9h7z"/></svg>`;
export default function Page() {
return (
<ParticleCard
svg={shape}
title="Your brand, in motion"
description="Upload a mark and watch it flow."
href="/features/particles"
/>
);
}Props
| Prop | Type | Default | Description | |||
|---|---|---|---|---|---|---|
| svg | string | a radiating starburst mark | SVG markup; its shapes become particles | |||
| look | "mixed" \ | "glyph" \ | "block" \ | "scan" | "mixed" | All three looks morphing, or one only |
| background | string | "#ffffff" | Card color | |||
| color | string | "#242423" | Particle color; only the artwork uses it | |||
| textColor | string | "#242423" | Title, line and button color | |||
| cell | number | 6 | Grid cell size, px | |||
| spin | number | 1 | Turns per minute; 0 holds still | |||
| force | number | 0.75 | How strongly the cursor parts the particles, 0 to 3 | |||
| reach | number | 130 | Radius of the pool the cursor opens, px | |||
| grain | number | 0 | Film grain over the card, 0 to 1 | |||
| chars | string | "01/>." | Glyph characters, densest first | |||
| title | string | a short headline | Feature title | |||
| description | string | a short line | One short line about the feature | |||
| cta | string | "Learn more" | Button label | |||
| href | string | Where the button goes | ||||
| onOpen | () => void | Button handler when there is no href | ||||
| className | string | Size and shape of the card |
More cards
- Wallet card: A balance card that counts up on odometer wheels like the chart cards.
- Tilt card: A card that tips in 3D toward your cursor, lifts a little, and catches a glare that slides the other way.
- 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.