Milestone Reveal
Make a 12-second looping milestone clip in code with Claude Code.
Install
npx skills add charlie947/motion-graphics-skills --skill milestone-reveal -g -a claude-code -y- Repository
- charlie947/motion-graphics-skills519
- Category
- Design
- Updated
- 24d ago
- License
- MIT
- Context cost
- Lightabout 902 tokens
- Runs scripts
- No, instructions only
What it does
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.
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.
