A by the numbers bento: counting figures in tiles that each carry a different animated mini visual, from a drawing area chart and uptime bars to a dot field, gauge, avatar marquee and star fill.
By the numbers
Pulse handles analytics for product teams in 184 countries. Here is what the last quarter looked like.
2.4B
Events processed every month
Up 38% since January
99.995%
Uptime, last 90 days
One 4 minute incident
184
Countries with active teams
From Reykjavik to Wellington
41ms
Median query latency
p95 under 120ms
12,800
Teams building on Pulse
Including 61 of the Fortune 500
4.9/5
Average review score
From 3,214 reviews
npx shadcn@latest add https://hyperblur.dev/r/stats-mosaic.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-mosaic.tsx.
import { StatsMosaic } from "@/components/hyperblur/stats-mosaic"
<StatsMosaic title="Last quarter at a glance" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "By the numbers" | Small label above the title. |
| title | string | "Small team. Very large numbers." | Section heading. |
| subtitle | string | "Pulse handles analytics..." | Supporting text beside the heading. |
| items | { label: string; value: number; decimals?: number; prefix?: string; suffix?: string; detail: string; visual: "area" | "bars" | "dots" | "gauge" | "faces" | "stars" }[] | 6 tiles | Tiles. Area and faces tiles span two columns. The gauge reads value as milliseconds out of 200, stars read value out of 5. |
| duration | number | 1800 | Count up duration in milliseconds. |
| accent | string | "#22d3ee" | Color of the area chart, dots, gauge and eyebrow marker. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |