予約ボタンが変身（morph-booking-button）

「予約する」ボタン1つが、くるくる回る印 → チェック → 日にちと時間を選ぶカード → 「予約できました」の知らせへと形を変えていき、最初のボタンに戻る6秒の縦動画を作れます。すりガラスのように透ける見た目です。

中身（SKILL.md の全文）

---
name: morph-booking-button
description: 1つのガラスのボタンが、切らずに同じ形のまま「予約する」→ 回るローダー → チェック → 日付と時間を選ぶカード → 「予約できました」の通知へと姿を変え、最初のボタンに戻る6秒の縦動画を、HyperFrames のコードだけで作る。美容室・整体・ホテル・教室などのネット予約やLINE予約の流れを見せたい時に使う。「予約ボタンが変身する動画を作って」「うちの予約の流れを6秒で見せて」で使う。
---

# 予約ボタンが変身（morph-booking-button）

## 1. 何ができるか
- 画面のまん中の「予約する」ボタン1つが、カーソルに押されると、切らずに大きさ・角の丸み・色合いだけを変えて、ローダー → チェック → 日付と時間のカード → 「予約できました」の通知、と姿を変え続けます
- 面は半透明のガラスの板で、ふちが光り、姿を変えるたびに面の上を斜めに光が走ります
- 最後に最初のボタンへ戻るので、くり返し再生（ループ）しても切れ目が分かりません。写真も画像AIも使わず、コードだけで6秒・縦1080×1920・音ありの MP4 ができます

## 2. 先に聞くこと（3つまで）
1. お店の名前（例：見本サロン）
2. 予約する日と時間（例：10月28日（水）14:00）
3. 差し色1つ（例：ミント #42e8c8。ほかに オレンジ・朱・青など）

聞かずに決めてよい物（最後に一覧で出す）：ボタンの言葉「予約する」、通知の言葉「予約できました」、カードに出す5日分の日付と曜日・空いていない日、時間の枠4つ（2つは満席）、地の紺、音。
曜日は、その年の本当の暦で決める（例：2026年10月28日は水曜）。

## 3. 作り方（HyperFrames）
1. ひな形を作る：`HYPERFRAMES_SKIP_SKILLS=1 npx hyperframes init demo --example blank --resolution portrait --non-interactive`
2. `demo/index.html` を書く（1ファイル）
   - 場面は1つだけ（`#scene` に `class="clip"`・data-start=0・data-duration=6）。中の `#stage` を動かす。`.clip` そのものに transform をかけない
   - 変身する形は `#shape` 1つ。`left:540px; top:900px` に置き、`gsap.set("#shape",{xPercent:-50,yPercent:-50})` で中心合わせ。変えるのは width・height・borderRadius・x・y だけ
   - ガラスの面：白の半透明のグラデーション（上が明るい 0.20 → 0.06）＋ ふち 3px の白 0.40 ＋ 内側の上ふちに白い線（inset の影）＋ `backdrop-filter: blur(22px)`。地に細い方眼を引いておくと、ガラスの向こうでぼけて「ガラスらしさ」が出る
   - 色合いは `#shape` の中の `#tint`（差し色のベタ）の opacity で変える：ボタン 0.2／チェック 1／カード 0／通知 0.12。`#tint` は CSS で opacity:0 にして、`gsap.set("#tint",{opacity:.2})` をタイムラインの外で書く（点検で白い画面と間違えられないため）
   - 走る光：`#shape` の中の `#sheen`（inset:0・斜め110度の白い帯のグラデーション）を xPercent -110 → 110 へ0.6秒で動かす。同時に、ふちの色を白 0.40 → 0.95 → 0.40 と一瞬明るくする。`#sheen` には `data-layout-allow-overflow` を付ける
   - カーソルは 132×165 と大きめにする（0秒から場所が分かるように）。矢印の先（左上 11,8）を画面の点に合わせる関数で動かす。押す時は scale 0.86 に一瞬縮め、差し色の輪（波紋）を広げる。押す点は字の右下にして、字を隠さない
   - カードと通知の中身は、形の上に重ねた別の層。形が広がり切ってから出し、縮む前に消す
   - カードの字は大きく：曜日と「時間を選ぶ」は 56px、日付の数字と時間は Anton 84px。カードは 780×870（x=80〜860・y=460〜1330）
   - 埋まっている枠は、うすく（0.5）＋点線のふち＋時刻に斜めの線＋右に「満」（48px）。選べないことが一目で分かるようにする
   - 通知の「予約できました」は、1字ずつ大きく重ねて出さない。形が落ち着き、走る光が通り過ぎてから、1かたまりで 1.25倍 → 等倍（0.12秒）で叩き、影は紺のずらした影（差し色の影は字が二重に見える）
   - 動きはすべて GSAP の1本の timeline。乱数・Date・タイマー・repeat:-1 は使わない。最後に `window.__timelines["main"]=tl`
   - 字：日本語は Noto Sans JP 900、数字と英字は Anton。字は白、大事な所だけ差し色。いちばん小さい字でも44px（カードの日付と時間は56px以上）。字に句読点（、と。）を付けない
   - 安全地帯：字は y=230〜1470 の中。y=230〜400 は紹介の名前が乗るので空ける。y=940 より下では x=850 より右に字を置かない（カードは x=80〜860 に寄せる）
3. 音：`音.json` に出来事の時刻を書き、Python で合成して `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`（字の重なり・はみ出し・カーソルが字を隠していないか・0.3秒と5.8秒が同じ絵か）
6. 書き出し：`npx hyperframes render -o ../実演_予約ボタンが変身.mp4`

## 4. 秒割りの表（実演と同じ）
| 秒 | 画面 | 形（中心・大きさ・角） | 音 |
|---|---|---|---|
| 0〜0.3 | 「予約する」ボタンと店名がもう見えている。カーソルは右下 | 中心(540,900)・640×170・角85・ミント0.2 | |
| 0.3〜0.87 | カーソルがボタンへ。少しふくらみ、押すと波紋 | 664×178 → 620×164 | シュッ・カチッ・ポン |
| 0.87〜1.14 | 字が消え、丸に縮む。光が走る。ローダーが1回転 | 170×170・角85 | シュッ・カチッ2回 |
| 1.14〜1.6 | 丸が差し色に満ち、チェックの線が描かれる | ミント1.0・一瞬1.12倍 | キラン |
| 1.6〜2.3 | 同じ形がカードに広がる。光が走る。1.9秒から見出し→日付→時間の枠が順に出る | 中心(470,895)・780×870・角52・ミント0 | シュッ・ポン3回 |
| 2.3〜2.85 | カーソルが28日を押す（差し色の丸） | | カチッ・ポン |
| 2.94〜3.45 | カーソルが14:00を押す（枠が差し色で塗られる） | | カチッ・ポン |
| 3.45〜3.84 | 選んだ日と時間を見せたまま止める（カードの中身は約1.9秒） | | |
| 3.84〜4.32 | カードが通知に縮む。光が走り終えてから、チェックの丸と「予約できました」を1かたまりで叩く（紺のずらした影）＋画面が小さく揺れる（強調はここ1回）。下に日時 | 中心(540,800)・860×300・角60・ミント0.12 | シュッ・ドン・キラン |
| 4.32〜5.1 | 通知を止めて読ませる | | |
| 5.1〜5.55 | 縮んで最初のボタンに戻る。光が走る。字が戻る | 0秒と同じ | シュッ・ポン |
| 5.55〜6.0 | 0秒と同じ絵で止まる（ループのつなぎ目） | | |

## 5. 変えていい所・変えない所
- 変えていい：店名・ボタンの言葉・通知の言葉・日付と曜日・時間の枠・差し色1つ・地の紺の濃さ・音の大きさ
- 変えない：形は1つだけで切らない（クロスフェードしない）／変身のたびに光が走る／強い出方は通知の1回だけ／最後の1コマ＝最初の1コマ／6秒／字の安全地帯

## 6. よくある失敗と直し方
- 点検で「#tint が最初から見えている」と止まる → CSS で opacity:0 にし、タイムラインの外の `gsap.set` で 0.2 にする
- 光が見えない → 帯のいちばん明るい所を白0.8まで上げ、変身が始まる時刻と同時に走らせる
- ガラスに見えず、ただの青い板になる → 地に細い方眼を入れ、面に backdrop-filter のぼかしをかける
- カーソルが「28」や「14:00」の字を隠す → 押す点を字の右下（丸や枠の中のふち寄り）にする
- 「予約できました」が出る瞬間にぼやけて、字が重なって見える → 1字ずつ大きく（1.9倍）出すと、半透明の大きな字が隣の字に重なる。差し色のずらした影も字が二重に見える。走る光が字の後ろを通るのも読みにくい。形が落ち着き光が通り過ぎてから、1かたまりで1.25倍→等倍、影は紺にする
- カードの字が小さく、読み切る前に次へ進む → 日付と時間は56px以上（Anton は見た目が小さいので84px）。ボタン→丸→チェックを少しずつ詰め、カードの中身を約1.9秒見せる
- 埋まっている枠が「うすいだけ」で選べないと分からない → 斜めの線と「満」を付ける
- 最初の0.3秒でカーソルがどこか分からない → カーソルを132×165に大きくし、ふちを太くする
- 2つの tween が同じ時刻に width を取り合う警告 → 前の tween を少し短くする
- 0.3秒と5.8秒の絵がずれてループで跳ねる → 地の光は「行って戻る」（yoyo・repeat:1）にし、最後の tween を5.5秒までに終える
- 字が説明文やボタンに隠れる → 字は y=230〜1470、y=940より下は x=850 より左

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

コンセプト：画面のまん中の「予約する」ボタン1つが、カーソルに押されると、切らずに同じ形のまま大きさ・角の丸み・色合いだけを変えて、回るローダー → チェック → 日付と時間を選ぶカード → 「予約できました」の通知へと姿を変え、最後に最初のボタンへ戻ってループする。

お店と言葉：〔見本サロン〕／ボタン「〔予約する〕」／カード：見出し「〔見本サロン〕」と「〔10月〕」、日付〔27(火)・28(水)・29(木)・30(金)・31(土)〕（曜日はその年の本当の暦で決める）（27と30は空きなし）、「時間を選ぶ」、時間の枠〔11:00・14:00・16:00・18:00〕（11:00と18:00は満席）／通知「〔予約できました〕」「〔10月28日（水） 14:00〕」。画面の字に句読点を付けない。

見た目：
- 地は暗い紺（まん中がほんのり明るい #1a2c5c → 外 #060c1e）。細い白の方眼（90pxごと・白0.07）と、ぼんやりした青と差し色の光を2つ。光は6秒で行って戻る
- 差し色は〔ミント #42e8c8〕1つだけ
- 形はガラスの板：白の半透明のグラデーション、ふち3pxの白0.40、内側の上ふちに白い線、backdrop-filter blur(22px)。差し色は形の中のベタ層の濃さで足す（ボタン0.2・チェック1・カード0・通知0.12）
- 姿を変えるたびに、面の上を斜めの白い光の帯が左から右へ0.6秒で走り、ふちが一瞬明るくなる
- 日本語は Noto Sans JP 900、数字は Anton。字は白、大事な所（選んだ日・選んだ時間・チェック）だけ差し色。いちばん小さい字でも44px。カードの曜日と「時間を選ぶ」は56px、日付の数字と時間は Anton 84px
- 埋まっている枠は、うすく＋点線のふち＋時刻に斜めの線＋右に小さく「満」
- カーソルは大きめ（132×165）の白い矢印に太い紺のふち。0秒から見えている。押すと一瞬縮み、差し色の輪が広がる。押す点は字の右下にして字を隠さない

秒割り：
0〜0.3秒　「予約する」ボタン（640×170・角まる・中心 540,900）と上に店名がもう見えている。カーソルは右下
0.3〜0.87秒　カーソルがボタンへ来て押す（少しふくらんでから押し込まれる）
0.87〜1.14秒　字が消え、ボタンが丸（170×170）に縮み、光が走り、ローダーが1回転
1.14〜1.6秒　丸が差し色に満ちて、紺のチェックの線が描かれる
1.6〜2.3秒　同じ形が 780×870 のカード（中心 470,895・角52）に広がり、光が走り、1.9秒から見出し→日付→時間の枠が順に出る
2.3〜3.45秒　カーソルが28日を押す（差し色の丸）→ 14:00を押す（枠が差し色で塗られる）
3.45〜3.84秒　選んだ日と時間を見せたまま止める（カードの中身は約1.9秒見せる）
3.84〜4.32秒　カードが 860×300 の通知（中心 540,800・角60）に縮み、光が走り終えてから、チェックの丸と「予約できました」を1かたまりで叩く（1.25倍→等倍0.12秒・紺のずらした影。1字ずつ大きく重ねない）、画面が小さく揺れる。下に日時。強い出方はここ1回だけ
4.32〜5.1秒　通知を止めて読ませる
5.1〜5.55秒　縮んで最初のボタンに戻り、光が走り、字が戻る
5.55〜6.0秒　0秒と同じ絵で止める（最後の1コマ＝最初の1コマ）

動き：変身は expo の加速・減速（丸に縮む時だけ少し行き過ぎて戻る）。カットなし・クロスフェードなし。すべて GSAP の1本のタイムラインで、乱数・タイマー・repeat:-1 は使わない。

音：落ち着いたBGMと効果音（押す＝カチッとポン、変身＝シュッ、チェック＝キラン、通知＝ドンとキラン）を Python で合成して assets/sound.wav にし、出来事の時刻に合わせる。音なしでも伝わること。

安全地帯：字は上から230〜1470pxの中。230〜400pxは空ける。940pxより下では x=850 より右に字を置かない（カードは左に寄せる）。

作り方：hyperframes init → index.html → 音 → npx hyperframes check のエラーを直す → npx hyperframes snapshot --at 0.3,1.5,3,4.5,5.8 で字の重なり・はみ出し・カーソルが字を隠していないか・0.3秒と5.8秒が同じ絵かを見て直す → npx hyperframes render。

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