milestone-reveal

用代码构建里程碑揭晓效果

每个点代表一位关注者、一位订阅者或一位客户。它们聚拢成数字，停留片刻，然后散开，让循环衔接自然。

**开始前：**如果存在，请先阅读 brand.md 和 MOTION.md。如果不存在，请先运行 brand-intake，或询问十六进制颜色值、字体和徽标文件。没有这些信息，绝不要声称结果符合品牌规范。

第 1 步：询问四项信息，然后等待

1. **数字，按最终显示方式填写，**包含逗号。例如：“250,000”。
2. **数字的来源。**提供一张截图或一个显示该数字的仪表板链接。没有来源，就不制作视频片段。
3. **标签，**逐字填写。例如：“LinkedIn 关注者”。
4. **品牌和尺寸。**背景色、粒子色和强调色、字体文件（作为附件提供）以及尺寸。默认尺寸为 1080 x 1350，时长为 12 秒。

数字必须是用户真实且有来源的数据。绝不向上取整，绝不添加“+”，绝不用目标值替代结果。如果来源显示 12,431，视频片段就显示 12,431，或者由用户自行选择一个更小的整数。

第 2 步：编写简报（粘贴到 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.

我从经验中学到的教训

• **在信息流尺寸下，数字看起来发灰。**覆盖每个数字的点太少。解决办法：3,200 个点中，约有 2,700 个用于构成数字，每个点为 2.5px，且不透明度接近全满。
• **Chrome 可能用两种方式绘制同一帧。**反复读取像素后，它会切换绘制模式，导致帧的显示略有不同。使用 willReadFrequently: true 创建画布上下文，这样每次跳转都会得到相同像素。
• **为所有内容设置随机种子。**在渲染时调用 Math.random() 会导致每次导出都不同，也会破坏循环效果。
• **测量衔接处，不要凭感觉判断。**我通过测试的版本中，第 0 帧和第 12 帧之间有 0 个像素不同。

第 3 步：导出

HyperFrames（免费、开源）：先运行 npx skills add heygen-com/hyperframes，然后运行 npx hyperframes render。LinkedIn 信息流使用 1080 x 1350。制作 Reel 时，将 MP4 交给 reel-export。在说明文字中注明数字的来源。