Animated React card components
Contour feature card
A browser window in front of a live topographic map. The lines bend around the cursor, and a click sends a wave through the terrain.
Cards, hover and press, Motion
Install
npm i clsx lucide-react motion tailwind-merge && curl -o components/contour-feature-card.tsx https://motion-brew.com/r/contour-feature-card.tsxOne self contained file for React and Tailwind CSS: contour-feature-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { ContourFeatureCard } from "@/components/contour-feature-card";
export default function Page() {
return <ContourFeatureCard lines={14} scale={1} />;
}
Pass `children` to put your own screen in the window.Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#242423" | Line colour |
| lines | number | 14 | Contour levels to trace; more is tighter |
| scale | number | 1 | Size of the hills and valleys |
| speed | number | 1 | Drift speed |
| lift | number | 1 | How high the pointer's hill rises |
| children | ReactNode | a dashboard | What the window shows |
| className | string | Placement |
More cards
- Live gradient card: A metric on a drifting mesh gradient, with a dot matrix number that morphs dot by dot.
- Integration hub: App tiles wired into one hub, with packets of dots flowing in along every wire.
- Pixel feature card: A phone in front of dithered pixel clouds that drift, shimmer and light up under the cursor.
- Column card: A tall card whose columns grow up from the floor while their values count up inside.