设计与多媒体

milestone-reveal

charlie947/moti…s-skills

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.

  • 1679 次安装
  • 475 星标
  • 收录于

安装命令

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

SKILL.md

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

  1. The number, exactly as it should read, with commas. Example: "250,000".
  2. Where it comes from. A screenshot or link to the dashboard that shows it. No source, no clip.
  3. The label, word for word. Example: "LinkedIn followers".
  4. 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.