見出しの壁（headline-wall）

「今日だけ」「限定20食」のような短い言葉が、1行ずつ画面に叩きつけられて積み上がり、最後に全体が見えるまでカメラが下がって、1行だけオレンジに光る6秒の縦動画を作れます。写真も画像AIも使いません。

中身（SKILL.md の全文）

---
name: headline-wall
description: 大きな言い切りの見出しを1行ずつ奥へ叩きつけて画面を埋め、カメラが引いて「見出しの壁」を見せ、最後に1行だけ差し色で光らせる6秒の縦動画を、HyperFrames のコードだけで作る。セール・限定メニュー・イベントの告知をリールやTikTokで目立たせたい時に使う。「見出しの壁で『今日だけ／限定20食／替え玉無料』の告知動画を作って」で使う。
---

# 見出しの壁（headline-wall）

## 1. 何ができるか
短い言い切りの言葉（6行ほど）が、1拍ごとに手前から奥の壁へ「ドン」と叩きつけられて、画面がだんだん埋まっていきます。
全部そろうとカメラがゆっくり引いて壁全体が見え、最後にいちばん言いたい1行だけがオレンジに光って止まります。
写真も画像AIも使いません。字とコードだけなので、言葉を変えればどの業種でもすぐ使えます。

## 2. 先に聞くこと（3つまで）
1. **壁に並べる言葉 6行**（1行目＝最後に光る行。いちばん言いたいこと）。例：今日だけ／限定20食／替え玉無料／夜9時まで／並ばず入れる／見本ラーメン
2. **差し色**（光る行の色。決まっていなければオレンジ #ff6a2b）
3. **地の色**（決まっていなければ紺 #0d1424）

聞かずに決めてよい物（最後に一覧で出す）：行ごとの太さ・傾き・ふち字にする行、奥の飾りの英字（TODAY ONLY など）、拍の速さ（96BPM）、効果音。

## 3. 作り方（HyperFrames）
1. ひな形を作る
   `HYPERFRAMES_SKIP_SKILLS=1 npx hyperframes init demo --example blank --resolution portrait --non-interactive`
2. `index.html` を書く（1ファイル・場面は1つ・6秒）
   - **入れ物の重ね方**：`#scene`（class="clip"・0〜6秒）の中に、逆光 `#back` と、`#cam`（`perspective:1400px; perspective-origin:540px 960px`）→ `#shk`（画面の揺れ用・preserve-3d）→ `#rig`（カメラ役・preserve-3d・1080×1920）。行と奥の飾りは `#rig` の中に置く
   - **行**：`<div class="ln" data-rot="傾き(度)" data-var-text="l1">今日だけ</div>` を6つ。class を足して変化をつける（`w5`＝太さ500、`ol`＝ふち字（中は地の色で塗る）、`w7`＝字間を広げた店名）。傾きは 0・+2・-1 くらいの小さな値を2〜3行だけ
   - **壁の組み方（スクリプト）**：字体の読み込みを待ってから（`document.fonts.ready`）、数字と英字を自動で Anton の span に包む。1行ずつ「幅いっぱい」になる字の大きさを出す（幅920px。ただし行の下の端が y=880 を越える行は、右のボタンをよけて760px。最大240px）。上から y=430 で積み、y=1470 を超えたら全体を同じ割合で縮める
   - **カメラ合わせ（大事）**：`#rig` に x・y・z・rotationX・rotationY を `gsap.set` で置き、`getBoundingClientRect` で行の実際の位置と幅を測って、ずれを直すのを6回くり返す。3Dの傾きがあってもぴったり合う
     - 1行目（0〜0.3秒）：幅940px、行の中心が (540, 760)。角度は rotationX 12°・rotationY -16°
     - 寄り（2行目から）：入ってきた行の中心を y=1000 に置く。それまでの行の山は y430〜1450 に収め、上では切らない（はみ出す時は下へずらす）。y=940 より下にかかる行は右の端を x850 まで（そのぶん小さくなってよい）。左の端は x75 にそろえる。y=940 より上の前の行は右へはみ出してよい。角度は行ごとに少しずつ戻す（rotationX -0.8°・rotationY +1.4° ずつ）
     - 引き：壁ぜんぶが幅900・高さ960（x90〜990・y470〜1430）に収まる所。寄りの最後より少し遠くなるので「引いた」と見える。rotationX 3°・rotationY -4° を残して奥行きを見せる
   - **動きの式**（GSAP の1本の timeline）
     - 叩きつけ：行を z=+560・rotationX -18°・透明 から、0.22秒 `power4.in` で z=-26 へ（めり込む）、0.1秒で z=0 に戻す。同じ時に不透明に（0.06秒）
     - カメラ：着地の0.3秒前から0.42秒 `power2.inOut` で次の行の「寄り」へ
     - 引き：3.5秒から1.5秒 `power2.inOut` で「引き」へ。斜めの角度が戻り、奥の飾り（z=-950）が遅れて動くので奥行きが出る
     - 光る：5秒で1行目の色を差し色に、`textShadow` を「ずらした濃い影＋70pxの光」へ0.18秒。ほかの行は不透明度0.42へ。1行目を z=+60 へ一瞬寄せて戻す
     - 揺れ：`#shk` を4コマだけ（-9,6 → 7,-4 → -4,2 → 0,0）。0.06秒と5.08秒の2回だけ
   - **字の決まり**：Noto Sans JP 900（太いゴシック）＋数字と英字は Anton。字は白、光る1行だけ差し色。句読点は付けない。いちばん小さい字でも44px以上
   - **安全地帯**：字は y=430〜1470。y=230〜400 は紹介の名前ピル用に空ける。y=940より下は右の x=850 より右に字を置かない（寄りの時もこれを守る。字が小さくなってもよい）。上で行を切らない
   - HyperFrames の決まり：時間で動く物は `class="clip"`＋data-start・data-duration。.clip そのものは動かさない。乱数・Date・タイマー・repeat:-1 は使わない。最後に `window.__timelines["main"]=tl`。行には `data-layout-allow-overlap`（叩きつけの途中で重なるため）、奥の飾りには `data-layout-ignore`
3. **音**：効果音とBGMをPythonで合成して `assets/sound.wav` に置き、`<audio id="snd" class="clip" src="assets/sound.wav" data-start="0" data-duration="6">`。着地ごとに「ドン」、その0.27秒前に小さな「シュッ」、引きの所で「シュッ」＋上がっていく音、光る所で「ドン」＋「キラン」。BGMは96BPMで、拍と着地をそろえる
4. **点検**：`npx hyperframes check --json` のエラーを0にする
5. **自分の目で見る**：`npx hyperframes snapshot --at 0.3,1.5,3,4.5,5.8` を開いて、字の重なり・はみ出し・空っぽの画面・読めない字・安全地帯を確かめる
6. **書き出す**：`npx hyperframes render -o ../見出しの壁.mp4`（1080×1920・30fps・6秒）

## 4. 秒割り
| 秒 | 画面 | 音 |
|---|---|---|
| 0〜0.3 | 1行目「今日だけ」がもう見えている。オレンジのずらした影、画面が小さく揺れる | ドン |
| 0.3〜3.5 | 2〜6行目が1拍（0.625秒）ごとに手前から奥へ叩きつけ（着地 0.625・1.25・1.875・2.5・3.125秒）。カメラは斜め上から、入ってきた行を画面の y1000 あたりに置き、行の山は y430〜1450 に積み上がって画面の下半分まで埋まる | 着地ごとにドン |
| 3.5〜5 | カメラがゆっくり引いて、斜めの角度が戻り、壁全体が正面から見える。奥の英字が遅れて動く | シュッ＋上がる音 |
| 5〜6 | 1行目だけオレンジに光り、ずらした影と小さな揺れ。ほかの行は少し暗くなって止まる | ドン＋キラン |

## 5. 変えていい所・変えない所
- **変えていい**：6行の言葉（4〜8行でも組める）、差し色、地の色、行ごとの太さ・傾き・ふち字、奥の飾りの英字、BGMの速さ（変えたら着地の秒も拍に合わせる）
- **変えない**：0秒で1行目がもう見えていること／ずらした影と揺れは最初の1行と最後に光る1行だけ／光る行は1行だけ／カメラ合わせは「測って直す」やり方／安全地帯／6秒の秒割り

## 6. よくある失敗と直し方
- **寄りの時に行が画面の右で切れる** → 計算だけで合わせると3Dの傾きでずれる。`getBoundingClientRect` で測って直すのをくり返す
- **寄りの時に前の行が画面の上（y230より上）へ押し出される・下半分が空っぽ** → 入ってきた行を画面の上の方に置くと起きる。行の中心は y1000 あたりにして、行の山を y430〜1450 に収める
- **最後の壁で下の方の行が右のボタンにかかる** → 幅を行の上の端で決めると、大きい行の下が y940 を越える。行の下の端で決める
- **最後の壁が下にはみ出す** → 引きの位置も測って合わせる（壁ぜんぶの外枠を幅900・高さ960、x90〜990・y470〜1430 に収める）
- **引いたはずなのに寄ったように見える** → 最後の壁が寄りの最後より大きいと起きる。最後の壁を少し小さく収め（幅900・高さ960）、寄りの角度を強くしすぎない（rotationY -16° まで）
- **字の大きさがおかしい・幅がそろわない** → 字体の読み込み前に測っている。`document.fonts.ready` のあとで組む
- **ふち字が「字が見えない」と点検で言われる** → 中を透明にせず、地の色で塗る
- **数字の行が上の行にぶつかる** → Anton の数字は和字より背が高い。大きさを 1.16倍まで、行のすき間を10px以上に
- **行が手前に来すぎてちらつく** → 叩きつけの出発は z=+560 まで（perspective 1400 より十分小さく）
- **叩きつけの途中で「重なり」のエラー** → 途中の重なりは演出なので、行に `data-layout-allow-overlap` を付ける。止まった時の重なりは静止画で確かめる

## 7. そのまま貼れるプロンプト
```
HyperFrames で、縦型 1080×1920・30fps・6秒ちょうど・音ありの動画を、写真や画像を使わずコードだけで作ってください。効果の名前は「見出しの壁」です。

コンセプト：大きな言い切りの見出しが、1行ずつ手前から奥の壁へ叩きつけられて画面を埋め尽くし、カメラがゆっくり引いて「見出しの壁」全体が見え、最後に1行だけ差し色で光って止まる。

言葉（6行・上から順。1行目が最後に光る行。句読点なし）：
〔今日だけ〕〔限定20食〕〔替え玉無料〕〔夜9時まで〕〔並ばず入れる〕〔見本ラーメン〕

色：地は暗い紺 #0d1424（まん中がほんのり明るい #1b2b4e のぼかし）、字は白 #ffffff、差し色はオレンジ #ff6a2b（光る1行と逆光だけ）。
書体：Noto Sans JP の900（太いゴシック）。数字と英字だけ Anton。3行目は太さ500、4行目はふち字（中は地の色）、6行目は太さ700で字間を広く。2行目は+2°、5行目は-1°だけ傾ける。

作り（3D）：
- #cam に perspective 1400px（中心 540,960）。その中に揺れ用の #shk、カメラ役の #rig（どちらも preserve-3d）。行は #rig の中
- 壁の組み方：字体の読み込みを待ってから、1行ずつ幅いっぱいになる字の大きさを出す（幅920px。行の下の端が y880 を越える行は760px。最大240px）。左はx=80にそろえ、y=430から行のすき間10pxで積み、y=1470を超えたら全体を縮める
- カメラ合わせ：#rig に x・y・z・rotationX・rotationY を置いて、getBoundingClientRect で測り、ずれを直すのを6回くり返す。1行目＝幅940px で中心が (540,760)、角度は rotationX 12°・rotationY -16°。寄り（2行目から）＝入ってきた行の中心を y1000 に置き、それまでの行の山を y430〜1450 に収める（上で切らない）。y940 より下にかかる行は右の端を x850 まで（字が小さくなってよい）、左の端は x75。角度は行ごとに rotationX -0.8°・rotationY +1.4° ずつ戻す。引き＝壁ぜんぶが幅900・高さ960（x90〜990・y470〜1430）に収まる所で、rotationX 3°・rotationY -4°。寄りの最後より少し遠くなり、引いて見える
- 奥に巨大な英字「TODAY ONLY」「LIMITED」の輪郭だけの飾りを z=-950 に置き、6秒かけて横に流す（カメラが引くと遅れて動く）

秒割り：
0〜0.3秒　1行目がもう見えている。オレンジのずらした影（12px）がついていて、0.06秒に画面が小さく揺れる。影は0.55〜1秒で消える
0.3〜3.5秒　2〜6行目が96BPMの1拍（0.625秒）ごとに着地（0.625・1.25・1.875・2.5・3.125秒）。各行は z=+560・rotationX -18°・透明から、0.22秒 power4.in で z=-26 までめり込み、0.1秒で z=0 に戻る。カメラは着地の0.3秒前から0.42秒で次の行の寄りへ動き、行の山は画面の下半分まで埋まっていく
3.5〜5秒　カメラが1.5秒 power2.inOut でゆっくり引いて、斜めの角度が戻り、壁全体が正面から見える
5〜6秒　1行目だけ文字がオレンジになり、濃い色のずらした影と70pxの光。1行目が一瞬手前に寄って戻り、画面が小さく揺れる。ほかの行は不透明度0.42に暗くなって、そのまま止まる

決まり：
- ずらした影と画面の揺れは、最初の1行と最後に光る1行だけ。ほかの行は叩きつけだけ
- 字は y=430〜1470 の中（寄りの間も上で行を切らない）。y=230〜400 は空ける。y=940より下では x=850 より右に字を置かない
- いちばん小さい字でも44px以上。画面の字に句読点を付けない
- 時間で動く物は class="clip"＋data-start・data-duration。.clip そのものは動かさない。乱数・Date・タイマー・repeat:-1 は使わない。動きは GSAP の1本の timeline で、最後に window.__timelines["main"]=tl
- 行には data-layout-allow-overlap、奥の飾りには data-layout-ignore を付ける

音：BGM（96BPM・クールな和音）と効果音を Python で合成して assets/sound.wav にする。着地ごとに低い「ドン」、その少し前に小さな「シュッ」、3.5秒に「シュッ」と上がっていく音、5秒に「ドン」と「キラン」。音なしでも伝わること。

作り方：npx hyperframes check --json のエラーを0にし、npx hyperframes snapshot --at 0.3,1.5,3,4.5,5.8 の静止画を自分で見て、字の重なり・はみ出し・空っぽの画面・安全地帯を直してから npx hyperframes render で書き出す。

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