口コミが降ってくる（review-drop）

星と短い一言の口コミが上から1つずつ落ちてきて、弾んで積み重なり、最後に山の上へ「★4.8」のような評価が出る6秒の縦動画を作れます。写真も画像AIも使わず、字だけで作ります。

中身（SKILL.md の全文）

---
name: review-drop
description: 星と短い一言の入った口コミの吹き出しが上から次々に落ちてきて、床で弾んで積み重なり、最後に山の上に「★4.8」のような評価の数字が出る6秒の縦動画を、HyperFrames のコードだけで作る。飲食店・美容室・教室など、お客さんの声を見せたい時に使う。「口コミが降ってくる動画を作って」「お客さんの声が積み上がる動画にして」で使う。
---

# 口コミが降ってくる（review-drop）

## 1. 何ができるか
- 白い角丸の吹き出し（星5つ＋短い一言）が、拍に合わせて上から1つずつ落ちてきて、床やカードの上で弾み、少し傾いて積み重なる
- 最後の1つが落ちた時だけ、山ぜんたいが揺れて画面も小さく揺れる（強調はここ1回）
- 積み上がった山の上に、大きな「★4.8」と「〇〇の口コミ」が出て止まる
- 写真も画像AIも使わない。コードだけ（1080×1920・30fps・6秒・音つき）

## 2. 先に聞くこと（3つまで）
1. 口コミの言葉 6〜8個と、お店の名前（本物の口コミか、見本か）
2. 最後に出す評価の数字（例：4.8）
3. 差し色（星の色。決まっていなければ金色 #ffb020）

聞かずに決めてよい物（決めて最後に一覧で出す）：地の色（紺 #0d1424）、カードの色（白）、カードの字の色（濃い紺 #1b2340）、BPM（120）、星が4つのカードを1枚まぜるか、落ちる時のわずかな回転。

**本物の口コミを使う時は、文を変えずにそのまま入れ（絵文字も原文どおり）、画面のすみに「※Googleの口コミ（店名）より」のように、どこの口コミか出典を添える。** 見本の時は、画面のすみに小さく「見本の口コミです」と必ず出す（本物の口コミに見せない）。

## 3. 作り方（HyperFrames）
1. ひな形：`HYPERFRAMES_SKIP_SKILLS=1 npx hyperframes init demo --example blank --resolution portrait --non-interactive`
2. index.html の作り
   - 全体は1つの `class="clip"`（data-start=0・data-duration=6）。その中に揺れ用の箱 → 山の箱 → カードを入れる。.clip そのものには transform をかけない
   - カード：白・角丸26px・高さ92px・左下に小さなしっぽ（45度に回した四角）・影。中は星5つ（SVG、差し色。星4つのカードは5つ目を薄い灰色）＋一言（Noto Sans JP 900・46px）。字は1枚8字くらいまで（右の x=850 を越えないため）
   - **動きは物理の式で計算する（乱数なし）**。GSAP の timeline に 0〜6秒の「時計」を1本置き、onUpdate で毎コマ「その時刻の位置」を式から出して gsap.set する。最後に `window.__timelines["main"]=tl`
     - 決める数：重力 G=6000px/秒²、はね返り E=0.28、床 y=1410、1段 H=94px、山のまん中 x=457、当たる時刻 T＝0.5・1.0・1.5・2.0・2.5・3.0（BPM120の拍の上）と最後の3.5
     - 止まる高さ：Y[i] = 床 − 46 − i×H
     - 落ちている間（t < T）：y = Y − ½·G·(T−t)²。横にはずらさず、上からまっすぐ落とす（斜めに入ると何をしているか分かりにくい）。傾きは 止まる角度 + 5°/秒くらい×(T−t) と、わずかに回すだけ。画面の外で待つ間は隠す
     - 当たったあと：はね返りの速さ v = E×√(2G(Y−落ち始め))、1回ごとに E 倍。山なり（v·s − ½G·s²）を3〜4回くり返して止まる
     - 当たった瞬間につぶれる：縦 1−0.16·e^(−18τ)、横 1+0.10·e^(−18τ)（下のふちを軸）
     - 傾きのゆれ：止まる角度 + 5°·e^(−5τ)·sin(14τ)
     - 上に乗った時、下のカードが少し沈む：5px·(τ/0.05)·e^(1−τ/0.05)
     - 最後の1つ（3.5秒）：山を床のまん中を軸に 2.4°·e^(−3.2τ)·sin(12τ) 揺らし、画面を 16px·e^(−12τ) 揺らす。山の後ろの光も一瞬強くする
   - 3.8秒：「★4.8」（星はSVG・数字は Anton 230px）が小さい所から back.out で出て、数字は 4.0→4.8 に数え上がる。3.92秒に「〇〇の口コミ」。そのまま6秒まで止める（どちらも2秒以上見せる）
   - 床の線と「見本の口コミです」は、山のまん中（x=457）にそろえる。注記は白・46px で床のすぐ下
   - 安全地帯：字は y=230〜1470 の中。上の y=230〜400 は空ける（名前ピル用）。右 x=850 より右に字を置かない。いちばん小さい字も44px以上。画面の字に句読点を付けない
3. 音：音.json に BGM（bpm 120）と、当たる時刻ごとに「pop」、小さな弾みに「tick」、最後の3.5秒に「stamp＋hit」、3.8秒に「chime」。wav にして `<audio class="clip" 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` を自分の目で見る（カードと字の重なり・右のはみ出し・数字と山の間・注記がしっぽに当たっていないか）
6. 書き出し：`npx hyperframes render -o ../★最新_実演_口コミが降ってくる_v1.mp4`

## 4. 秒割り
| 秒 | 画面 |
|---|---|
| 0〜0.3 | 1つ目の吹き出しが、もう落ちている途中で見えている |
| 0.3〜3.3 | 0.5秒ごと（BPM120の拍の上）に吹き出しが上からまっすぐ落ちて弾み、6つ積み重なる |
| 3.3〜3.8 | 3.5秒に最後の1つが落ちて、山が揺れ、画面が小さく揺れる（強調はここだけ） |
| 3.8〜6 | 山の上に「★4.8」と「〇〇の口コミ」が出て止まる（2秒以上見せる） |

## 5. 変えていい所・変えない所
- 変えていい：口コミの言葉・数・星の数、お店の名前、評価の数字、差し色、地の色、BPM（変えたら当たる時刻も拍に合わせる）、カードの傾きと横ずれ
- 変えない：乱数を使わず式で計算すること、上からまっすぐ落とすこと、強調は最後の1回だけ、最後の数字と店名を2秒以上止めること、「見本の口コミです」か出典の表示、安全地帯
- 口コミを8個にする時は、1段の高さ H を少し下げるか、数字を小さくして、山と数字が重ならないようにする

## 6. よくある失敗と直し方
- 山が高すぎて「★4.8」とぶつかる → カードの数を7つまでにするか、H と字を少し小さくする
- 一番下のカードが床にめり込んで見える → 一番下のカードの傾きを小さく（±1度くらい）
- 注記がカードのしっぽに当たる → しっぽは左はしなので、注記は山のまん中にそろえて床のすぐ下に置く
- 注記や床の線が山とずれていて何の字か分からない → 山のまん中（x=457）にそろえ、白・44px以上にする
- 吹き出しが斜めに入ってきて、何をしているのか分からない → 横ずれを0にして、上からまっすぐ落とす
- 最後の数字がすぐ終わる → 積み終わりを早め（最後の1つは3.5秒）、数字は3.8秒から出して2秒以上見せる
- 弾みが大きすぎて安っぽい → E を 0.2〜0.25 に下げる
- 待っているカードが画面の上に溜まって見える → 落ち始めより上にいる間は visibility を hidden にする
- 本物の口コミを短く言いかえてしまう → 文はそのまま。長い時は全文が入るカードの数を減らす

## 7. そのまま貼れるプロンプト
```
HyperFrames で、縦型 1080×1920・30fps・6秒ちょうど・音つきの動画を、写真や画像を使わずコードだけで作ってください。

中身
- 白い角丸の口コミの吹き出し（星5つ＋短い一言）が、上から次々に落ちてきて、床で弾んで少し傾きながら積み重なる。最後に積み上がった山の上に大きな「★〔4.8〕」と「〔見本ベーカリー〕の口コミ」が出て止まる
- 口コミ（句読点なし・1つ8字くらいまで）：〔香りで足が止まる〕〔パンがふわふわ〕〔クロワッサン最高〕〔店員さんが優しい〕〔朝一番に来たい（星4つ）〕〔毎週かよってます〕〔また買いに来ます〕
- 見本の口コミなので、床のすぐ下に山のまん中にそろえて「見本の口コミです」と白46pxで出す。本物の口コミを使う時は文を変えずにそのまま入れ、「※〇〇の口コミ（店名）より」と出典を出す

見た目
- 地は暗い紺（#0d1424）、まん中がほんのり明るいグラデーション。山の後ろから金色の光（逆光）
- 吹き出しは白・角丸26px・高さ92px・左下に小さなしっぽ・影。字は Noto Sans JP 900 の46px、色は濃い紺（#1b2340）。星だけ差し色の金色（#ffb020）、星4つの5つ目は薄い灰色
- 「★4.8」の星はSVGで金色、数字は Anton 230px で白。その下に「〔見本ベーカリー〕の口コミ」を白50px
- 床は金色の細い線（y=1410）。山のまん中（x=457）にそろえる

動き（乱数・Date・タイマー・repeat:-1 は使わない。決まった式で計算）
- GSAP の timeline に0〜6秒の時計を1本置き、onUpdate で毎コマその時刻の位置を式から出して gsap.set する。最後に window.__timelines["main"]=tl
- 重力 6000px/秒²、はね返り 0.28、山のまん中 x=457、1段 94px。当たる時刻は 0.5・1.0・1.5・2.0・2.5・3.0秒（BPM120の拍）と、最後の1つだけ3.5秒
- 落ちている間：y = 止まる高さ − ½×重力×(当たる時刻−今)²。横にはずらさず、上からまっすぐ落とす（回転はほんの少しだけ）。画面の外で待つ間は隠す
- 当たったら：はね返りの速さを毎回0.28倍にして3〜4回弾んで止まる。当たった瞬間に縦につぶれて戻る。傾きが減りながらゆれて、決めた角度（±1〜3度）で止まる。上に乗った時、下のカードが少し沈む
- 3.5秒：最後の1つが落ちたら、山ぜんたいを床のまん中を軸に左右に揺らし（2.4度から減る）、画面も小さく揺らす。強い出方はここ1回だけ
- 3.8秒：「★4.8」が小さい所から跳ねて出て、数字は4.0から4.8へ数え上がる。3.92秒に店名の行。6秒まで止める（どちらも2秒以上見せる）
- 0秒の1コマ目に、1つ目の吹き出しがもう落ちている途中で見えていること

音
- BGM（BPM120）。吹き出しが当たるたびにポン、小さな弾みにカチッ、3.5秒にドン、3.8秒にキラン

決まり
- 字は y=230〜1470 の中。上の y=230〜400 は空けておく。右の x=850 より右に字を置かない。いちばん小さい字も44px以上。画面の字に句読点を付けない
- お店の名前は架空（「見本」を付ける）。実在の店・人・ロゴは出さない。数字は盛らない
- 作ったら npx hyperframes check --json でエラーを直し、npx hyperframes snapshot --at 0.3,1.5,3,4.5,5.8 の静止画を自分で見て、重なり・はみ出しを直してから render する

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