velements

Number Counters

Number counters: make a statistic land

Updated September 18, 20263 min read

How do you animate a number counting up?

Choose a counter preset, set the start and end values, decimals, prefix and suffix, then pick the duration and easing. The number counts up in the preview exactly as it will in the export, which you can drop into a report, an ad or a social post.

A number that arrives already written is a fact. A number that counts up is an event. These presets roll digits, sweep rings, stack stat cards and tick countdowns with your own figures.

Five number counters presets to start from

Hover any card to play it. Opening one loads it in the editor with every control unlocked.

  • A big bold number counts up to your figure with a satisfying landing pop and a label beneath.

  • A progress ring sweeps to your percentage while the number counts in the center. Clean data storytelling.

  • A dashboard-style card slides up, counts to the metric and pops a growth badge. Built for business updates.

  • A classic countdown with a draining ring and bouncing digits. Set the start and end numbers.

  • Digits spin like a mechanical counter and lock into your number from right to left. Tactile and premium.

All number counters

How to make one in the browser

  1. 01Open a number counters presetBrowse the Number Counters category and open the preset closest to what you need. It loads in the editor with every control unlocked.
  2. 02Make it yoursRewrite the text, set your brand colors and font, adjust easing and duration, and switch the aspect ratio for the platform you are posting to.
  3. 03Export the clipChoose MP4 for a normal track or transparent WebM for an overlay, pick a resolution up to 8K, and the file renders on your own machine.

Which format should you export?

Use MP4 when the clip sits on its own track or fills the frame. Use transparent WebM whenever it has to float over your own footage: the alpha channel is real, so no keying or blend mode is needed.

Format
MP4 H.264 · WebM VP9
Alpha
Transparent WebM
Resolution
720p to 8K
Aspect
16:9 · 9:16 · 1:1 · 4:5
License
Commercial use included

Three tips that make it look intentional

  • Ease out at the end so the final number settles rather than stops.
  • Use a prefix or suffix ($, %, k) instead of writing units into the label.
  • Two seconds reads as confident; four feels slow unless the number is huge.

Frequently asked

Can I count to a decimal value?
Yes, choose how many decimals to show and the counter formats every frame consistently.
Can I show a currency symbol?
Prefix and suffix fields take any short string, including currency symbols and units.
  • Animated Infographics

    Animated charts: data that explains itself in seconds

    Enter your values and labels into a chart preset, set the colors, and choose how fast the bars grow or the line draws. Export MP4 for a slide or transparent WebM to place the chart over a presenter, with no spreadsheet or plugin involved.

    Read the guide
  • Loading Animations

    Loading animations: spinners and progress that feel fast

    A good loader starts instantly, loops seamlessly and suggests progress rather than time. Keep the motion under one and a half seconds per cycle, use a single accent color, and export a transparent WebM so it can sit over any app screen or video.

    Read the guide
  • UI Animations

    UI animations: product demos without a screen recording

    Use a UI preset: a button press, a toggle, a cursor click, a card flip or a toast. Type your own labels, set your product colors, and export transparent WebM. The interaction reads clearly even when the real app is still in design.

    Read the guide