数字のカウントアップ（count-up）

数字が昔のメーターのように回って1から増え、右の桁から順にカチッと止まる6秒の縦動画を作れます。何の数字かは、数え始めてすぐ下に出ます。回る音も動きに合わせて付きます。

中身（SKILL.md の全文）

---
name: count-up
description: 数字が昔のメーターのような回るドラムで1から増えていき、右の桁から順にカチッと止まって、後ろに巨大な輪郭の数字が一瞬広がる6秒の縦動画を、HyperFrames のコードだけで作る。会員数・来店数・実績・値段・待ち時間など、数字で見せたい時に使う。「会員数1,280人をドラムのカウントアップで見せて」「数字のカウントアップで実績を出したい」で使う。
---

# 数字のカウントアップ（count-up）

## 1. 何ができるか
- 数字が、昔のメーターのような円柱のドラム（桁ごとに1つ）で、1から回って増えていく。だんだん遅くなり、右の桁から順に「カチッ」と止まる
- 最後の桁が止まった瞬間に1回だけ叩く強調（はね＋画面のゆれ）。後ろに同じ数字の巨大な輪郭が広がって消え、下のラベルに差し色の線が伸びる。下の「誰の何の数か」のラベルは数え始めてすぐ出るので、何の数かを最初から分かって見られる。最後はメーターとラベルだけで止まる
- 写真も生成AIも使わない。HyperFrames（HTMLを動画にする道具）のコードだけ。縦 1080×1920・30fps・6秒・音つき

## 2. 先に聞くこと（3つまで）
1. 数と単位（例：1,280人／980円／15分）。4桁までがいちばんきれい
2. 誰の何の数か（下のラベル。例：見本ジムの会員さん）と、上の小さいラベル（例：会員数）
3. 色（地の暗い色と差し色1つ）。聞かれなければ、紺 #0d1424 とオレンジ #ff6a2b

聞かずに決めてよい物（作ったあと一覧で出す）：書体（日本語は Noto Sans JP の900、数字は Anton）・秒割り・ドラムの大きさ・止まる順と時刻・音。

決まり
- 数は本当の数か、見本と分かる自然な数。盛った数（売上10倍など）は出さない
- お店や人の名前を例に使う時は架空の名前（「見本ジム」のように「見本」を付ける）。実在の店・人・ロゴは出さない
- 画面の字に句読点（、と。）を付けない

## 3. 作り方
1. ひな形：`npx hyperframes init demo --example blank --resolution portrait --non-interactive`
2. `demo/index.html` を1ファイルで書く（下の要点）
3. 音：下の「音の作り方」で `assets/sound.wav` を作り、`<audio id="snd" class="clip" src="assets/sound.wav" data-start="0" data-duration="6">` で置く
4. 点検：`npx hyperframes check --json` のエラーを直す
5. 静止画：`npx hyperframes snapshot --at 0.3,1.5,3,4.5,5.8` を自分の目で見る（字の重なり・はみ出し・空っぽの画面・読めない字・最初のコマに「1」が出ているか）
6. 書き出し：`npx hyperframes render -o ../実演_数字のカウントアップ.mp4`

### index.html の作りの要点
**場面**：1場面だけ。`<div id="scene" class="clip" data-start="0" data-duration="6">` の中に全部を入れる。.clip そのものには transform をかけず、中の `#stage`（ゆらす用）などを動かす。

**ドラム（3D の円柱）**
- 桁ごとに窓（幅165・高さ300・角丸・`overflow:hidden`・`perspective:1000px`）を作り、中に `transform-style:preserve-3d` のドラムを置く。カンマは千の位の右に置く
- ドラムには0〜9の10面。面の高さ H=210、半径 R = (H/2) ÷ tan(18°) ≈ 323px。i 番の面は `rotateX(-i×36deg) translateZ(R)`、`backface-visibility:hidden`
- ドラムの位置 P（何目回ったか）を `rotateX(P×36deg)` で回す。次の数字が下から上がってくる
- 面ごとに黒い膜を重ね、正面から離れた面ほど暗くする：膜の濃さ = min(0.94, (1 − cos((P − i)×36°)) × 2.6)
- 窓の上下に暗いグラデーション（円柱の丸み）、真ん中より少し上に細い光の帯（ガラスのつや）
- **ふちの光（リムライト）**：窓の内側の上下のふちに、止まる前は青白い細い光、止まった桁はオレンジの光（内側の box-shadow）。止まった瞬間に明るく光り、少し落ち着いて灯り続ける
- 速く回っている間だけ、縦だけのぼかし（SVG の feGaussianBlur stdDeviation="0 y"。y = min(16, 1秒に回る目の数 × 0.12)）

**数の進み方（乱数なし・決まった式。時刻 t から毎コマ計算する）**
- 回り始め T0=0.3、数え終わり T1=3.8、A=0.011
- E(x) = A·x + (1−A)·(1 − (1−x)³)（x は0〜1に収める。最初は速く、だんだん遅く、最後に少しだけ勢いを残す）
- V(t) = 1 + (目標の数 − 1) × E((t − T0) ÷ (T1 − T0))　→ 0秒から「1」が見えていて、3.8秒で目標の数ちょうど
- 1目ずつ「クッ」と回す：snap(f) = smoothstep((f − 0.55) ÷ 0.45)
- k 桁目（1の位が k=0）の位置：P = floor(floor(V) ÷ 10^k) ＋（floor(V) を 10^k で割った余りが 10^k − 1 の時だけ snap(V の小数)）。これで本物のメーターと同じく、下の桁が9→0になる時だけ上の桁が1つ回る
- 頭の0は出さない：k≥1 のドラムの「0」の面は、V が 5×10^k 以上になってから字を入れる（その時その面は裏側にあるので、入れ替わりは見えない）。カンマは千の位が1へ回るのに合わせて出す
- **右から順に止まる**：止まる時刻 LOCK[k] = 3.85 + k × 0.6 ÷ (桁数 − 1)（4桁なら 3.85・4.05・4.25・4.45）。止まった後 τ 秒は P に 0.3·e^(−τ/0.05)·sin(2πτ/0.13) を足す（少し行き過ぎて戻る「カチッ」）
- 全部を1本の GSAP timeline で動かす：`tl.fromTo(clock,{t:0},{t:6,duration:6,ease:"none",onUpdate:()=>render(clock.t)},0)`。最後に `window.__timelines["main"]=tl`

**最後の桁で叩く（1回だけ）**：最後の LOCK の時刻に、メーター全体を scale 1.1→1（0.2秒）、`#stage` を 0.14秒だけ小さくゆらす。強い出方はここだけ。

**巨大な輪郭の数字**：Anton 470px の「1,280」を、塗りなし・オレンジの線（-webkit-text-stroke 6px）でメーターの後ろに。最後の桁の0.03秒後から scale 0.45→1.04（0.72秒・expo.out）。濃さは 0→1（0.12秒）→そのまま0.25秒→0（0.35秒）で、5.2秒までに消す。白い細い線のもう1枚を scale 0.7→1.45 で同じ5.2秒までに消していく（波）。初めは opacity 0 にしておく。輪郭はメーターより大きいので、残すと左右にはみ出した「1」や「0」が「11,2800」のように読めてしまう。だから最後の約0.8秒は、上のラベル・数字と単位・下のラベルだけにする。

**ラベル**：上に小さいラベル（60px・前に差し色の点）を最初から出す。下のラベル（68px）は数え始めてすぐの 1.0秒に下からせり上がり（0.36秒・back.out）、最後まで出したまま。差し色の下線だけは最後の桁が止まる 4.45秒に左から伸ばして（0.4秒）、数が決まった所を強調する。下のラベルを最後に出すと、何の数か分かるのが最後の1秒になり、下がずっと空いて待たせてしまう。

**字と置き場の決まり**
- 地は暗い1色（中央が少し明るい楕円のグラデーション）＋差し色1つ。メーターの後ろに差し色の逆光（ぼんやりした楕円の光）
- 字は白、大事な所だけ差し色。いちばん小さい字でも44px以上
- 字は y=230〜1470px の中。いちばん上の y=230〜400 は空けておく（紹介リールで上に名前が乗るため）
- y=940〜1730 の高さでは、字を x=850 より右に置かない（右のボタンに隠れる）。メーター（窓4つ＋単位）は y=590〜930 に置いて全幅を使い、下のラベルは真ん中ぞろえで幅612px以内
- 窓の下に `-webkit-box-reflect` で薄い映り込みを付けると、下が寂しくならない

### 音の作り方
- 回転に合わせた「カチ」：V(t) が「整数＋0.85」を越えるたび（1目回り終わるたび）にカチ。ただし前のカチから0.055秒以上空ける。速い間は小さく（−17dB）、遅くなるほど大きく（−11dB）
- 止まる桁ごとに大きめのカチ＋ポン、最後の桁でドン（はんこのような低い音）、輪郭が広がる時にシュッ、下線が伸びている所でキラン（4.66秒）
- 手持ちの効果音が無ければ、下の Python（標準の道具だけ）で作れる。式は index.html と同じにする

```python
# make_sound.py  使い方: python3 make_sound.py  → assets/sound.wav
import math, random, struct, wave
SR, LEN = 44100, 6.0
TARGET, T0, T1, A = 1280, 0.3, 3.8, 0.011
N = len(str(TARGET)); LOCK = [3.85 + k*0.6/max(1, N-1) for k in range(N)]
random.seed(7)
def E(x): x = min(1, max(0, x)); return A*x + (1-A)*(1-(1-x)**3)
def V(t): return 1 + (TARGET-1)*E((t-T0)/(T1-T0))
def tick(): return [random.uniform(-1,1)*math.exp(-i/(SR*.004)) + .6*math.sin(2*math.pi*2400*i/SR)*math.exp(-i/(SR*.008)) for i in range(int(.05*SR))]
def thud():
    out, ph = [], 0.0
    for i in range(int(.6*SR)):
        t = i/SR; ph += 2*math.pi*(55+90*math.exp(-t/.04))/SR; out.append(math.sin(ph)*math.exp(-t/.22))
    return out
def pop():
    out, ph = [], 0.0
    for i in range(int(.18*SR)):
        t = i/SR; ph += 2*math.pi*(300+900*math.exp(-t/.05))/SR; out.append(math.sin(ph)*math.exp(-t/.05))
    return out
def whoosh():
    out, acc, n = [], 0.0, int(.6*SR)
    for i in range(n):
        acc += .15*(random.uniform(-1,1)-acc); out.append(acc*2.5*math.sin(math.pi*i/n)**2)
    return out
def chime(): return [sum(a*math.sin(2*math.pi*f*i/SR) for f, a in ((1568,1),(2093,.6),(3136,.3)))*math.exp(-i/(SR*.45))/1.9 for i in range(int(1.2*SR))]
SND = {k: f() for k, f in dict(tick=tick, thud=thud, pop=pop, whoosh=whoosh, chime=chime).items()}
mix = [0.0]*int(LEN*SR)
def put(name, t, db):
    g = 10**(db/20); i0 = int(t*SR); s = SND[name]; m = max(abs(x) for x in s)
    for j, x in enumerate(s):
        if i0+j < len(mix): mix[i0+j] += x/m*g
t, last, prev = T0, -1.0, V(T0)
while t < T1 + 0.02:
    t += 1/600; v = V(t)
    if math.floor(v-.85) > math.floor(prev-.85) and t-last >= .055:
        sp = (V(t+.01)-V(t-.01))/.02; put("tick", t, -17 if sp > 30 else (-14 if sp > 10 else -11)); last = t
    prev = v
for tt in LOCK[:-1]: put("tick", tt, -3); put("pop", tt, -16)
put("thud", LOCK[-1], -2); put("tick", LOCK[-1], -6); put("whoosh", LOCK[-1]+.02, -13); put("chime", 4.66, -13)
peak = max(1.0, max(abs(x) for x in mix)/0.89)
with wave.open("assets/sound.wav", "wb") as w:
    w.setnchannels(1); w.setsampwidth(2); w.setframerate(SR)
    w.writeframes(b"".join(struct.pack("<h", int(x/peak*32767)) for x in mix))
print("ok")
```

## 4. 秒割りの表（実演と同じ）
| 秒 | 見えている物 | 音 |
|---|---|---|
| 0〜0.3 | 上のラベル「会員数」・ドラム4つ（1の位に「1」、上の桁は空）・単位「人」がもう見えている | なし |
| 0.3〜3.8 | ドラムが回って数が増える。最初は速くぶれて、だんだん遅く。1,000を越えると千の位とカンマが出る | 回転に合わせたカチカチ（だんだん間が空く） |
| 1.0〜1.36 | 下のラベル「見本ジムの会員さん」が下からせり上がり、最後まで出たまま | （カチカチの続き） |
| 3.8 | ちょうど 1,280 になる | 最後のカチ |
| 3.85・4.05・4.25 | 1の位→10の位→100の位の順に、カチッと止まり、ふちがオレンジに灯る | 大きめのカチ＋ポン |
| 4.45 | 千の位が止まる。メーターがはねて画面がゆれる（強調はここだけ）。下のラベルの下線が左から伸びる（4.85秒まで） | ドン |
| 4.48〜5.2 | 後ろに巨大な輪郭の「1,280」が広がり、5.2秒までに消える（4.66秒は下線が伸びている所） | シュッ・キラン |
| 5.2〜6.0 | 「会員数／1,280人／見本ジムの会員さん」だけで止めて見せる | 余韻 |

## 5. 変えていい所・変えない所
変えていい所
- 数・単位・2つのラベルの言葉、地の色と差し色
- 桁数（1の位から順に止まる時刻は LOCK の式で自動で 3.85〜4.45 に収まる）。5桁以上は窓の幅を130pxに縮めて、横はみ出しを確かめる
- 単位を前に置く（「¥980」など）：単位の要素をメーターの左に移すだけ
- 数え始め：「1から」が基本。前の数から増やす見せ方（例：1,100→1,280）にしたい時は V の始まりの数を変え、頭の0の決まりもその数に合わせる

変えない所
- 0秒の1コマ目に、もう数字とラベルが見えている
- 数はだんだん遅くなり、右の桁から順に止まる。強い出方は最後の桁の1回だけ
- 乱数・時計・タイマー・repeat:-1 を使わない。動きはすべて時刻 t の式から（何度書き出しても同じになる）
- 上の y=230〜400 は空ける。字は句読点なし・44px以上

## 6. よくある失敗と直し方
- **最初のコマで巨大な輪郭が薄く見えている** → GSAP の fromTo は作った時点で「始めの形」を描く。輪郭は CSS で opacity:0 にし、後から出る tween には `immediateRender:false` を付ける
- **check で text_occluded（字が隠れている）が大量に出る** → ドラムの裏の面に暗い膜を重ねているため。ドラムの数字の要素に `data-layout-ignore` を付け、静止画で見て確かめる。輪郭だけの数字（塗りなし）も同じ
- **数が増えずに、上の桁が勝手にぐるぐる回る** → 上の桁を独立に回している。下の桁が9→0になる時だけ上の桁を1つ回す式（3章）にする
- **頭に0が並ぶ（0,001 など）** → 上の桁の「0」の面は、その桁まで数が来るまで空にする
- **止まり方がフワッとして「カチッ」と聞こえない** → E(x) の A を0にすると最後の速さが0になって止まりがぼやける。A=0.01 前後で少し勢いを残し、止まった後に小さく行き過ぎて戻す
- **3D がつぶれて平らになる** → `preserve-3d` の要素や、その親に opacity・filter をかけると平らになる。ぼかしは窓（perspective を持つ方）にかけ、ドラム本体にはかけない
- **最後の絵がにぎやかで、数字が「11,2800」のように読める** → 巨大な輪郭が最後まで残っている。輪郭は広がったあと5.2秒までに消し、最後はメーターとラベルだけにする
- **何の数か分かるのが遅く、下が空いて待たせてしまう** → 下のラベルを最後に出している。数え始めてすぐ（1.0秒ごろ）に出して最後まで残し、最後の桁で下線だけを伸ばして強調する
- **カチの音が多すぎてザーッと鳴る** → カチとカチの間を0.055秒以上空ける
- **右のボタンに単位が隠れる** → メーターは y=940 より上に置く。下のラベルは幅612px以内で真ん中ぞろえ

## 7. そのまま貼れるプロンプト
（〔 〕を自分の言葉に変えて、Claude Code に貼る）

HyperFrames で、縦 1080×1920・30fps・6秒ちょうど・音つきの動画を、写真や画像を使わずコードだけで作ってください。ひな形は `npx hyperframes init demo --example blank --resolution portrait --non-interactive`。index.html 1ファイルで作ります。

中身
- 数：〔1280〕、単位：〔人〕（カンマ区切りで「1,280人」と見せる）
- 上の小さいラベル：〔会員数〕、下のラベル（誰の何の数か）：〔見本ジムの会員さん〕
- 色：地は暗い紺〔#0d1424〕（中央が少し明るい楕円のグラデーション）、差し色はオレンジ〔#ff6a2b〕1つ。字は白
- 書体：日本語は Noto Sans JP の900、数字は Anton（Google Fonts）

見た目
- 数字は、昔のメーターのような円柱のドラムで桁ごとに回す。桁ごとに窓（幅165・高さ300・角丸・overflow:hidden・perspective:1000px）を並べ、中に transform-style:preserve-3d のドラム。ドラムは0〜9の10面で、面の高さ210、i番の面は rotateX(-i×36deg) translateZ(323px)。ドラムの位置 P を rotateX(P×36deg) で回す（次の数字が下から上がる）
- 面ごとに黒い膜を重ね、濃さ = min(0.94, (1−cos((P−i)×36°))×2.6) で正面以外を暗く。窓の上下に暗いグラデーション（丸み）、少し上に細いつやの帯
- 窓の内側の上下のふちに光（リムライト）：止まる前は青白く細く、止まった桁はオレンジに光ってから少し落ち着いて灯り続ける
- 速く回る間だけ縦のぼかし（SVG feGaussianBlur stdDeviation="0 y"、y=min(16, 1秒に回る目の数×0.12)）を窓にかける
- メーターの後ろに差し色のぼんやりした逆光。窓の下に -webkit-box-reflect で薄い映り込み
- 単位はメーターの右、上のラベルはメーターの上（前に差し色の小さい点）

動き（乱数・時計・タイマー・repeat:-1 は使わず、時刻 t の式で毎コマ計算。GSAP の1本の timeline で、clock を0→6秒まで動かし onUpdate で描く。最後に window.__timelines["main"]=tl）
- E(x) = 0.011x + 0.989(1−(1−x)³)、V(t) = 1 + (数−1)×E((t−0.3)÷3.5)。0秒からもう「1」が見えていて、0.3秒から回り始め、だんだん遅くなって3.8秒でちょうど目標の数
- 1目ずつクッと回す：snap(f)=smoothstep((f−0.55)÷0.45)。k桁目の位置 P = floor(floor(V)÷10^k) ＋（floor(V) を10^kで割った余りが 10^k−1 の時だけ snap(Vの小数)）
- 頭の0は出さない：上の桁の「0」の面は V が 5×10^k 以上になってから字を入れる。カンマは千の位が1へ回るのに合わせて出す
- 右の桁から順に止まる：LOCK[k] = 3.85 + k×0.6÷(桁数−1)（4桁なら3.85・4.05・4.25・4.45）。止まった後τ秒は P に 0.3·e^(−τ/0.05)·sin(2πτ/0.13) を足して「カチッ」
- 最後の桁が止まる時だけ叩く：メーター全体 scale 1.1→1（0.2秒）、画面を0.14秒小さくゆらす
- その0.03秒後から、メーターの後ろに同じ数字の巨大な輪郭（Anton 470px、塗りなし、差し色の線6px）が scale 0.45→1.04（0.72秒・expo.out）で広がり、0.37秒見せてから0.35秒で消して、5.2秒までに見えなくする。白い細い線の1枚も scale 0.7→1.45 で5.2秒までに消していく。輪郭は最初 opacity:0、後から出る tween は immediateRender:false
- 下のラベルは数え始めてすぐの1.0秒に下からせり上がり、最後まで出したまま。差し色の下線は最後の桁が止まる4.45秒に左から伸ばして強調する。5.2〜6秒は、上のラベル・数字と単位・下のラベルだけで止めて見せる

音（assets/sound.wav を作って <audio id="snd" class="clip" data-start="0" data-duration="6"> で置く。式は動きと同じ）
- V(t) が「整数＋0.85」を越えるたびにカチ（前のカチから0.055秒以上空ける。速い間は小さく、遅いほど大きく）
- 止まる桁ごとに大きめのカチ＋ポン、最後の桁でドン、輪郭でシュッ、下線が伸びている所でキラン
- 手持ちの音が無ければ Python の標準の道具（wave・math・種を決めた random）で短い音をコードで作る

決まり
- 字は y=230〜1470px の中。上の y=230〜400 は空ける。y=940〜1730 の高さでは字を x=850 より右に置かない（メーターは y=590〜930、下のラベルは68pxで幅612px以内の真ん中ぞろえ）
- いちばん小さい字でも44px以上。画面の字に句読点を付けない
- 強い出方は最後の桁の1回だけ。お店や人の名前は架空、数は盛らない
- .clip そのものに transform をかけない。ドラムの数字と輪郭の数字には data-layout-ignore を付ける

作ったら `npx hyperframes check --json` のエラーを直し、`npx hyperframes snapshot --at 0.3,1.5,3,4.5,5.8` を自分の目で見て、字の重なり・はみ出し・空っぽの画面を直してから、`npx hyperframes render` で書き出してください。

質問せずに作り、最後に決めたことの一覧を出してください。