A pinned report section where three numbers take turns: each one counts up while its rule draws and a delta chip pops in, then dims as the next takes over. A rail on the left tracks the whole sequence.
Q3 · Edge network
npx shadcn@latest add https://hyperblur.dev/r/motion-stat-sequence.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-stat-sequence.tsx.
import { MotionStatSequence } from "@/components/hyperblur/motion-stat-sequence"
<MotionStatSequence stats={[{ value: 12, suffix: "k", label: "Teams" }, { value: 98.2, decimals: 1, suffix: "%", label: "Retention", delta: "+3 pts" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Platform report · Q3" | Label above the headline and, on narrow stages, above the list. |
| title | string | "A quarter on the network, in three numbers" | Headline shown beside the stats on wide stages. |
| stats | { value: number; label: string; prefix?: string; suffix?: string; decimals?: number; delta?: string }[] | 3 sample stats | Numbers in order. Each gets an equal slice of the scroll. |
| accent | string | "#2f7bff" | Accent color for highlights, rails and glows. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scroll tracking and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress by itself, forward, hold, then back. Use it for previews where nobody scrolls. |
| duration | number | 6 | Seconds for one forward pass of the autoplay loop. |
| length | number | 3 | Scroll distance in stage heights while the section is pinned. Ignored with progress or autoPlay. |
| height | string | "100vh" | Height of the pinned stage. Use a pixel value when the section lives inside a scrolling container. |