Number Ticker

featurefrom MagicUI Effects

Number Ticker

AI Usage Rules

Use NumberTicker for animated statistics and metrics. Requires motion/react. Animates from 0 to value (or reverse with direction="down"). Use delay to stagger multiple tickers. Best for dashboards, landing page stats.

Code Template

"use client"
import { useEffect, useRef } from "react"
import { useInView, useMotionValue, useSpring } from "motion/react"
import { cn } from "@/lib/utils"

interface NumberTickerProps extends React.ComponentProps<"span"> {
  value: number
  direction?: "up" | "down"
  delay?: number
  decimalPlaces?: number
}

export function NumberTicker({ value, direction = "up", delay = 0, decimalPlaces = 0, className, ...props }: NumberTickerProps) {
  const ref = useRef<HTMLSpanElement>(null)
  const motionValue = useMotionValue(direction === "down" ? value : 0)
  const springValue = useSpring(motionValue, { damping: 60, stiffness: 100 })
  const isInView = useInView(ref, { once: true, margin: "0px" })

  useEffect(() => {
    if (isInView) {
      const timer = setTimeout(() => {
        motionValue.set(direction === "down" ? 0 : value)
      }, delay * 1000)
      return () => clearTimeout(timer)
    }
  }, [motionValue, isInView, delay, value, direction])

  useEffect(() => springValue.on("change", (latest) => {
    if (ref.current) ref.current.textContent = Intl.NumberFormat("en-US", { minimumFractionDigits: decimalPlaces, maximumFractionDigits: decimalPlaces }).format(Number(latest.toFixed(decimalPlaces)))
  }), [springValue, decimalPlaces])

  return <span ref={ref} className={cn("inline-block tabular-nums tracking-wider", className)} {...props}>
    {Intl.NumberFormat("en-US", { minimumFractionDigits: decimalPlaces, maximumFractionDigits: decimalPlaces }).format(direction === "down" ? value : 0)}
  </span>
}

Props Schema

Property	Type	Default
delay	number	—
value	number	—
direction	string	—
decimalPlaces	number	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "delay": {
      "type": "number"
    },
    "value": {
      "type": "number"
    },
    "direction": {
      "enum": [
        "up",
        "down"
      ],
      "type": "string"
    },
    "decimalPlaces": {
      "type": "number"
    }
  }
}