Widgets/Counter Widget

Counter Widget

Animate numbers counting up to a target value with smooth interpolation.

View as MarkdownOpen in ChatGPT Open in Claude

The Counter Widget animates a number counting up from 0 to a target value with smooth interpolation. It’s perfect for displaying statistics, metrics, achievements, and any numerical data that needs to make an impact.

Basic Usage

<div
  data-type="counter"
  data-end-number="1000"
  data-decimal="false"
  data-duration-animation="4"
  data-start="1"
  class="text-6xl font-bold text-purple-600"
></div>

Attributes

Attribute Type Default Description
data-type string - Must be "counter"
data-end-number number 1000 Final number to count to
data-decimal string “false” Show decimal places: "true" or "false"
data-duration-animation number 4 How long counting takes in seconds
data-start number 0 When counting starts in seconds

Animation Behavior

Counting Animation

The counter widget creates a smooth counting animation:

  • Before start: Shows 0
  • During animation: Smoothly counts up with cubic easing
  • After animation: Shows final number

Number Formatting

  • Integers: Uses toLocaleString() for comma separation (e.g., “1,000,000”)
  • Decimals: Shows 2 decimal places (e.g., “1,234.56”)

Examples

Simple Counter

<div class="relative w-full h-full bg-green-100" data-type="container">
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <div
      class="text-8xl font-bold text-green-800"
      data-type="counter"
      data-end-number="1000000"
      data-start="1"
      data-duration-animation="4"
    ></div>
    <div
      class="text-3xl text-green-600 mt-4"
      data-type="text"
      data-animate="fade"
      data-start="5"
      data-duration-animation="2"
    >
      Downloads
    </div>
  </div>
</div>

Multiple Counters

<div class="relative w-full h-full bg-blue-900" data-type="container">
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <!-- First counter -->
    <div
      class="text-6xl font-bold text-blue-200 mb-4"
      data-type="counter"
      data-end-number="50000"
      data-start="0"
      data-duration-animation="3"
    ></div>
    <div
      class="text-xl text-blue-300 mb-8"
      data-type="text"
      data-animate="fade"
      data-start="3"
      data-duration-animation="1"
    >
      Users
    </div>

    <!-- Second counter -->
    <div
      class="text-6xl font-bold text-blue-200 mb-4"
      data-type="counter"
      data-end-number="1000000"
      data-start="4"
      data-duration-animation="3"
    ></div>
    <div
      class="text-xl text-blue-300"
      data-type="text"
      data-animate="fade"
      data-start="7"
      data-duration-animation="1"
    >
      Videos Created
    </div>
  </div>
</div>

Decimal Counter

<div class="relative w-full h-full bg-purple-100" data-type="container">
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <div
      class="text-7xl font-bold text-purple-800"
      data-type="counter"
      data-end-number="99.9"
      data-decimal="true"
      data-start="1"
      data-duration-animation="4"
    ></div>
    <div
      class="text-3xl text-purple-600 mt-4"
      data-type="text"
      data-animate="fade"
      data-start="5"
      data-duration-animation="2"
    >
      % Uptime
    </div>
  </div>
</div>

Styling Options

Text Sizes

<!-- Small counter -->
<div class="text-2xl" data-type="counter" data-end-number="100">Small</div>

<!-- Medium counter -->
<div class="text-5xl" data-type="counter" data-end-number="1000">Medium</div>

<!-- Large counter -->
<div class="text-8xl" data-type="counter" data-end-number="10000">Large</div>

Font Weights

<!-- Light -->
<div class="font-light" data-type="counter" data-end-number="100">Light</div>

<!-- Regular -->
<div class="font-normal" data-type="counter" data-end-number="100">Regular</div>

<!-- Bold -->
<div class="font-bold" data-type="counter" data-end-number="100">Bold</div>

<!-- Extra bold -->
<div class="font-black" data-type="counter" data-end-number="100">
  Extra Bold
</div>

Colors

<!-- Blue -->
<div class="text-blue-600" data-type="counter" data-end-number="100">Blue</div>

<!-- Green -->
<div class="text-green-600" data-type="counter" data-end-number="100">
  Green
</div>

<!-- Red -->
<div class="text-red-600" data-type="counter" data-end-number="100">Red</div>

<!-- Purple -->
<div class="text-purple-600" data-type="counter" data-end-number="100">
  Purple
</div>

Animation Timing

Fast Counter (2 seconds)

<div
  data-type="counter"
  data-end-number="1000"
  data-duration-animation="2"
  data-start="0"
></div>

Slow Counter (8 seconds)

<div
  data-type="counter"
  data-end-number="1000000"
  data-duration-animation="8"
  data-start="0"
></div>

Delayed Start

<div
  data-type="counter"
  data-end-number="5000"
  data-start="3"
  data-duration-animation="4"
></div>

Common Use Cases

Statistics Dashboard

<div class="relative w-full h-full bg-gray-900" data-type="container">
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <!-- Main stat -->
    <div
      class="text-8xl font-bold text-white mb-4"
      data-type="counter"
      data-end-number="10000"
      data-start="1"
      data-duration-animation="3"
    ></div>

    <!-- Stat label -->
    <div
      class="text-3xl text-gray-300 mb-8"
      data-type="text"
      data-animate="fade"
      data-start="4"
      data-duration-animation="2"
    >
      Happy Customers
    </div>

    <!-- Supporting text -->
    <div
      class="text-xl text-gray-400"
      data-type="text"
      data-animate="fade"
      data-start="6"
      data-duration-animation="2"
    >
      Join thousands of creators using Tintage
    </div>
  </div>
</div>

Achievement Counter

<div
  class="relative w-full h-full bg-gradient-to-br from-yellow-400 to-orange-500"
  data-type="container"
>
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <div
      class="text-9xl font-black text-white mb-4"
      data-type="counter"
      data-end-number="1000000"
      data-start="1"
      data-duration-animation="5"
    ></div>
    <div
      class="text-4xl text-yellow-100 font-bold"
      data-type="text"
      data-animate="fade"
      data-start="6"
      data-duration-animation="2"
    >
      Videos Created
    </div>
  </div>
</div>

Performance Metrics

<div class="relative w-full h-full bg-blue-900" data-type="container">
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <div
      class="text-7xl font-bold text-blue-200 mb-4"
      data-type="counter"
      data-end-number="99.9"
      data-decimal="true"
      data-start="1"
      data-duration-animation="4"
    ></div>
    <div
      class="text-3xl text-blue-300"
      data-type="text"
      data-animate="fade"
      data-start="5"
      data-duration-animation="2"
    >
      % Success Rate
    </div>
  </div>
</div>

Best Practices

Number Selection

Number Range Recommended Duration Use Case
1-100 2-3 seconds Small metrics
100-10,000 3-4 seconds Medium statistics
10,000+ 4-6 seconds Large numbers
Decimals 3-5 seconds Percentages, rates

Visual Design

  • Large numbers: Use big font sizes (text-6xl to text-9xl) for impact
  • High contrast: Ensure good readability with contrasting colors
  • Bold fonts: Use bold or black font weights for emphasis
  • Supporting text: Add labels and descriptions below counters

Timing

  • Build anticipation: Start counter after other elements have appeared
  • Appropriate speed: Match counting speed to the number size
  • Smooth transitions: Use longer durations for large numbers

Advanced Techniques

Sequential Counters

<div class="relative w-full h-full bg-gray-800" data-type="container">
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <!-- First counter -->
    <div
      class="text-6xl font-bold text-white mb-4"
      data-type="counter"
      data-end-number="50000"
      data-start="0"
      data-duration-animation="3"
    ></div>
    <div
      class="text-xl text-gray-300 mb-8"
      data-type="text"
      data-animate="fade"
      data-start="3"
      data-duration-animation="1"
    >
      Users
    </div>

    <!-- Second counter -->
    <div
      class="text-6xl font-bold text-white mb-4"
      data-type="counter"
      data-end-number="1000000"
      data-start="4"
      data-duration-animation="3"
    ></div>
    <div
      class="text-xl text-gray-300"
      data-type="text"
      data-animate="fade"
      data-start="7"
      data-duration-animation="1"
    >
      Videos
    </div>
  </div>
</div>

Mixed with Other Widgets

<div class="relative w-full h-full bg-green-100" data-type="container">
  <!-- Title -->
  <div
    class="absolute top-1/4 left-1/2 -translate-x-1/2 text-green-800 text-4xl font-bold text-center"
    data-type="text"
    data-animate="fade"
    data-start="0"
    data-duration-animation="2"
  >
    Our Impact
  </div>

  <!-- Counter -->
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <div
      class="text-8xl font-bold text-green-800"
      data-type="counter"
      data-end-number="1000000"
      data-start="2"
      data-duration-animation="4"
    ></div>
    <div
      class="text-2xl text-green-600 mt-4"
      data-type="text"
      data-animate="fade"
      data-start="6"
      data-duration-animation="2"
    >
      Lives Changed
    </div>
  </div>

  <!-- Call to action -->
  <div
    class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-green-700 text-xl font-semibold text-center"
    data-type="text"
    data-animate="fade"
    data-start="8"
    data-duration-animation="2"
  >
    Be part of the change
  </div>
</div>

Troubleshooting

Counter Not Animating

Problem: Number doesn’t count up

Solutions:

  • Check that data-type="counter" is set correctly
  • Verify data-end-number is a valid number
  • Make sure data-start time is reasonable
  • Ensure data-duration-animation is set

Number Formatting Issues

Problem: Numbers don’t display correctly

Solutions:

  • For integers: use data-decimal="false" or omit the attribute
  • For decimals: use data-decimal="true"
  • Large numbers automatically get comma separators
  • Check that data-end-number is a valid number

Animation Too Fast/Slow

Problem: Counting speed doesn’t feel right

Solutions:

  • Adjust data-duration-animation value
  • Longer duration = slower counting
  • Shorter duration = faster counting
  • Consider the size of your target number

Counter Overlapping

Problem: Multiple counters overlap

Solutions:

  • Use different positioning classes
  • Space out the data-start times
  • Use different vertical positions
  • Add margins between elements

Last updated on January 5, 2026