Count Up Animation

Component

About

A count up animation where every digit rolls into place, or counts, in any Intl number format such as currency, percent or compact. Respects reduced motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Count Up Animation to your project and fits it to your theme.

Code

How Count Up Animation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { NumberTicker, type NumberTickerVariant } from "@/components/ui/count-up-animation";

const settings = {
  variant: "roll",
  duration: 1,
  value: 2481930,
};

const headlineClass =
  "text-[clamp(52px,11vw,112px)] font-bold leading-none tracking-[-0.04em] text-foreground";
const statClass = "text-[clamp(28px,5vw,40px)] font-bold leading-none tracking-[-0.03em] text-foreground";
const captionClass = "text-[13px] leading-5 text-muted-foreground";

function LiveCount() {
  const [value, setValue] = React.useState(1284);
  React.useEffect(() => {
    const id = window.setInterval(() => {
      setValue((v) => Math.max(900, v + Math.round((Math.random() - 0.42) * 60)));
    }, 2600);
    return () => window.clearInterval(id);
  }, []);
  return <NumberTicker value={value} from={1284} variant="roll" className={statClass} />;
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="flex min-h-[460px] w-full flex-col items-center justify-center gap-16 overflow-hidden bg-background px-6 py-14 sm:px-10">
      <div className="flex flex-col items-center gap-4 text-center">
        <NumberTicker
          value={s.value}
          variant={s.variant as NumberTickerVariant}
          duration={s.duration}
          format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
          locales="en-US"
          className={headlineClass}
        />
        <p className="text-[15px] leading-6 text-muted-foreground">Paid out to independent makers this year</p>
      </div>

      <div className="grid w-full max-w-[600px] grid-cols-3 gap-6 text-center">
        <div className="flex flex-col items-center gap-2">
          <NumberTicker
            value={0.9998}
            format={{ style: "percent", minimumFractionDigits: 2 }}
            locales="en-US"
            duration={1.6}
            className={statClass}
          />
          <p className={captionClass}>Uptime, last 90 days</p>
        </div>
        <div className="flex flex-col items-center gap-2">
          <NumberTicker
            value={48200}
            format={{ notation: "compact", maximumFractionDigits: 1 }}
            locales="en-US"
            duration={1.6}
            delay={0.15}
            className={statClass}
          />
          <p className={captionClass}>Teams building with it</p>
        </div>
        <div className="flex flex-col items-center gap-2">
          <LiveCount />
          <p className={captionClass}>Online right now</p>
        </div>
      </div>
    </div>
  );
}