An asymmetric grid of big numbers, each with a segmented gauge rising from the tile corner and a large half dial on the feature tile. Segments light up toward each goal while the figures count, and glow on hover.
Ferro by the numbers
Each gauge shows how far we are toward the goal we publish every January. Figures audited quarterly.
Payments processed on Ferro in 2026, with seven weeks still to go
API uptime over the last 12 months
Median authorization latency worldwide
Countries where merchants accept payouts
Fraud rate after automated screening
npx shadcn@latest add https://hyperblur.dev/r/stats-arc-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-arc-grid.tsx.
import { StatsArcGrid } from "@/components/hyperblur/stats-arc-grid"
<StatsArcGrid feature={{ value: 1.2, decimals: 1, prefix: "$", suffix: "B", label: "Processed", progress: 0.6 }} stats={[{ value: 41, suffix: "ms", label: "Latency", progress: 0.41 }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Ferro by the numbers" | Mono label above the heading. |
| title | string | "Infrastructure that money trusts" | Section heading. |
| subtitle | string | sample text | Paragraph beside the heading. Hidden when empty. |
| feature | { value: number; decimals?: number; prefix?: string; suffix?: string; label: string; progress: number; caption?: string } | sample feature stat | The tall tile with the half dial. progress is 0 to 1. |
| stats | { value: number; decimals?: number; prefix?: string; suffix?: string; label: string; progress: number; caption?: string }[] | 4 sample stats | Smaller tiles with corner gauges. |
| duration | number | 2000 | Milliseconds for the count and the gauges. |
| accent | string | "#a3e635" | Color of lit segments. |