Animated React card components
Flux card
A feature card on a pixelated, dithered gradient with a negative magnetic field: squares flee the pointer and leave a hole that follows it. Notification pills bounce off a shielded focus timer.
Cards, in view and timeline, plus hover and press, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/flux-card.tsx https://motion-brew.com/r/flux-card.tsxOne self contained file for React and Tailwind CSS: flux-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { FluxCard } from "@/components/flux-card";
export default function Features() {
return (
<FluxCard
title="Keep the noise out"
minutes={25}
pings={[
{ label: "Maya: quick question?", icon: "message" },
{ label: "Standup in 5 min", icon: "calendar" },
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | Keep the noise out | Card title |
| description | ReactNode | a short line | Under the title |
| label | string | "Deep work" | Inside the timer |
| minutes | number | 25 | Length of the focus block |
| pings | FluxPing[] | five samples | label and icon (message, calendar, mail, bell, receipt), up to six |
| colors | [string, string, string, string] | an ember ramp | The main flow, deepest first |
| accent | string | "#5b5bff" | Dithered into the lower right |
| pixel | number | 10 | Square size in px, 6 to 24 |
| dither | number | 0.6 | How much the shades mix, 0 to 1 |
| field | number | 0.8 | Strength of the repelling field, 0 to 1 |
| radius | number | 110 | Reach of the field in px |
| speed | number | 0.6 | Flow speed, 0 to 2 |
| className | string | Placement and size |
More cards
- Aura card: A feature card on a live shader gradient that leans toward the pointer and ripples when pressed.
- Pricing card: A plan card in a soft shell.
- Liquid card: Four status cards with an icon as a glass container: liquid pours in, waves roll and bubbles rise.
- Team member card: A team member card with pixels burning up the photo like fire.