fx-counter-explosion

name	fx-counter-explosion
description	A number counts up then bursts — for a big stat. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.
triggers	["counter","数字爆炸"]
od	{"mode":"prototype","surface":"web","platform":"desktop","category":"animation-motion","upstream":"https://github.com/nexu-io/open-design","preview":{"type":"html"},"design_system":{"requires":false},"example_prompt":"Use fx-counter-explosion as a number effect on a slide or hero: call HPX['counter-explosion'](el) on a positioned dark\ncontainer; keep to one bold effect per screen, with a reduced-motion guard.\n"}

Counter Explosion

A number counts up then bursts — for a big stat. From Open Design's html-ppt fx pack (Apache-2.0). Part of motion-anything; obeys MOTION-SPEC.md.

When to use it

• Title cards, section breaks, or hero moments in slides / launch videos.

When NOT to use it (restraint)

• Web body content or anything needing focused reading. Never more than one bold effect at once.

How to apply

1. Copy counter-explosion.js and _util.js and link them.
2. Add data-fx="counter-explosion" to a positioned container; call HPX['counter-explosion'](el) (guard prefers-reduced-motion).

Accessibility & performance

• Guard with prefers-reduced-motion (don't start). Canvas-based; isolated compositing layer.