Basic Number Ticker

The BasicNumberTicker component creates a smooth, animated numeric transition from a starting value to a target value. Leveraging Framer Motion's robust layout engines, it provides precise control over speed, easing, and timing, making it perfect for dynamic statistics, growth metrics, and dashboards.

Preview

import NumberTicker from "@/registry/spark-ui/basic-number-ticker";

export default function BasicNumberTickerDemo() {
  return (
    <div className="flex items-center justify-center">
      <span className="text-5xl sm:text-6xl font-normal text-zinc-900 dark:text-zinc-50 font-mono">
        <NumberTicker from={0} target={99} />
        <span>%</span>
      </span>
    </div>
  );
}

Usage

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/basic-number-ticker.json

Basic Example

import NumberTicker from "@/components/ui/basic-number-ticker";

export default function App() {
  return (
    <div className="text-3xl font-normal font-mono">
      <NumberTicker from={0} target={99} />%
    </div>
  );
}

Variants Preview

"use client";

import { useRef } from "react";
import NumberTicker, { NumberTickerRef } from "@/registry/spark-ui/basic-number-ticker";
import { RotateCcw } from "lucide-react";

export default function BasicNumberTickerVariantsDemo() {
  const tickerRef = useRef<NumberTickerRef>(null);

  const handleRestart = () => {
    tickerRef.current?.startAnimation();
  };

  return (
    <div className="w-full max-w-2xl px-4 py-4">
      <div className="grid grid-cols-1 sm:grid-cols-3 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-zinc-50/30 dark:bg-zinc-900/5 divide-y sm:divide-y-0 sm:divide-x divide-zinc-200 dark:divide-zinc-800">
        
        {/* Metric 1: Avg. Latency */}
        <div className="p-5 flex flex-col justify-between">
          <div>
            <span className="text-[11px] font-medium text-zinc-500 dark:text-zinc-300 uppercase tracking-wider">
              Avg. Latency
            </span>
            <p className="text-[10px] text-zinc-400 dark:text-zinc-400 mt-0.5">
              1.2s linear transition
            </p>
          </div>
          <div className="mt-4">
            <span className="text-3xl font-normal text-zinc-900 dark:text-zinc-50 font-mono tracking-tight">
              <NumberTicker
                from={10}
                target={124}
                transition={{ duration: 1.2, ease: "linear" }}
              />
              <span className="text-zinc-400 dark:text-zinc-400 text-lg ml-0.5">ms</span>
            </span>
          </div>
        </div>

        {/* Metric 2: Uptime */}
        <div className="p-5 flex flex-col justify-between">
          <div>
            <span className="text-[11px] font-medium text-zinc-500 dark:text-zinc-300 uppercase tracking-wider">
              Uptime Guarantee
            </span>
            <p className="text-[10px] text-zinc-400 dark:text-zinc-400 mt-0.5">
              2.5s easeOut transition
            </p>
          </div>
          <div className="mt-4">
            <span className="text-3xl font-normal text-zinc-900 dark:text-zinc-50 font-mono tracking-tight">
              <NumberTicker
                from={90}
                target={99.9}
                transition={{ duration: 2.5, ease: "easeOut" }}
              />
              <span className="text-zinc-400 dark:text-zinc-400 text-lg ml-0.5">%</span>
            </span>
          </div>
        </div>

        {/* Metric 3: Deployments */}
        <div className="p-5 flex flex-col justify-between">
          <div>
            <span className="text-[11px] font-medium text-zinc-500 dark:text-zinc-300 uppercase tracking-wider">
              Deployments
            </span>
            <p className="text-[10px] text-zinc-400 dark:text-zinc-400 mt-0.5">
              Manual trigger
            </p>
          </div>
          <div className="mt-4 flex flex-col items-start">
            <span className="text-3xl font-normal text-zinc-900 dark:text-zinc-50 font-mono tracking-tight">
              +<NumberTicker
                ref={tickerRef}
                from={0}
                target={156}
                autoStart={false}
                transition={{ duration: 1.5, ease: "easeInOut" }}
              />
            </span>
            <button
              onClick={handleRestart}
              className="mt-2 flex items-center gap-1.5 px-2 py-0.5 text-[10px] font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors active:scale-95 cursor-pointer"
            >
              <RotateCcw size={10} />
              Re-animate
            </button>
          </div>
        </div>

      </div>
    </div>
  );
}

Avg. Latency

1.2s linear transition

10ms

Uptime Guarantee

2.5s easeOut transition

90%

Deployments

Manual trigger

Properties

Prop	Type	Default	Description
`from`	`number`	`0`	The starting numeric value of the animation.
`target`	`number`	`100`	The target numeric value to count up or down to.
`transition`	`ValueAnimationTransition`	`{ duration: 3, type: "tween", ease: "easeInOut" }`	Animation configuration, matching standard Framer Motion animation properties (tween/spring, duration, ease, etc.).
`className`	`string`	`—`	Additional CSS classes for custom styling.
`onStart`	`() => void`	`—`	Callback function invoked when the animation begins.
`onComplete`	`() => void`	`—`	Callback function invoked when the animation finishes.
`autoStart`	`boolean`	`true`	If true, start the count animation automatically when mounted.