# Minimal Animated Number Reveal — `number-reveal@1.0.0`

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

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.

- Kind: example; status: published; digest sha256:baa5496ae65eae2f5c2ec2b5790618b1503db689340fbead87664fae9dccd98e
- Role: Complete example scene.
- Implementation: canvas2d; entry `demo.js`
- Files: https://aipixelwizard.com/registry/number-reveal/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/number-reveal/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/number-reveal/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- 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.

## Exports
- `createDemo({ canvas, width, height, params, fps, duration }) => { renderFrame(info), dispose() }` — Draws the layers each frame.

## Parameters
- `to` (integer 1–999999999, default 100000) — Number
- `prefix` (text, default "") — Before the number
- `suffix` (text, default "+") — After the number
- `label` (text, default "creators joined") — Label
- `countSeconds` (number 1–6, default 2.6) — Counting time (s)
- `colorA` (color, default "#7c6cff") — Glow 1
- `colorB` (color, default "#ff6fb5") — Glow 2
- `colorC` (color, default "#38d6ff") — Glow 3
- `base` (color, default "#0b0912") — Base colour

## Composition
- Inputs: Parameters only.
- Outputs: A Canvas 2D frame.
- Coordinates: Pixels.
- Lighting: None.
- Timing: Pure function of time.
- Works with: —
- Works without React, Remotion or a bundler.

## Output and loop
- 1080×1080, 30 fps, 5 s, procedural
- Seamless loop: no — Counts once and holds.
- Verified 2026-10-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-generic (x64), Node 22.14.0 (Canvas 2D); deterministic: yes

## Use it
New project: Download the pack, npm install, npm run serve and open number-reveal/1.0.0/index.html. Export with npm run render -- number-reveal/1.0.0 --param to=25000.

Existing project: Copy the three ingredient files and reproduce the layering from demo.js in your own canvas loop.

Reuse ideas:
- 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.

## Limitations
- Whole numbers only.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License (see LICENSE in this folder).

Provenance: Original code written for AI Pixel Wizard in October 2026.