Rolling Digits

Component 13

About

An animated number counter where each digit springs and rolls vertically into place when the value changes.

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

Code

How Rolling Digits is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { RollingDigits } from "@/components/ui/rolling-digits";
import { Button } from "@/components/ui/button";
import { useState } from "react";

export default function RollingDigitsDemo() {
  const [value, setValue] = useState(12345);

  return (
    <div className="flex min-h-[280px] w-full flex-col items-center justify-center gap-8 p-8 text-foreground">
      <RollingDigits
        value={value}
        startOnView={false}
        className="text-7xl font-semibold tracking-tight"
      />
      <div className="flex flex-wrap items-center justify-center gap-3">
        <Button
          variant="outline"
          onClick={() => setValue((v) => Math.max(0, v - 137))}
        >
          -137
        </Button>
        <Button variant="outline" onClick={() => setValue((v) => v + 137)}>
          +137
        </Button>
        <Button
          variant="outline"
          onClick={() => setValue(Math.floor(Math.random() * 100000))}
        >
          Randomize
        </Button>
      </div>
    </div>
  );
}