React count-up animation: keep the number readable

What the installed Number Ticker actually does

The published Magic UI Number Ticker accepts value, startValue, direction, delay and decimalPlaces. It uses a spring from motion/react and starts when its span enters the viewport. Its in-view observer is configured once: scrolling away and back does not make it a repeating counter. A change to the value prop can still update the target.

The installed source formats ticks with the en-US locale. If your product needs another locale, adapt the formatter in your local copy. Changing decimalPlaces controls displayed precision; it is not validation or a financial rounding policy.

Install the source, then use the exported component

Follow the installation guide to initialize your React project, Tailwind and matching aliases. This command copies source through the shadcn CLI. Keep the package manager your project already uses.

npx shadcn@latest add https://podie.dev/r/magicui--number-ticker.json

Give motion a readable fallback

This wrapper keeps a stable final label for screen readers and shows the final number when reduced motion is requested. The animated digits are decorative. Do not put every animation frame in an aria-live region: that would repeatedly announce intermediate numbers.

"use client";
import { useReducedMotion } from "motion/react";
import { NumberTicker } from "@/components/magicui/number-ticker";

export function CompletedProjects({ value }: { value: number }) {
  const reducedMotion = useReducedMotion();
  const finalValue = value.toLocaleString("en-US");
  return (
    <span>
      <span className="sr-only">{finalValue} completed projects</span>
      <span aria-hidden="true">
        {reducedMotion ? finalValue : <NumberTicker value={value} />}
        {" completed projects"}
      </span>
    </span>
  );
}

Check the layout at the largest real value

Tabular numerals keep digit widths consistent, but 9 and 10,000 still occupy different space. Reserve enough room for the largest value your interface can actually show. Check wrapping and clipping with the intended font, not just with a short demo number.

If the number must be present in the initial HTML for readers or search engines, render meaningful static text in the host page. The animated span initially contains startValue; a visual count-up should not be the only representation of the statistic.

A useful acceptance check

Test zero, the expected value, a long value and any decimal precision you plan to support. Change the value after mount. Scroll the component into view, leave and return. Then enable reduced motion and confirm the final label remains readable. Run the actual page on a narrow viewport and check the project type check and build.

This note is a source review of the published Number Ticker and an integration example, reviewed October 10, 2026. It is not a claim that this wrapper has passed every browser or assistive-technology combination. Preview, source behavior and a successful installation are separate checks.

Inspect the compared components

Related reading and evidence

• Number Ticker: preview and source
• React text animation selection guide
• Install and troubleshoot
• Use PODIE from your AI editor
• Original Magic UI Number Ticker documentation