{"id":"countdown-ring","version":"1.0.0","title":"Countdown Ring","summary":"A countdown where a thick ring sweeps down for every number, digits drop in under a mask, and the final word lands with a flash.","kind":"text","target":"canvas2d","collections":["kinetic-text","product-reveals"],"tags":["countdown","timer","ring","launch","stream starting","count down","numbers","dial","text animation","event"],"loopable":false,"motion":"procedural","durationSeconds":8,"status":"published","media":{"poster":"https://aipixelwizard.com/media/countdown-ring/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/countdown-ring/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/countdown-ring/1.0.0/sample.mp4","sampleBytes":547463,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/countdown-ring","manifest":"https://aipixelwizard.com/api/v1/visuals/countdown-ring/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/countdown-ring/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/countdown-ring/1.0.0/","demo":"https://aipixelwizard.com/registry/countdown-ring/1.0.0/index.html"},"description":"A countdown that counts with a ring. A thick arc sweeps away round a dial, one full sweep per number; at each tick the digit snaps out and the next drops in under a mask, a pulse leaves the ring and tick marks light up as they are passed. At zero the ring closes, flashes and the final word lands. Choose the number to start from (2 to 10), the final word (or none), the colours (electric, sunrise, lime or mono), the seconds per number and the backdrop colour.","role":"Text scene (Canvas 2D): launch, stream-starting and event countdowns.","useCases":["A product launch or event countdown","A live stream starting soon screen","A count-in before a reveal"],"synonyms":["countdown timer","321 go","stream countdown","launch countdown","progress ring","count-in"],"digest":"c731466575b271dcd109988125a3d66a21b0ee1861b648ad7bffd7d63231e4e1","implementation":{"target":"canvas2d","runtime":"browser","language":"javascript","module":"esm","entry":"src/countdown-ring.js","exports":[{"name":"createCountdownRing","signature":"createCountdownRing({ from?, final?, theme?, per?, start?, fontFamily? }) => { draw(ctx, info, width, height), revealDuration }","description":"Canvas 2D countdown layer driven by info.time (seconds)."},{"name":"THEMES","signature":"THEMES: { electric, sunrise, lime, mono }","description":"Ring, track, digit and glow colours."}],"reusable":["src/countdown-ring.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness. The reusable source has no dependencies."}],"uses":[],"usedBy":[],"params":[{"key":"from","label":"Count from","type":"integer","min":2,"max":10,"step":1,"default":5},{"key":"final","label":"Final word","help":"Shown at zero. Leave empty for none.","type":"text","default":"GO","maxLength":8,"sensitive":true},{"key":"theme","label":"Theme","type":"select","default":"electric","options":[{"value":"electric","label":"Electric"},{"value":"sunrise","label":"Sunrise"},{"value":"lime","label":"Lime"},{"value":"mono","label":"Mono"}]},{"key":"per","label":"Seconds per number","type":"number","min":0.5,"max":1.5,"step":0.1,"default":1},{"key":"background","label":"Backdrop","type":"color","default":"#0b1020"}],"presets":[{"id":"default","label":"Electric, five to go","params":{}},{"id":"sunrise","label":"Sunrise, ten","params":{"theme":"sunrise","from":10,"per":0.6,"final":"LIVE","background":"#1a1020"}},{"id":"lime","label":"Lime, three","params":{"theme":"lime","from":3,"final":"START","background":"#0d1409"}},{"id":"mono","label":"Mono, no word","params":{"theme":"mono","from":4,"final":"","background":"#111216"}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":8,"posterSeconds":2.2,"alpha":false,"motion":"procedural","loop":{"seamless":false,"method":"Not a loop: it counts down and ends on the final word (or an empty, closed ring)."},"seed":null},"composition":{"inputs":"Canvas 2D context, info.time (seconds), width, height.","outputs":"Draws the countdown on top of the canvas; does not clear it.","coordinates":"Centred; the ring has a radius of 330 on a 1080 canvas and scales with the smaller side.","lighting":"The ring glows in the theme colour; the demo adds a soft pool of it behind.","timing":"Pure function of time; one number per `per` seconds after a 0.4 s start; revealDuration says when the final word has landed.","compatibleWith":["kinetic-title","gradient-background"],"notes":["Total length is 0.4 s + from × seconds per number + 0.9 s; the 8-second clip fits the defaults (5 numbers) with time to hold, and presets with more numbers shorten each one."]},"reuse":["Launch: Electric, five to go.","Live stream: Sunrise, ten.","Quick count-in: Lime, three."],"integration":{"newProject":"Create the countdown once, then each frame draw your backdrop and call count.draw(ctx, { time: frame / fps }, width, height).","existingProject":"Copy src/countdown-ring.js. Call draw on your existing 2D canvas after the rest of the frame."},"performance":{"notes":"A few arcs and 60 tick marks per frame; negligible.","limits":"The final word is best under about six characters."},"limitations":["System fonts differ between computers; pass fontFamily and load the font first for identical renders.","Counting down from more than ten, or at under half a second per number, will not fit the 8-second clip."],"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, to the catalog quality bar (docs/QUALITY.md).","changelog":[{"version":"1.0.0","date":"2026-10-08","notes":"Initial release."}],"verification":{"testedOn":"2026-10-08","inputs":{"countdown-ring@1.0.0":"c731466575b271dcd109988125a3d66a21b0ee1861b648ad7bffd7d63231e4e1","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"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":240,"renderSeconds":18.4,"loopCheck":{"checked":false,"seamless":null,"maxDifference":null,"note":"Asset does not claim a seamless loop."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/countdown-ring/1.0.0/poster.webp","preview":"/media/countdown-ring/1.0.0/preview.mp4","sample":"/media/countdown-ring/1.0.0/sample.mp4","sampleBytes":547463}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/countdown-ring/1.0.0/LICENSE"},{"path":"asset.json","size":6579,"sha256":"56ed589f39d148733dea6ef19d090e1917d70395c207128ada05dd9d92ec2ea6","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/countdown-ring/1.0.0/asset.json"},{"path":"demo.js","size":912,"sha256":"5588cded4f63d067fe7382d7d37d0cb9c5d6323efed90d0598949319bd672858","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/countdown-ring/1.0.0/demo.js"},{"path":"index.html","size":528,"sha256":"aa621809756a46c0191918dd31c4ee61dd387db4ae99d595d6b55bf43c718e73","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/countdown-ring/1.0.0/index.html"},{"path":"src/countdown-ring.js","size":5473,"sha256":"685752666283319faed4cd153f91e9353b0a9149b1f47c7de958a27471b66c0b","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/countdown-ring/1.0.0/src/countdown-ring.js"}],"warnings":[]}