{"id":"number-reveal","version":"1.1.0","title":"Minimal Animated Number Reveal","summary":"A big number rolls up over a soft glowing background, pops when it lands, and a label springs in.","kind":"example","target":"canvas2d","collections":["kinetic-text","product-reveals","backgrounds"],"tags":["number","counter","stat","milestone","reveal","gradient","minimal","text","2d","canvas","example"],"loopable":false,"motion":"procedural","durationSeconds":5,"status":"published","media":{"poster":"https://aipixelwizard.com/media/number-reveal/1.1.0/poster.webp","preview":"https://aipixelwizard.com/media/number-reveal/1.1.0/preview.mp4","sample":"https://aipixelwizard.com/media/number-reveal/1.1.0/sample.mp4","sampleBytes":597476,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/number-reveal","manifest":"https://aipixelwizard.com/api/v1/visuals/number-reveal/versions/1.1.0","agentMd":"https://aipixelwizard.com/registry/number-reveal/1.1.0/agent.md","files":"https://aipixelwizard.com/registry/number-reveal/1.1.0/","demo":"https://aipixelwizard.com/registry/number-reveal/1.1.0/index.html"},"description":"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.","role":"Complete example scene.","useCases":["Milestone posts (10k users, $1M raised)","Stats in a pitch or launch video","Year-in-review numbers"],"synonyms":["number reveal","stat animation","milestone video","revenue reveal","user count","big number animation"],"digest":"aaac5f5e36c2bddcbd398bd8f60c6c02e1d5ab12dd4210d559976229cc9e8795","implementation":{"target":"canvas2d","runtime":"browser","language":"javascript","module":"esm","entry":"demo.js","exports":[{"name":"createDemo","signature":"createDemo({ canvas, width, height, params, fps, duration }) => { renderFrame(info), dispose() }","description":"Draws the layers each frame."}],"reusable":[],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"gradient-background","version":"1.0.0","scope":"source","reason":"Background."},{"id":"rolling-counter","version":"1.1.0","scope":"source","reason":"Counter."},{"id":"spring-motion","version":"1.0.0","scope":"source","reason":"Springs."},{"id":"apw-runtime","version":"1.0.0","scope":"source","reason":"Harness and export tools."}],"uses":[{"id":"gradient-background","version":"1.0.0","role":"Background layer."},{"id":"rolling-counter","version":"1.1.0","role":"The counting number."},{"id":"spring-motion","version":"1.0.0","role":"Spring pop on the number and label."}],"usedBy":[],"params":[{"key":"to","label":"Number","type":"integer","min":1,"max":999999999,"step":1,"default":100000},{"key":"prefix","label":"Before the number","type":"text","default":"","maxLength":6,"sensitive":true},{"key":"suffix","label":"After the number","type":"text","default":"+","maxLength":12,"sensitive":true},{"key":"label","label":"Label","type":"text","default":"creators joined","maxLength":40,"sensitive":true},{"key":"countSeconds","label":"Counting time (s)","type":"number","min":1,"max":6,"step":0.1,"default":2.6},{"key":"colorA","label":"Glow 1","type":"color","default":"#7c6cff"},{"key":"colorB","label":"Glow 2","type":"color","default":"#ff6fb5"},{"key":"colorC","label":"Glow 3","type":"color","default":"#38d6ff"},{"key":"base","label":"Base colour","type":"color","default":"#0b0912"}],"presets":[{"id":"default","label":"Community milestone","params":{}},{"id":"revenue","label":"Revenue","params":{"to":1000000,"prefix":"$","suffix":"","label":"raised this year","colorA":"#5ee6c3","colorB":"#3b82f6","colorC":"#a7f3d0","base":"#06110f"}},{"id":"warm","label":"Warm","params":{"to":365,"suffix":"","label":"days of shipping","colorA":"#ff8a3d","colorB":"#ffcf73","colorC":"#ff4d6d","base":"#170a08"}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":5,"posterSeconds":4.5,"alpha":false,"motion":"procedural","loop":{"seamless":false,"method":"Counts once and holds."},"seed":null},"composition":{"inputs":"Parameters only.","outputs":"A Canvas 2D frame.","coordinates":"Pixels.","lighting":"None.","timing":"Pure function of time.","compatibleWith":[],"notes":["Works without React, Remotion or a bundler."]},"reuse":["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."],"integration":{"newProject":"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.","existingProject":"Copy the three ingredient files and reproduce the layering from demo.js in your own canvas loop."},"performance":{"notes":"Light.","limits":"None notable."},"limitations":["Whole numbers only."],"license":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.","thirdParty":[]},"rights":{"approvedForPublicRelease":true},"provenance":"Original code written for AI Pixel Wizard in October 2026. Demo and typography rebuilt in October 2026 to the catalog quality bar (docs/QUALITY.md).","changelog":[{"version":"1.1.0","date":"2026-10-03","notes":"Typography and layout rebuilt: the label sits above the number as a small line, the number is set flush-left and large on a shared margin, the glow is restrained to one corner with grain. Uses rolling-counter 1.1.0 (align)."},{"version":"1.0.0","date":"2026-10-02","notes":"Initial release."}],"verification":{"testedOn":"2026-10-03","inputs":{"number-reveal@1.1.0":"aaac5f5e36c2bddcbd398bd8f60c6c02e1d5ab12dd4210d559976229cc9e8795","gradient-background@1.0.0":"c0a092c4f3f40e009056216e45ad338dddb3b554fdf2461d0cec3ae0d760baf0","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d","rolling-counter@1.1.0":"8aef2813305461b0ad6ffd82c09e36322f72efdc241642d078fd6c4458fb075c","spring-motion@1.0.0":"86255fdc273d65cd967a729287c7ac6cd7bfccfabf9ddb54145bd470ce7a973b"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"Canvas 2D","width":1080,"height":1080,"fps":30,"frames":150,"renderSeconds":21.6,"loopCheck":{"checked":false,"seamless":null,"maxDifference":null,"note":"Asset does not claim a seamless loop."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/number-reveal/1.1.0/poster.webp","preview":"/media/number-reveal/1.1.0/preview.mp4","sample":"/media/number-reveal/1.1.0/sample.mp4","sampleBytes":597476}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/number-reveal/1.1.0/LICENSE"},{"path":"asset.json","size":6494,"sha256":"9cc94e59f5e61646a8b1de5ed4d913ab85ac074f235f5d2a0a03270fe45e0fe1","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/number-reveal/1.1.0/asset.json"},{"path":"demo.js","size":3105,"sha256":"1d8a878b995c88eac92080cfaf4f304342dfadc5ecee3919b13ecc3535ca68bf","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/number-reveal/1.1.0/demo.js"},{"path":"index.html","size":544,"sha256":"9d917565b10799b84b3c95963f2cfac9b53ac7b37840d401bfa0e96a60df4037","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/number-reveal/1.1.0/index.html"}],"warnings":[]}