milestone-reveal

Q: How do I install milestone-reveal?

Run npx skills add https://github.com/charlie947/motion-graphics-skills --skill milestone-reveal in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/milestone-reveal/ (personal) or .claude/skills/milestone-reveal/ (project).

by charlie947Marketing & SEO

Make a 12-second looping milestone clip in code with Claude Code. Thousands of tiny points drift like a night sky, pull together into your real number (followers, subscribers, revenue, customers), a line draws underneath and the label settles in. Premium, not a party. Use when someone says "milestone video", "celebrate 10k followers", "animate my subscriber count", "number reveal", "particle number animation" or wants to mark a result on LinkedIn or Instagram.

Installs: 1.5K
Last 24h: +62
Trending rank: #2856
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/charlie947/motion-graphics-skills --skill milestone-reveal

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads milestone-reveal automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Milestone reveal, built in code

Each point is one follower, one subscriber or one customer. They gather into the number, hold, then drift apart so the loop has no jump.

Before you start: read brand.md and MOTION.md if they exist. If not, run brand-intake first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

Step 1: Ask for four things, then wait

The number, exactly as it should read, with commas. Example: "250,000".
Where it comes from. A screenshot or link to the dashboard that shows it. No source, no clip.
The label, word for word. Example: "LinkedIn followers".
Brand and size. Background, particle and accent colours, the font file (attached), and the size. Default 1080 x 1350, 12 seconds.

The number is the user's real, sourced number. Never round it up, never add "+", never swap a target for a result. If the source shows 12,431, the clip says 12,431 or the user picks a lower round figure themselves.

Step 2: Build brief (paste into Claude Code)

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.

What I learned the hard way

The number looked grey at feed size. Too few points covered each digit. The fix: about 2,700 of 3,200 points on the number, each 2.5px at near full opacity.
Chrome can draw the same frame two ways. After repeated pixel reads it switches drawing mode, so a frame came out slightly different. Create the canvas context with willReadFrequently: true and every seek gives the same pixels.
Seed everything. A Math.random() at render time makes every export different and breaks the loop.
Measure the seam, do not eyeball it. My passing build had 0 pixels different between frame 0 and frame 12.

Step 3: Export

HyperFrames (free, open source): npx skills add heygen-com/hyperframes, then npx hyperframes render. 1080 x 1350 for the LinkedIn feed. For a Reel, hand the MP4 to reel-export. Put the source of the number in the caption.

FAQ

What does the milestone-reveal skill do?

How do I install milestone-reveal?

Run npx skills add https://github.com/charlie947/motion-graphics-skills --skill milestone-reveal in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/milestone-reveal/ (personal) or .claude/skills/milestone-reveal/ (project).

Which AI agents can use milestone-reveal?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is milestone-reveal safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains milestone-reveal?

It is published by charlie947 in charlie947/motion-graphics-skills. It has 1,499 recorded installs.