Animated React card components
Pixel feature card
A phone in front of dithered pixel clouds that drift, shimmer and light up under the cursor. Click to send a ripple through the field.
Cards, hover and press, Motion
Install
npm i clsx lucide-react motion tailwind-merge && curl -o components/pixel-feature-card.tsx https://motion-brew.com/r/pixel-feature-card.tsxOne self contained file for React and Tailwind CSS: pixel-feature-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { PixelFeatureCard } from "@/components/pixel-feature-card";
export default function Page() {
return <PixelFeatureCard color="#252528" cellSize={6} coverage={1.4} density={0.8} />;
}
Pass `children` to put your own screen in the phone.Props
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
| color | string | "#252528" | Pixel colour | ||
| cellSize | number | 6 | Grid cell in px | ||
| shape | "square" \ | "circle" \ | "diamond" | "square" | Dot shape |
| speed | number | 1 | Drift and shimmer speed | ||
| coverage | number | 1.4 | How much of the card the clouds cover | ||
| density | number | 0.8 | How heavy the clouds are | ||
| floor | boolean | false | Draw the perspective floor along the bottom | ||
| children | ReactNode | a health app | What the phone shows | ||
| className | string | Placement |
More cards
- Column card: A tall card whose columns grow up from the floor while their values count up inside.
- Score card: A score card whose bars slide in and whose number counts up.
- Metal card stack: A stack of brushed metal payment cards that look like the real thing.
- Contact card: Not just a simple Contact button: an inline link that opens a card with an avatar, email to copy, LinkedIn and Book a call.