purrfect uiComponents

3.2x

Faster savings growth than a regular account

Stat rotator

A glass card that cycles through stats, each number counting up on rolling digits.

Behaviour

  • Every interval the card lifts out 38px and the next rises in from below (0.45s).
  • The number counts up from 0 over 2.2s on odometer digit columns, driven by one motion value (no re-render per frame).
  • Rotation pauses on mouse hover, while focus is inside, and while the card is off screen.
  • Pill dots are buttons that jump to a stat; the current one stretches and has aria-current.
  • Silent to screen readers while it rotates by itself; once a dot is used, each new stat is announced once, never the counting digits.
  • Reduced motion: cards cross-fade in place and the number shows its final value.

Props

PropTypeDescription
stats{ value: string; label: ReactNode; description?: ReactNode }[]value holds one number ("3.2x", "$1.2M", "12,400"); the number counts up, the prefix and suffix stay put. A value with no number shows as text.
intervalnumberdefault 3.6Seconds each stat stays up before the next rises in.
classNamestringClasses on the root (card plus dots).

Installation

npx shadcn@latest add https://purrfectui.com/r/stat-rotator.json

How to use

import { StatRotator } from "@/components/ui/stat-rotator";

<StatRotator
  stats={[
    { value: "3.2x", label: "Faster savings growth" },
    { value: "$1.2M", label: "Saved in year one" },
    { value: "98%", label: "Hit their monthly goal" },
  ]}
/>

Source code

Loading…

License

MIT. Copy it into your project and change it as you like.

0