Live gradient card

A metric on a drifting mesh gradient, with a dot matrix number that morphs dot by dot. Turn the dial and the value and caption follow, while the colours run from bright and playful when younger to deep reds when older.

Cards, drag, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/gradient-card.tsx https://motion-brew.com/r/gradient-card.tsx

One self contained file for React and Tailwind CSS: gradient-card.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { GradientCard } from "@/components/gradient-card";

export default function Page() {
  return (
    <GradientCard
      label="Body age"
      value={25}
      reference={27.5}
      onChange={(age) => save(age)}
    />
  );
}

Props

Prop	Type	Default	Description
label	string	"Body age"	Label at the top
value	number	25	Starting value
reference	number	27.5	What the caption compares against
min	number	18	Lowest value on the dial
max	number	90	Highest value on the dial
caption	(value, gap) => string	"2.5 years ahead of the clock"	Caption for the value; gap is value minus reference
palette	{ young; even; old }, four colours each	bright, warm, deep reds	Colours below, at and above the reference; the card blends between them
speed	number	1	Drift speed of the gradient
onChange	(value) => void		Called when the value settles on a new step
className	string		Placement

More cards

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.
Score card: A score card whose bars slide in and whose number counts up.

All animated react card components