Animated React charts and dashboard widgets

Growth stream

A total built up over time as nested bands that widen at each checkpoint. The stream reveals as the headline counts up; hover a checkpoint to roll the number to that point.

Charts, in view, then hover, Motion

Install

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

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

Usage

import { GrowthStream } from "@/components/growth-stream";

export default function Page() {
  return (
    <GrowthStream
      title="Revenue"
      previous={42000}
      checkpoints={[
        { label: "Q1", value: 11800 },
        { label: "Q2", value: 24900 },
        { label: "Q3", value: 36100 },
        { label: "Q4", value: 45300 },
      ]}
      previousLabel="last year"
      periodLabel="the year"
      onAction={() => openReport()}
    />
  );
}

Props

Prop	Type	Default	Description
checkpoints	StreamCheckpoint[]	three weeks	{ label, value } running totals, left to right; the last is the headline
previous	number	31350	Previous period's total, for the change badge and caption
title	ReactNode	"Income"	Small label above the number
previousLabel	string	"last month"	Previous period's name in the caption
periodLabel	string	"the month"	Whole period's name in the hover caption
color	string	"#8b5cf6"	Band color; inner bands are lighter steps of it
currency	string	"USD"	ISO currency code
locale	string	"en-US"	Number formatting locale
duration	number	1.6	Reveal and count length, seconds
onAction	() => void		Round header button pressed; leave out to hide it
actionLabel	string	"View report"	Accessible label for the round header button

More charts

Metric split: Three metrics on one proportional bar, each with its number counting up on odometer wheels.
Spending meter: A spending card whose pills fill in turn as the amount counts up on odometer wheels.
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.

All animated react charts and dashboard widgets