Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Minimal Animated Number Reveal

A big number rolls up over a soft glowing background, pops when it lands, and a label springs in.

Finished scene, V3 Scenes2D0 lines of codev1.0.0

In Text & data

Next: Kinetic Title RevealSurprise me

Minimal Animated Number Reveal preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

100000
2.6

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 876 KB)
Info

What it is

A clean milestone reveal: an odometer counts up to your number over a slowly drifting gradient, gives a satisfying little pop as it lands, then a label bounces into place underneath. Set the number, the $ or + around it, the label and the three background colours. Plain browser JavaScript (Canvas 2D) — no frameworks.

Built from these ingredients

Make it your own

  • Swap the background for Hypnotic Particle Tunnel for a louder version.
  • Place three counters side by side for a stats slide.
  • Use the spring pop on any element that should land with emphasis.

Good to know

  • Whole numbers only.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module demo.js
Exports
  • createDemo({ canvas, width, height, params, fps, duration }) => { renderFrame(info), dispose() }
Dependencies (exact)
  • gradient-background@1.0.0 (source) — Background.
  • rolling-counter@1.0.0 (source) — Counter.
  • spring-motion@1.0.0 (source) — Springs.
  • apw-runtime@1.0.0 (source) — Harness and export tools.
How it fits a scene

Coordinates: Pixels.

Lighting: None.

Timing: Pure function of time.

Output
1080×1080, 30 fps, 5 s · procedural (computed from the frame number) · not a loop — Counts once and holds.
Tested
Rendered 150 frames on 2026-10-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical.
Performance
Light. None notable.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- number-reveal/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:baa5496ae65eae2f… · other versions: 1.1.0
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License (see LICENSE in this folder). License details
Provenance
Original code written for AI Pixel Wizard in October 2026.
BinMore like this

More like this

Play these full screen