Build one self-contained HTML file (canvas) for a 12-second seamless loop at [WIDTH] x [HEIGHT]. Tone: premium product launch, not a party. No bounce, overshoot, confetti or sparkle bursts.

Fixed text (real figure, do not alter, round or restyle): "[NUMBER]" and "[LABEL]". No other text on screen.

Brand: background [BG], particles and number [INK], accent line [ACCENT]. Font: the attached [FONT] files, embedded as base64. If the font file is missing, stop and ask me.

Particles: about 3,200 tiny points with varied opacity and a faint twinkle, like a night sky. Build the number's shape by drawing "[NUMBER]" in the bold weight on an offscreen canvas and sampling its filled pixels as targets. Give most points to the number so it reads crisply at feed size, comma included. The rest stay as dimmer drifting stars.

Timing:
1. 0-2s: points drift. Nothing else.
2. 2-6.5s: points pull into the number with a long, staggered ease, like gravity, not a snap.
3. 6.5-7.5s: a thin [ACCENT] line draws left to right under the number.
4. 7.5-8.5s: the label fades in and rises about 12px into place.
5. 8.5-10.5s: hold. The number only shimmers.
6. 10.5-12s: label and line fade, points drift back to their exact start. Frame 12 matches frame 0.

Build rules: a fixed random seed for every position. Add window.seek(seconds) that draws any exact frame from the time alone. Reduced-motion shows the held frame.

After the build: capture frames at 0, 2, 4.5, 6.5, 7.5, 9.5, 11 and 12s. Check the number reads exactly "[NUMBER]", nothing is cut off or overlapping, and frames 0 and 12 are identical. Keep each earlier version when you fix something.