Counter Widget

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

Related Widgets

• Text Widget - For labels and descriptions

• Typewriter Widget - For text animations

• Container Widget - For grouping counter elements

---