milestone-reveal

コードで構築するマイルストーンの公開

各点は、フォロワー、登録者、または顧客を1人表します。集まって数字を形作り、その状態を保ってから散らばるため、ループの切れ目が目立ちません。

始める前に： brand.md と MOTION.md がある場合は、それを読んでください。ない場合は、まず brand-intake を実行するか、カラーコード、フォント、ロゴファイルを尋ねてください。それらがない状態で、ブランドに合っていると判断してはいけません。

ステップ1：4つの情報を尋ねて、返答を待つ

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では、同じフレームが2通りに描画されることがあります。 ピクセルの読み取りを繰り返すと描画モードが切り替わり、フレームがわずかに異なって出力されました。willReadFrequently: true を指定してキャンバスコンテキストを作成すると、シークするたびに同じピクセルが得られます。
• すべてにシード値を設定してください。 レンダリング時に Math.random() を使うと、エクスポートのたびに結果が異なり、ループが崩れます。
• 継ぎ目は目視で判断せず、測定してください。 合格したビルドでは、フレーム0とフレーム12の間で異なるピクセルは0個でした。

ステップ3：エクスポート

HyperFrames（無料、オープンソース）：npx skills add heygen-com/hyperframes を実行してから、npx hyperframes render を実行します。LinkedInフィード用に1080 x 1350にします。リールの場合は、MP4を reel-export に渡してください。キャプションに数字の出典を記載します。