Animated React charts and dashboard widgets

Metric split

Three metrics on one proportional bar, each with its number counting up on odometer wheels. Switch Week, Month or Year to watch the numbers roll and the segments glide.

Charts, in view, then hover and press, Motion

Install

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

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

Usage

import { MetricSplit } from "@/components/metric-split";

export default function Page() {
  return (
    <MetricSplit
      title="Store traffic"
      metrics={["Visitors", "Add to cart", "Orders"]}
      periods={[
        { label: "Today", values: [820, 140, 36] },
        { label: "Week", values: [5120, 902, 214] },
      ]}
      onAction={() => openReport()}
    />
  );
}

It shows exactly three metrics; the third uses a striped bar so it never relies on shade alone. Columns never shrink below 92px, so labels stay readable; the card is 420px wide by default.

Props

Prop	Type	Default	Description
metrics	string[]	visits, page views, downloads	Three metric names, left to right
periods	MetricSplitPeriod[]	week, month, year	{ label, values } per option on the switch
defaultPeriod	string	first period	Period shown first
color	string	"#8b5cf6"	Base color for the three segments and dots
title	ReactNode	"Site activity"	Card title
subtitle	ReactNode	"How people find and use your page"	Line under the title
duration	number	1.4	Count-up and width glide, seconds
locale	string	"en-US"	Number formatting locale
actionLabel	ReactNode	"View report"	Accessible label for the round header button
onAction	() => void		Header button pressed; leave out to hide it

More charts

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.
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.

All animated react charts and dashboard widgets