ビフォーアフターのスライダー（before-after-slider）

画面のまん中の線をカーソルが左右に動かして「前」と「後」を見比べ、最後に「後」が全面に出て止まる6秒の縦動画を作れます。見本はメニュー表ですが、自分の写真2枚に替えることもできます。

中身（SKILL.md の全文）

---
name: before-after-slider
description: 仕切り線をカーソルが左から右へゆっくり引いて「前」と「後」を見比べ、最後に「後」が全面に出て止まる縦型6秒の動画を、HyperFrames のコードだけで作る。美容室の仕上がり・リフォーム・料理の盛り付け・チラシやメニューの直しなど、変わった所を一目で見せたい時に使う。「ビフォーアフターのスライダーで、うちのメニューの直す前と後を見せる動画を作って」で使う。
---

# ビフォーアフターのスライダー（before-after-slider）

## 1. 何ができるか
- 縦型（1080×1920）・6秒・音つきの動画を、写真や動画AIを使わずコードだけで作る
- 始めは「前」がほぼ全面。左はしに縦の仕切り線とガラスのような光るつまみがある。線の左が「後」、右が「前」
- カーソルがつまみをつかみ、左から右へ1回ゆっくり引く → 少し戻して見比べる → 右の端まで引き切る（約1.5往復）。最後は「後」が全面に出て止まる
- 「前」と「後」の中身は、コードで描いた画面のほかに写真にも差し替えられる（写真を使う時は、自分で撮った写真を `assets/` に入れる）

## 2. 先に聞くこと（3つまで）
1. 何の前と後か（例：メニュー表・髪型・部屋・料理の盛り付け・チラシ）と、お店や名前
2. 中身はコードで描くか、自分の写真を使うか（写真なら2枚のファイル名）
3. 差し色（なければオレンジ #ff7a2f）

聞かずに決めてよい物は決めて、最後に一覧で出す：地の色・字体・秒割り・音・カーソルの動き・札の字（「前」「後」）。

## 3. 作り方（HyperFrames）
1. ひな形を作る
   `HYPERFRAMES_SKIP_SKILLS=1 npx hyperframes init demo --example blank --resolution portrait --non-interactive`
2. `demo/index.html` を1ファイルで書く。作りの要点：
   - 全体：`#root`（data-duration="6"）の中に、時間で動く箱 `#stage`（class="clip"・data-start="0"・data-duration="6"）を1つ。ゆらすのはその中の `#cam`。`.clip` そのものに transform をかけない
   - 比べる枠 `#panel`：x=90〜990・y=430〜1360（900×930）・角丸40px・overflow:hidden。中に同じ大きさの2枚を重ねる
     - `#before`（下・全面）：前の中身
     - `#after`（上）：後の中身。`clip-path: inset(0 Rpx 0 0)` で線より右を切り抜く。R は 990 − 線の位置。R=0 で「後」が全面になる
   - 前の中身の作り方：ごちゃごちゃ感は残しつつ、品名と値段は読めるようにする。見出しも区切りもなく、灰色の太字54pxで「品名＋値段」を続けて6行ほどに詰める。品と値段は後と同じにする
   - 線とつまみとカーソルは枠の外の層 `#rig` に置く（つまみが枠からはみ出しても切れないように）
     - 線：幅6px・白・白とオレンジの光（box-shadow）
     - つまみ：140pxの丸。高さは y=1200（前の字にかからない所）。半透明の白のグラデーション＋白いふち＋外にオレンジの光＋内側の光＋`backdrop-filter: blur(10px)`。中に左右の三角（CSSの線で作る）
     - カーソル：SVGの矢印（白＋黒ふち＋影）。先っぽがつまみの中心の少し右下
   - 動きの式：線の位置 `P.x` を1つだけ動かし、毎回 `apply()` で clip-path・線・つまみ・カーソルを一緒に動かす
     ```js
     const PL = 90, PR = 990, START = 120, P = { x: START };
     function apply(){
       const R = Math.max(0, Math.min(PR - PL, PR - P.x));
       after.style.clipPath = "inset(0 " + R + "px 0 0)";
       gsap.set(["#line","#knobWrap","#curWrap"], { x: P.x });
     }
     let last = START;
     const drag = (to, t, d, ease) => { tl.fromTo(P, {x:last}, {x:to, duration:d, ease, onUpdate:apply, immediateRender:false}, t); last = to; };
     drag(880, 1.4, 1.2, "sine.inOut");  // 左から右へゆっくり
     drag(665, 2.75, .45, "sine.inOut"); // 少し戻して見比べる
     drag(990, 3.7, .5, "power3.in");    // 右の端まで引き切る
     ```
   - 線が止まる所（始め・戻した所）と、静止画を撮る秒では、店名「見本カフェ」（x=138〜640）を線で切らない。止める所は x=120 以下か x=660 以上にする
   - 「後」「前」の札：枠の下（y=1378〜1462）に、白い字60pxの札。地は濃い紺で、「後」はオレンジのふち、「前」は白のふち。「後」は左（x=110）、「前」は右で x=850 より左に置く
   - 字：日本語は Noto Sans JP 900、数字と英字は Anton。字は白、大事な所だけ差し色。画面の字に「、」「。」を付けない
   - 安全地帯：字は y=230〜1470 の中。y=940 より下では x=850 より右に字を置かない。いちばん上（y=230〜400）は名前ピル用に空ける
   - 乱数・Date・タイマー・repeat:-1 は使わない。動きは GSAP の1本の timeline、最後に `window.__timelines["main"] = tl`
3. 音：`音.json` に出来事の時刻を書いて `assets/sound.wav` を作る（つかむ＝tick・pop、ゆっくり引く＝whoosh、止まる所＝tick、引き切る前＝riser、引く＝whoosh、端に当たる＝hit と chime、BGM は小さく）。`<audio id="snd" class="clip" src="assets/sound.wav" data-start="0" data-duration="6">` で入れる
4. 点検：`npx hyperframes check --json` のエラーを直す
   - 「前」の字は「後」の下に隠れるので `text_occluded` が出る → 前の字の要素に `data-layout-allow-occlusion` を付ける
   - 「前」の段落に `line_unread`（読み切れない）の注意が出る → 前は見比べるための物なので、そのままでよい
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 | 「前」のメニューがほぼ全面。左はし（x=120）に線とつまみがもう見えている。つまみがほんのり光る | |
| 0.3〜0.92 | カーソルが右下から入り、0.92秒でつまみをつかむ（カーソルが少し縮み、つまみが少しふくらみ、オレンジの輪が広がる） | whoosh・tick・pop |
| 0.92〜1.4 | つかんだまま、ひと呼吸 | |
| 1.4〜2.6 | 左から右へ1回ゆっくり引く（x=120 → 880）。品名も値段も「後」に変わっていく | whoosh・tick |
| 2.75〜3.2 | 少し戻す（x=880 → 665） | 小さな whoosh・tick |
| 3.2〜3.7 | 止まって見比べる（左に後の品名、右に前の字。店名は切らない） | riser |
| 3.7〜4.2 | 右の端まで引き切る → 「後」が全面に。端に当たって画面が小さくゆれ、白い輪が広がり、光の帯が走り、「後」の札が一度ふくらむ（強調はここ1回だけ） | whoosh・hit・chime |
| 4.32〜4.75 | 線とつまみが消え、カーソルが手を放して左下へ出ていく | tick・pop |
| 4.75〜6 | 「後」のまま止まる | |

## 5. 変えていい所・変えない所
- 変えていい：前と後の中身（言葉・品・値段・写真）、店名、差し色、地の色、止める位置（店名や顔を切らない所）、札の字（「BEFORE」「AFTER」など）
- 変えない：6秒・1080×1920・30fps、0秒でもう前と線が見えていること、動きは約1.5往復でゆっくり（sine.inOut）、強調は端に当たる1回だけ、最後は「後」が全面で1秒以上止まる、安全地帯、字は44px以上、札は白い字56px以上
- 前と後は「同じ物・同じ中身で見た目だけ違う」ようにする（品や値段まで変えると比べる意味がなくなる）
- 前は「読めないほど細かい長文」にしない。ごちゃごちゃでも品名と値段は読める大きさにする（見る人が見比べられないため）

## 6. よくある失敗と直し方
- 前の字が細かすぎて、何が良くなったか比べられない → 行を減らし、字を54pxくらいにして、品名と値段を読めるようにする
- 何往復もさせて、何をしているのか・いつ終わるのか分からない → 「ゆっくり引く → 少し戻す → 引き切る」の約1.5往復にする
- 札が小さく薄くて見えない → 白い字で56px以上、濃い地に太いふち
- 店名が線で半分に切れたコマができる → 止める所と静止画の秒で、線が店名の上に来ないように位置と秒を決める
- つまみやカーソルが前の字にかかる → つまみの高さを字のない所（y=1200）に下げる
- 0秒の1コマ目に輪や光が出ている → 途中で出す動きに `immediateRender: false` を付ける
- 線を動かしても「後」が切り替わらない → clip-path を付けたのが上の層（後）か確かめる。右から切るので `inset(0 Rpx 0 0)`
- 端に当たった時に光の opacity を 2 などにしても明るくならない（1が上限）→ 白い板を重ねて一瞬だけ光らせる
- 写真に差し替えて上下がずれる → 2枚とも同じ大きさ・同じ構図で、`object-fit: cover` にする

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

HyperFrames で、縦型 1080×1920・30fps・6秒ちょうど・音ありの「ビフォーアフターのスライダー」の動画を、コードだけで作ってください。ひな形は `HYPERFRAMES_SKIP_SKILLS=1 npx hyperframes init demo --example blank --resolution portrait --non-interactive`。

中身
- 比べる物：〔架空の「見本カフェ」のメニュー表〕
- 前：〔白っぽい紙の地に、灰色の太字54pxで、見出しも区切りもなく品名と値段と説明を続けて6行ほどに詰めたメニュー。ごちゃごちゃしているが、品名と値段は読める〕
- 後：〔暗い紺の地に、MENU（差し色の英字）・店名を大きく・DRINK と SWEETS の見出し（差し色の英字と線）・品名（白60px）と値段（差し色の数字84px＋円）を1行ずつ並べた読みやすいメニュー。右上に線で描いたカップの絵〕
- 品と値段は前と後で同じ：〔ブレンドコーヒー450円・カフェラテ520円・抹茶ラテ550円・チーズケーキ480円・季節のタルト560円〕
- 写真を使う時は、自分の写真2枚を assets/ に入れて〔before.jpg・after.jpg〕を同じ大きさで object-fit: cover にする

見た目
- 地は暗い紺（#0b1220）。まん中がほんのり明るい。差し色は〔オレンジ #ff7a2f〕1つ。比べる枠（x=90〜990・y=430〜1360・角丸40px）の後ろにオレンジの逆光
- 日本語は Noto Sans JP 900、数字と英字は Anton。字は白、大事な所だけ差し色。画面の字に「、」「。」を付けない
- 仕切り線は幅6pxの白で、白とオレンジの光。つまみは140pxの丸で、高さ y=1200（前の字にかからない所）。ガラスのように光る（半透明の白のグラデーション・白いふち・外にオレンジの光・backdrop-filter の blur）。中に左右の三角
- カーソルは白い矢印（黒ふち・影）
- 札は枠の下（y=1378〜1462）に、白い字60pxで「後」と「前」。地は濃い紺、「後」はオレンジのふち、「前」は白のふち。「後」は左、「前」は右で x=850 より左に

仕組み
- 線の左が「後」、右が「前」。前を下に全面で置き、上の「後」を clip-path: inset(0 Rpx 0 0) で線より右を切り抜く。R は枠の右端 − 線の位置。R=0 で「後」が全面
- 線の位置を1つの値で動かし、そのたびに clip-path・線・つまみ・カーソルを一緒に動かす。線とつまみとカーソルは枠の外の層に置く

秒割り（約1.5往復・ゆっくり見せる）
1. 0〜0.3秒：前がほぼ全面。左はし（x=120）に線とつまみがもう見えている
2. 0.3〜0.92秒：カーソルが右下から入り、0.92秒でつまみをつかむ（カーソルが少し縮む・つまみが少しふくらむ・オレンジの輪が広がる）。1.4秒まで、つかんだままひと呼吸
3. 1.4〜2.6秒：左から右へ1回ゆっくり引く（x=120 → 880）。sine.inOut
4. 2.75〜3.2秒：少し戻す（x=665）。3.7秒まで止まって見比べる
5. 3.7〜4.2秒：power3.in で右の端まで引き切り、後が全面に。端に当たった時だけ、画面を小さくゆらし・白い輪を広げ・光の帯を走らせ・「後」の札を一度ふくらませる（強調はここ1回だけ）
6. 4.32〜4.75秒：線とつまみが消え、カーソルが手を放して左下へ出ていく
7. 4.75〜6秒：後のまま止まる
- 線が止まる所と 0.3・1.5・3・4.5・5.8秒のコマでは、店名を線で半分に切らない

音
- コードで作った効果音と小さなBGM。つかむ時に tick と pop、ゆっくり引く時に whoosh、止まる所に tick、引き切る前に riser、引く時に whoosh、端に当たる時に hit と chime

決まり
- 字は y=230〜1470 の中。y=940 より下では x=850 より右に字を置かない。いちばん上（y=230〜400）は空ける。いちばん小さい字でも44px
- 時間で動く物は class="clip" と data-start・data-duration。.clip そのものに transform をかけない。乱数・Date・タイマー・repeat:-1 は使わない。動きは GSAP の1本の timeline で、最後に window.__timelines["main"] = tl
- お店の名前は架空で日本語（「見本」を付ける）。実在の店・人・ロゴは出さない。値段は自然な値
- 前の字は後の下に隠れるので、前の字の要素に data-layout-allow-occlusion を付ける
- 作ったら npx hyperframes check --json のエラーを直し、npx hyperframes snapshot --at 0.3,1.5,3,4.5,5.8 の静止画を自分で見て直してから、npx hyperframes render で書き出す

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