Animated React charts and dashboard widgets

Spending meter

A spending card whose pills fill in turn as the amount counts up on odometer wheels. Hover a pill to roll the number to what was spent in that slice. Drag Spent to watch it count.

Charts, in view, then hover, Motion

Install

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

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

Usage

import { SpendingMeter } from "@/components/spending-meter";

export default function Page() {
  return <SpendingMeter value={412.5} limit={1500} pills={8} currency="EUR" onAction={() => openReport()} />;
}

Props

Prop	Type	Default	Description
value	number	1010	Amount spent; changes count from the old value
limit	number	1800	Spending limit
pills	number	6	Pills in the bar
color	string	"#ff8f0f"	Fill color; the empty pills stay light gray
title	ReactNode	"Spending limit"	Card title
subtitle	ReactNode	"1 to 12 Apr, 2026"	Line under the title
currency	string	"USD"	ISO currency code
locale	string	"en-US"	Number formatting locale
duration	number	1.4	Fill length, seconds
actionLabel	ReactNode	"View report"	Header button; null hides it
onAction	() => void		Header button pressed

More charts

Goal gauge: A half-ring goal meter split by source.
Month calendar: A month view where a soft disc follows your pointer, an ink disc springs to the picked day and months slide the way you travel.
Calendar agenda: A day planner: swipe an event left to mark it done and confetti rises out of the card, or right to delete it.
Mix chart: Stacked bars in vivid colours that grow in while the total counts up.

All animated react charts and dashboard widgets