Recap card

A summary that reads like a sentence: its numbers count up in little chips, and milestone badges pop in below. Hover a badge to see how it was earned.

Cards, in view, then hover, focus and press, Motion

Install

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

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

Usage

import { RecapCard } from "@/components/recap-card";

const parts = [
  "This month you wrote ",
  { value: 12480, suffix: " words", icon: "words" },
  ", ",
  { value: 18, suffix: "% more", icon: "trend" },
  " than in October.",
] as const;

const badges = [
  { label: "Early riser", icon: "sun", note: "Wrote before 8 am on 10 mornings" },
  { label: "Night owl", icon: "moon", note: "4 of 7 late sessions", progress: 4 / 7 },
] as const;

export default function Page() {
  return <RecapCard title="Your month in words" period="November" parts={[...parts]} badges={[...badges]} />;
}

Props

Prop	Type	Default	Description
title	string	"Your month in words"	Card title
period	string \	null	"November"	Chip by the title; null hides it
parts	(string \	{ value; decimals?; prefix?; suffix?; icon? })[]	a writing recap	The sentence; stats count up in chips
badges	{ label; icon; note; progress? }[]	four writing milestones	Left to right; progress below 1 shows a ring
actionLabel	string \	null	"View full recap"	Button label; null hides the button
href	string		Makes the button a link
onAction	() => void		Called when the button is pressed
className	string		Placement

More cards

Brand bridge: A feature card with big brand tiles wired to a hub by gradient lines in each brand's colours, glowing comets and a particle field that scatters from the pointer.
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.
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.

All animated react card components