Counter explosion
SubscriptionA number counting to its target, then bursting, then resetting and doing it again.
A three-state machine drives the whole thing: count for 2.2 seconds on a cubic ease-out, burst and hold for 2.5, rest for 1.5, then start over — so the figure is never static and never mid-count when the section is entered. The count is eased rather than linear, which is what makes the last hundred feel like an arrival instead of a stop. On reaching the target it seeds a hundred and twenty particles that integrate under gravity and drag, each with its own life, so the burst thins from its edges. The figure itself is a DOM element over the canvas, so it stays selectable text at full weight rather than being drawn as pixels.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
See plans