Count Up

Animations

Animated number counter with customizable formatting.

Import

import { PixelCountUp } from "@/components/ui/pixel/animations/pixel-count-up"

Usage

0

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/animations/pixel-count-up.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelCountUpVariants = cva(
  "font-bold uppercase tracking-wider pixel-font tabular-nums",
  {
    variants: {
      variant: {
        default: "text-black dark:text-[#ffd700]",
        primary: "text-[#ff8c00] dark:text-[#ff8c00]",
        secondary: "text-[#ffd700] dark:text-[#ffd700]",
        success: "text-[#00ff00] dark:text-[#00ff00]",
      },
      size: {
        sm: "text-xl",
        md: "text-4xl",
        lg: "text-6xl",
        xl: "text-8xl",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  },
);

export interface PixelCountUpProps
  extends React.HTMLAttributes<HTMLSpanElement>,
    VariantProps<typeof pixelCountUpVariants> {
  to: number;
  from?: number;
  duration?: number;
  delay?: number;
  separator?: string;
  prefix?: string;
  suffix?: string;
  startWhen?: boolean;
  onStart?: () => void;
  onEnd?: () => void;
}

const PixelCountUp = React.forwardRef<HTMLSpanElement, PixelCountUpProps>(
  (
    {
      to,
      from = 0,

// ... (more code below)

Props

PropTypeDefaultDescription
tonumber-Target number to count to
fromnumber0Starting number
durationnumber2Animation duration in seconds
delaynumber0Delay before animation starts
separatorstring""Thousands separator
prefixstring""Prefix (e.g., '$')
suffixstring""Suffix (e.g., '+')

Examples

Currency Counter

0

Score Counter

0

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.