Counter

An animated number counter with smooth rolling digits

Configuring your account...

Please wait while we prepare everything for you

Usage

import Counter from '@/components/bynanaui/counter';

export default function Demo() {
  return (
    <Counter
      value={1234}
      places={[1000, 100, 10, 1]}
      fontSize={80}
      padding={5}
      gap={10}
      textColor="#000000"
      fontWeight={900}
    />
  );
}

Props

PropTypeDefaultDescription
valuenumberRequiredThe number to display
fontSizenumber100Font size in pixels
paddingnumber0Padding around digits
placesnumber[][100, 10, 1]Digit places (e.g., hundreds, tens, ones)
gapnumber8Space between digits
textColorstring'#000000'Color of the digits
fontWeightnumber | string900Font weight
gradientFromstring'#ffffff'Top gradient color
gradientTostring'transparent'Bottom gradient color

Features

  • Smooth Animations: Spring physics for natural rolling
  • Customizable Places: Show any number of digits
  • Gradient Overlay: Subtle fade effect at top/bottom
  • Black & White Theme: Clean, minimal design
  • Tabular Numbers: Consistent digit width