# ちぎる — Style Reference
> 白い紙と黒いインクだけ。指でなぞると紙が破れ、毛羽立った切れ口から下の黒い面が見える。

**Theme:** light  **Series:** PLAY 001  **World:** 綿の長い繊維で漉いた「手でちぎれる紙」の見本帖。ページ全体が一枚の紙で、破った分だけ下の内容が現れる。

## Concept
画面は一枚の紙。紙には「ちぎる」と刷ってあり、なぞると本当に破れる。破れた紙片は床に落ちて積もり、穴の下から白文字の本文(商品説明と「見本を取り寄せる」)が見える。色は紙の白とインクの黒だけ。紙を破るという行為そのものが「手でちぎれる紙」という商品説明になる。
下のセクションも同じ素材(紙・繊維・光・折り目)で、技術を1つずつ変えて見せる。

## Signature Technique
**ポリゴン分割による紙の破断 + 繊維の毛羽 + 簡易剛体の落下。** Canvas2D + DOM、ライブラリなし。

1. **紙の原板 (master)**: hero と同サイズのオフスクリーン canvas。`#f4f2ed` 塗り → 繊維写真を alpha 0.3 で cover 描画 → 文字(見出し/ラベル)を `fillText`。文字を canvas に刷るので、紙片に文字が乗ったまま落ちる。
2. **残りの紙 = 多角形 `poly`**: 初期値は矩形4頂点。各頂点は `{x, y, t}` で `t` は「次の頂点への辺が破断面か」。
3. **ドラッグ経路のギザギザ化 `jagPath`**: 生座標を 4px 間隔に再サンプルし、法線方向に 2 オクターブの値ノイズ (粗: 5点に1つ ×2.2amp、細: 毎点 ×0.9amp、5% で ×3.2 のスパイク) を足す。seed はドラッグごとに固定し、途中再計算しても経路が揺れない。
4. **分割 `endTear`**: 経路両端を `nearestOnBoundary` で境界に投影し、境界を順方向に歩く `walk(from,to)` で 2 つの閉多角形 A/B を作る。面積(靴紐公式)が小さい方を「紙片」、大きい方を新しい `poly` にする。面積 120px² 未満や経路 28px 未満は無視。
5. **毛羽 `makeFuzz`**: 破断辺 2.1px ごとに 1 本、法線±0.85rad の方向へ長さ `1.2 + r³×13` px の二次ベジェを引く。白 (alpha .4–.95) 8割、灰 `#b0aca3` 2割。法線の向きは辺中点を 2.5px ずらして点内判定し、多角形の外側を選ぶ。seed は辺の端点座標から作るので再描画しても同じ毛羽になる。
6. **厚みと影**: 多角形を `shadowBlur 22 / offsetY 5` の黒影つきで塗り、clip して master を描く。破断辺は内側に `rgba(0,0,0,.10)` 幅 20 の帯(紙のめくれ)、`rgba(255,255,255,.75)` 幅 1.2 の線(断面の白い芯)。
7. **ドラッグ中**: 静的な紙 (`staticC`) を描いた上に経路を `destination-out` 幅 2.4 で抜き、両側に短い毛羽を足す。毎フレーム計算は新しく伸びた区間だけ。
8. **紙片の落下**: 紙片は bbox サイズの `<canvas class="piece">` を DOM に置き、`translate3d / rotate / rotateX` で動かす。物理: `vy += (900 - drag·vy)dt`(drag は面積で 2.2–5.2、大きい紙片ほど遅い)、横は `sin(4.2t)` の揺れ、`rotateX = 28°·sin(3.6t)` で紙のひらつき。床判定は紙片ポリゴンの頂点を回転して最下点を取る。着地で `vy ×-0.18`、40px/s 未満で停止。14 枚を超えたら古い順にフェード。
9. **入力**: canvas は `pointer-events:none`。hero が pointerdown を受け、点が `poly` 内なら破り始め、外なら下の内容(ボタン)にそのまま通す。紙の下に隠れたボタンへのクリックは capture 段階で止め、キーボード(`e.detail===0`)は通す。`touch-action: pan-y` で縦スクロールは生かす。
10. **自動デモ**: 読み込み 0.2 秒後に右上の角を 0.6 秒で自動で破る。`ひとつ破る` ボタン(キーボード用)は境界からランダムな曲線で同じ関数を呼ぶ。

**02 繊維 (スクロール連動の破断)**: 同じ `jagPath / makeFuzz / drawPaperPoly` を使う。横断する経路を事前計算し、sticky セクションの進行 p で `p<0.5` は亀裂が左から右へ伸び、`p≥0.5` は上下の多角形が `H×0.11` 離れ ±0.7° 回転して黒い隙間に白文字が出る。

**03 表面 (WebGL レリーフ照明)**: 1 枚の三角形に fragment shader。繊維画像の輝度を高さとして 4 近傍差分で法線を作り(`k=6`、スマホ 4.5)、低い角度の平行光 `L=normalize(-0.55,0.62,0.3)` で拡散を平面比 `diff/flat` に正規化する。光は斜め 20° の帯 `band=exp(-across²·30)·smoothstep(1.05,0.15,|along|)` の中だけに当て、帯の外は紙の白(#FAF9F5 付近、高さの影響 2.5%)のまま。帯の中の影の底は 0.38。帯の中心はカーソルに `1-e^(-6dt)` で追従、放置時は右上寄りの楕円軌道。`file://` では画像テクスチャが使えないので、2D canvas に 3400 本のベジェ繊維と 26000 点の粒を描いた高さ図を生成して代用する。

**04 折る (CSS 3D)**: 右半分を `transform-origin:left` で `rotateY(-178° → 0°)`、進行は easeInOutQuad。表/裏の面に `|sin θ|` 比例の陰影、左半分に折り返しからの影。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --paper | #F4F2ED | 紙の地色。hero/帯/折り紙/締め/フッター |
| --paper-2 | #E9E6DF | 紙の裏面、薄い面 |
| --paper-3 | #D9D5CC | 紙片の縁の灰、区切り |
| --ink | #141311 | 刷られた文字、ボタン |
| --ink-2 | #55534E | 本文、補足 |
| --ink-3 | #8E8A83 | ラベルとフッターとヒントの文字 |
| --void | #0C0C0B | 紙の下の面。破った穴、02 の隙間、03 の背景 |
| --white | #FFFFFF | 紙の下に刷られた白文字、毛羽の芯 |
| fuzz grey | #B0ACA3 (alpha .4–.95) | 毛羽の 2 割 |

彩度のある色は 1 色も使わない。強調は「黒い穴」と「白い毛羽」だけで作る。

## Typography
- **Shippori Mincho B1 800**: 見出し・刷り文字。hero は `min(W×0.26, H×0.34)`px(1440×900 で 306px、字間 -0.02em)。縦長画面では 1 文字ずつ縦積み `min(W×0.36, H×0.16)`px。h1 (紙の下) `clamp(42px, 7vw, 92px)`、セクション h2 `clamp(26–30px, 3.4–4.2vw, 44–56px)`、04 の刷り文字 `clamp(56px, 11vw, 150px)`。
- **Zen Kaku Gothic New 400/500**: 本文 17px / 1.6、補足 15–16px、ラベル 12px 500 字間 .22em 大文字。
- 英字はラベルだけ(CHIGIRI PAPER, VALE / PLAY 001)。`font-feature-settings:"palt"`。
- canvas 内の文字は同じフォントを `document.fonts.load` で待ってから刷る。

## Spacing & Layout
- gutter `clamp(20px, 4vw, 56px)`。canvas 内のラベル位置も同じ式。
- hero / 02 / 04 は 100svh (hero min 560px)。02 と 04 は 230vh / 220vh の背の高いセクションに 100svh の sticky。03 は 88vh (スマホ 78vh)。
- 本文の最大幅 34em。締めは中央揃え、上下 `clamp(120px, 18vh, 200px)`。
- breakpoints: 640px 以下で h1 40px、折り紙幅 86vw、締め見出し 25px。
- 横スクロール禁止 (`overflow-x:hidden`)、紙片は hero の `overflow:hidden` 内。

## Motion
- 破断: ドラッグに即時追従(毎 move で再描画)。分割後の紙片は重力 900px/s² と面積比例の空気抵抗で終端速度 180–400px/s、横揺れ sin(4.2t)、ひらつき rotateX 28°。
- 自動デモ 0.6s、easeInOut で経路を送る。
- 02: 亀裂は進行に線形、開きは `1-(1-u)³`。03: 光の追従 `1-e^(-6dt)`、放置時の軌道 0.35/0.5 rad/s。04: easeInOutQuad。
- rAF は 1 本 (`tickers` Set)。動く紙片が無い・03 が画面外なら自然に停止。
- reduced-motion: 紙片は落ちずに 0.5s で消える。02 と 04 は開いた状態で固定。03 の光は固定位置。自動デモは角を即座に破った静止状態になる。

## Components
- **hero**: 黒い面(`.under`: ラベル / h1 / 本文 / 白ピルボタン) → 紙 canvas (`pointer-events:none`) → 紙片レイヤー (`perspective:1400px`) → 右下に半透明ピルの「ひとつ破る」。
- **section**: 番号ラベル `02 / 繊維` を左上 gutter に。見出し 1 本 + 1 文。03 は左下寄せ、ヒントはラベル色 12px。
- **button**: 高さ 52px、横 26px、`border-radius:999px`。黒地に紙色文字(`.btn`)、黒い面の上では白地黒文字(`.btn.light`)。hover で 1px 浮く。`focus-visible` は 2px アウトライン + 5px リング。
- **footer**: 11px 字間 .2em 大文字、上に 1px の薄い罫、`VALE / PLAY 001`。

## Do / Don't
**Do**
- 文字は紙に「刷る」。紙片に文字が乗ったまま落ちるのが肝。
- 毛羽は白が主、灰は 2 割。断面には白い芯の線を 1 本。
- 1 画面 1 焦点。hero は「ちぎる」の 3 文字だけが主役。
- 色は紙・インク・穴の黒の 3 つで止める。
- 紙の下に隠れた UI へのクリックは止め、キーボードは通す。

**Don't**
- 繊維写真を alpha 0.3 より濃くしない(文字と競る)。
- 紙片に CSS の transition を付けない(物理は毎フレーム transform で書く)。
- 破断経路を滑らかにしない。ノイズを消すと切り紙に見える。
- 穴の下に色やグラデーションを置かない。黒一色。
- セクションに説明文を足さない。見出し 1 本 + 1 文まで。

## References
- **Wise** (Refero): 極太ディスプレイ書体を 100px 超で画面に「叫ばせる」構成と、1 色の機能的アクセントで押す考え方を抜き出した。書体は Wise Sans の黒ゴシックから Shippori Mincho B1 800 の重い明朝へ、アクセント色は lime から「紙の下の黒い穴」へ置き換え、色数をゼロにした。
- **Streamtime** (Refero): 紙の切り抜きを机に並べたような触感と、1 ウェイトでサイズ差だけの階層づくりを参考にした。クリームと多色の紙片は、白い紙と黒インクの 2 値に絞り、切り抜きの「貼る」を「破る」に変えて主役の技術にした。