# 一閃 ISSEN — Style Reference
> 白い紙の上に、鋼が一本。横に斬ると紙が二つに割れて落ちる。

**Theme:** light  **Series:** EDGE 004  **World:** 日本刀の刃と鋼の反射と斬撃。架空の折り返し鍛造の包丁ブランド『一閃』の公式サイト。

## Concept
余白が主役。紙色の全画面に「一閃」の2文字と、その下を横切る1本の包丁だけを置く。ドラッグで画面を斬ると、紙(文字も包丁も)が斬った線で二つに割れ、下側が重力で落ちる。「切れる」という商品の事実をページそのものに起こす。色は紙の白と墨と鋼の灰だけ。彩度のある色は使わない。区画は「刃文 → 墨 → 和紙 → 注文」で、刃から包装までの順に並べる。

## Signature Technique
### 1. 斬撃(hero, DOM + clip-path + 自前の物理)
- hero の中身(three.js の canvas と文字)は `.layer` に全部入れる。pointerdown→pointerup の距離が 70px を超えたら斬撃。
- 画面矩形 `[(0,0),(W,0),(W,H),(0,H)]` を直線 `p1,p2` の法線 `n=(-dy,dx)/len` で **Sutherland-Hodgman** により2つの多角形に分ける。重心 y が大きい方(下側)が落ちる。
- `.layer` を `cloneNode(true)` して下側の破片 B にする。B の canvas は 2D canvas に差し替え、刃のレンダラーが毎フレーム `drawImage(glCanvas)` で複製するので破片の中でも刃は動き続ける。上側 A は `clip-path: polygon(...)` で上の多角形だけ残す。
- 物理: `vy += 2600 px/s²`、`vx = ∓30 px/s`、角速度 `∓0.55 rad/s`(斬った向きで符号が決まる)、`transform-origin` は破片の重心。`y > 1.3H` または 2.2 秒で終了。
- 演出: 斬った直後に A が法線方向へ 6px 後退(`transition .32s`)。線上に 2px の墨色の線を出し 0.7 秒で消す。終了時は紙色の幕を 0.36 秒で重ね、その裏で clip を外す。
- reduced-motion: 破片は 48px 下がりながら 0.7 秒で消えるだけ。

### 2. 刃(hero, three.js 0.170, PerspectiveCamera fov 28, z 4.7)
- 形状: 断面は「棟 → 鎬(±厚み/2) → 刃先」の4面。長さ 3.3、高さ `0.23·(1-0.10u)`、厚み `0.024·(1-0.35u)`、先端 20% で `smoothstep` により切先へ絞る。棟は `0.07u²` だけ反らす。110 分割、面ごとに独立した頂点を持ち法線は面単位。属性 `aEdge`(刃先 0 / 鎬 0.38 / 棟 1)と `aU`(柄 0 → 切先 1)。
- 材質(ShaderMaterial): 長手方向の筋 `noise(u·900)` で法線を 0.012 だけ揺らし、`reflect(-V,N)` で**手続きのスタジオ環境**(暗い灰の部屋 `#1A1C21→#5C6169` の縦グラデ + 横の水平帯 3 本を重み 0.18 で + ポインタに追従するソフトボックス `exp(-((R.x-1.4·mx)·0.9)²)`)を拾う。異方性ハイライトは Kajiya-Kay `(1-(T·H)²)^35`。
- 窓の映り込み: 研ぎ筋で揺らす前の反射ベクトル R0 を使い、`ws = 0.86·(u-0.5) + R0.xy·(0.87, 0.49) - 0.45·mx - 0.25·my`。`ws` の 0.10 に幅 0.042 の主窓、0.175 に幅 0.014 の細い窓、-0.32 に弱い窓。`fwidth` で縁を 1px に保つので帯の縁は鋭い。刃の長手方向の位置を混ぜるため、刃の向き(横置き/縦画面の斜め置き)に関係なく帯は刃を横切る。地の部屋は暗め(`#1A1C21→#5C6169`)に落とし、白は窓・鎬・刃先に集める。
- 鎬と刃先: 鎬(aEdge 0.383)に幅 0.005 の白い稜線、その直下 0.370 に 35% の影。刃先は aEdge 0.012〜0.024 で白へ、その上 0.034 に 60% の暗線を置き、白線の縁を立てる。
- 刃文: `hb = 0.30 + 0.09·fbm(u·9) + 0.03·sin(46u)`。`aEdge < hb` が焼刃(マット、`#999D A1` 付近)、境界に `exp(-(d/0.035)²)` の匂(にお)い、`hash` で 2.5% の沸(にえ)の点。地鉄は `fract(fbm·10)` の等高線で折り返しの層(杢目)を薄く入れる。
- ポインタ: 水平帯の高さは `2.2·R.y - 0.9·my`、ソフトボックスの横位置 `1.4·mx`。刃は `rotation.x = -0.22·my`、`rotation.y = 0.08·mx`。無操作時はゆっくり自動で揺れる。縦画面では刃を 0.56 倍にして -1.05rad(約 -60°)に傾け、対角線に置く。
- 柄: 八角の朴(`#C9B99A`)と角の口輪(`#1A1816`)、Lambert + 環境光。

### 3. 刃文の面(section 01, WebGL1 全画面シェーダー)
- `p = fragCoord / res.y`。下 34% が焼刃: `hb = 0.34 + 0.08·fbm(1.6x) + 0.025·fbm(7x)`。
- 地鉄: `fbm` を `fbm` で歪めた場 `f` の等高線 `|fract(11f + 0.6y) - 0.5|` を層の線にする(焼刃の中には出さない)。
- 研ぎ筋: `noise(4x, 640y)` で法線 y を ±0.11 揺らす。ハイライトは `T=(1,0,0)` の Kajiya-Kay(34 乗)、光源はポインタ位置(`z 0.85`)、減衰 `0.45+0.55·e^{-0.9d}`。
- 色: 地鉄 `#30333A → #808488`、焼刃 `#9EA2A6`、匂い 0.14、沸は 2 枚の回転した格子(520 と 377)の hash で 1% の点。下端 1% に刃先の白い線。
- 沸や層は固定、光だけがポインタで走る。

### 4. 墨(section 02, GPU ナビエ・ストークス, demos/flow 転用)
- 速度場 200²(mobile 96²)、染料 768²(mobile 384²)、圧力反復 20(mobile 12)。染料は墨 1 成分、減衰 0.015/s(ほぼ残る)、速度減衰 1.6/s、渦度 6、curl noise 0.55。浮力なし。
- にじみ: 毎フレーム 4 近傍との `mix(c, n, 0.18·(0.4+0.6·smoothstep(0,0.3,c)))` で繊維へ染み出す。
- 表示: `core = 1-e^{-3.2k}` を墨 `#121110`、1/4 解像度ブラーの `halo = 0.55·(1-e^{-1.6b})` を薄墨として紙 `#F7F7F4`(繊維の 1.5% のノイズ)に重ねる。
- 入力: 押しながら動かすと細い線(半径 0.0009)、止めて押し続けると溜まりが太る(半径 0.0012 + 0.0012·秒)。無操作時は 4〜8 秒おきに 1 滴。初期状態で短い筆の線を 1 本置く。

### 5. 和紙の見開き(section 03, scroll 連動)
- 和紙の写真に `clip-path: polygon(0 (50-12-o)%, 100% (50+12-o)%, 100% (50+12+o)%, 0 (50-12+o)%)`、`o = 40·p`。`p = clamp((0.92·vh - rect.top) / (0.75·vh), 0, 1)`。斜めの帯が広がり、右上と左下に紙色の三角を残して止まる。包丁で切った紙の縁が最後まで画面に残る。reduced-motion では `p=1` 固定。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| `--paper` | `#F7F7F4` | ページ地、hero、墨の区画の紙 |
| `--paper2` | `#EFEFEA` | 刃文・和紙の区画の下地 |
| `--rule` | `#DCDCD6` | 1px 罫線 |
| `--ink` | `#121212` | 見出しとブランド名とボタンの塗りと斬撃の線 |
| `--ink2` | `#3A3A3A` | 説明文、ボタンのホバー |
| `--steel` | `#7E868C` | 番号ラベル、フッター文字 |
| `--steel2` | `#B9BFC3` | 刃の中間調(シェーダー内) |
| `--mist` | `#9A9FA3` | ヒント、注意書き |
| 刃文の焼刃 | `#9EA2A6` | シェーダー内のみ |
| 柄の朴 | `#C9B99A` | 唯一の暖色。刃の柄だけ |

## Typography
- 見出し: **Zen Old Mincho** 900。h1「一閃」`clamp(132px, 24vw, 340px)`、`line-height .95`、`letter-spacing .04em`、中央寄せ。mobile `clamp(120px, 36vw, 200px)`。h2 `clamp(32px, 3.8vw, 52px)`、`line-height 1.15`、`letter-spacing -.01em`、`max-width 16em`。
- 本文: **Noto Sans JP** 300。16px / 1.9 / `.02em`。説明文 `.lede` 17px(mobile 15px)、`--ink2`、`max-width 30em`。
- ラベル: **IBM Plex Mono** 400、11px、`letter-spacing .1〜.2em`。番号「01 / HAMON」とヒントとチップとフッターに使う。ブランド「ISSEN」は Zen Old Mincho 18px `.28em`。
- 英語はラベルとブランドだけ。本文は日本語。

## Spacing & Layout
- 基本単位 8px。横パディング `--pad: 48px`(mobile 20px)。最大幅 1440px。
- hero / 刃文 / 墨は `100svh`(min 600px)。和紙は `90svh`(mobile 80svh)。注文の区画は `padding clamp(120px, 16vw, 220px) 0`。
- 見出しブロック `.head`: 縦 flex、gap 18px、左寄せ。刃文と墨では画面**下**に置き、和紙では**上**に置く(画像の帯と交差しないように)。
- hero の文字: 左上にブランド名と右上にチップを置き、中央に h1を置く。左下に説明文と右下にヒントを置く。mobile では説明とヒントを縦に積む。
- Breakpoint は 820px の 1 つ。

## Motion
- rAF 1 本、IntersectionObserver(rootMargin 80px)で可視区画のみ更新、`dt` 上限 1/30 秒。
- 刃: ポインタ追従 `dt·4` の一次遅れ。無操作時 `tx = 0.35 sin 0.3t`、`ty = 0.25 sin 0.23t`。
- 斬撃: 上記 §1。斬撃中は次の斬撃を受け付けない。
- 刃文の光: `dt·5` で追従。無操作時は `(0.55+0.25 sin 0.35t, 0.5+0.18 sin 0.27t)` を周回。
- 墨: 時間刻み上限 1/50 秒。
- reduced-motion: 刃は 1 フレーム描いて静止、刃文は固定光、墨は初期の筆線のみ、和紙は全面表示。斬撃は CSS transition の 1 回だけ。
- WebGL が無い端末: hero は文字だけ(斬撃は DOM なので動く)、各区画に 1 行の注意書き。

## Components
- **hero**: `.layer`(canvas + 文字)の上に `.flash`(墨色 2px の線)と `.curtain`(紙色の幕)。`touch-action: pan-y` なので縦スワイプはスクロール、横ドラッグが斬撃。
- **stage**: 全画面 canvas + 下部の見出しブロック。canvas も `pan-y`。
- **reveal**: `img` に clip-path、上部に見出しブロック。
- **button**: ピル型、`--ink` 塗りに紙色の文字、`padding 16px 30px`、15px、ホバーで `--ink2`。矢印は 16px inline SVG。フォーカスは 2px `--ink` アウトライン。
- **chip**: 1px `--ink` 枠のピル、mono 11px 大文字。
- **footer**: 1px 上罫線、mono 11px、左「VALE / EDGE 004」右「ISSEN」。

## Do / Don't
**Do**
- 1 画面に置くものは「文字 1 組 + 鋼 1 本」まで。残りは紙。
- 鋼は中間調の灰で描き、白は刃先の線と沸の点にだけ使う。
- 斬撃の線は必ず画面の端から端まで通す(短い線だと破片の形が読めない)。
- 墨は黒 1 色。薄墨はブラーの帯でつくる。
- 画面外の canvas は止める。

**Don't**
- 紙にクリーム色や赤茶の差し色を足さない。暖色は柄の朴だけ。
- 刃を白く飛ばさない(紙と同化する)。
- 影やグローで刃を浮かせない。反射で見せる。
- 墨を青や紫に転ばせない。
- 斬撃に効果音風の文字や擬音を出さない。

## References
- **HEY**(stock/refero/md/hey.md): 「紙の上に置かれた物」として画面を組む考え方と、1 つの巨大な見出し + 小さな手書き風の割り込み(ここでは斬撃の線)という構成を借りた。丸いパネルと紫〜鮭色のグラデは使わず、紙は白 1 枚、色は墨と鋼だけに絞った。書体は Really Sans の代わりに Zen Old Mincho 900。
- **Riverside**(stock/refero/md/riverside.md): 白とほぼ黒の単色系に 1 つだけ色を置く規律を借りた。その「1 つの色」を紫のボタンの代わりに「柄の朴の暖色」に置き換え、ボタンは墨で塗った。白い帯と暗い帯を交互に置く段取りは、紙 / 鋼の面 / 紙 / 和紙という明度の交互に読み替えた。Inter の代わりに Noto Sans JP 300。