# 竜宮 — Style Reference
> 藍の和紙の水に金箔が流れ、外の時計だけが速く回る

**Theme:** dark  **Series:** FABLE 010  **World:** 日本昔話『浦島太郎』。海の底の竜宮。外の時間だけが速く過ぎ、玉手箱の煙とともに三百年が追いつく。

## Concept
海の底で読む絵本。ページ全体が藍の和紙の水で、GPU の流体ソルバが起こす潮に金箔の小片が乗って沈む。見出し「竜宮」は金箔の写真を文字に切り抜き、カーソルの位置で光の帯が走る。右下の時計は実際の現在時刻から数え、下へ進むほど速く回る(三百年まで)。終盤の玉手箱を開けると、同じ流体に煙を注ぎ、ページが古びる(セピア、粒状、文字の字間が開き薄れる)。
色は藍と金だけ。赤は玉手箱の紐の一本。最後は褪せた色になる。
開いた瞬間に伝えること: 「浦島太郎の絵本で、ここは海の底。時間が速い」。

## Signature Technique
1. **水(WebGL2、Navier-Stokes の簡約ソルバ)**
   - 速度場 RG16F(長辺 224、モバイル 128)、染料 RGBA16F(長辺 512、モバイル 256)。縦横比に合わせてグリッドを作り直す。
   - 1 フレームの手順: curl → 渦度強制(係数 12) → 外力(煙の浮力 160 × G、`noise(uv*3 + t)` によるうねり 3 + 煙中 40) → 発散 → 圧力の Jacobi 20 回(モバイル 12、前フレームの圧力 × .8 から開始) → 勾配差し引き → 速度の移流(減衰 .35) → 染料の移流(減衰 .55)。
   - 染料: R = 潮(藍を明るくする)、G = 煙(白)。表示は `(.22,.36,.62)*R + (.92,.88,.8)*G*1.1` を `mix-blend-mode: screen` で和紙の上に重ねる。老化係数 uAge でセピアへ寄せる。
   - 入力: 読み込み時に 8 つの上昇流、以後 .5〜1.1s ごとに下 25% からの湧き上がり(半径 .0022、R .2)。pointermove は移動ベクトル × 1800 を半径 .0012 で注入。スクロールは移動量 Δy を `min(1, |Δy|/300)` にして ±900 の上下流を注ぐ(潮はめくる速さで流れる)。
2. **金箔(GPU 粒子)**
   - 位置テクスチャ RGBA16F 44×44 = 1936 粒(モバイル 28×28)。`xy` 位置、`z` 回転角、`w` 回転速度。
   - 更新シェーダー: 速度場をサンプルして `v*texel*dt*.95` 移動、沈降 .018/s × 粒ごとの係数 .6〜1.2、微小なゆらぎ、下端を抜けたら上端のランダムな x に戻す。
   - 描画: `gl_VertexID` で位置を `texelFetch`、先頭 576 粒(モバイル 256)だけ `gl.POINTS`(7px × DPR、粒ごとに .5〜1.4 倍)。フラグメントは回転した長方形 SDF、傾き `tilt = .2 + .8|sin(1.3θ + id)|` で見かけの幅を変え、`glint = |sin(2θ + .8t + .37id)|^14` で (.62,.44,.14)→(1,.93,.66) の金に光らせる。加算合成。
   - 金箔の流線(潮の区画の主役): 同じ粒を `gl.LINES` でもう一度描く。頂点シェーダーで粒ごとに 2 頂点、片方を `p - vel*texel*0.06`(長さ上限 0.12)へ引き、流れの向きに伸びた線分にする。線分は画面の 0.6 倍(モバイル 0.75)の RGBA8 トレイルバッファへ加算し、毎フレーム `max(prev*.945 - .006, 0)` で薄める。直近 30 フレームほどが残り、金の細い流線が水の速度場をそのまま描く。色は粒ごとに (.75,.55,.2)〜(1,.9,.6)、先端ほど明るく、速度 `clamp(|v|*60)` で強さを変える。
   - 潮: 「潮」の区画が画面中央に近いほど `tideK` が 1 に近づく(`1.25 - |中心差|/(0.75H)`)。force シェーダーで、ゆっくり動く S 字 `yc = .5 + .16 sin(6x + .12t)`(横長画面では x .42〜.78 で `-.24` 沈めて本文の下をくぐらせる)に沿った幅 .13 のガウス帯へ、接線方向の体積力 `70·tideK` を毎ステップ加える。点の splat と違って放射状に散らず、一本の川として流れる。流線の強さは `0.3 + 1.5·tideK`。ほかの区画では流線は控えめに残る。reduced-motion では潮を 160 ステップ進め、流線を 24 フレーム焼いて止める。
3. **金箔の文字**: `background-image: linear-gradient(--ga, 透明 42%, 乳白 .9 50%, 透明 58%), url(gold.webp)` を `background-clip: text`。`--ga` は `100 + x*60 deg`、`--gp` はポインタ位置(% 指定)に 0.06/フレームで追従。タッチ端末はリサージュで漂う。
4. **外の時計**: `t = Date.now() + E(p) + B`。`p` は「時」区画(画面の 50% 手前)から玉手箱区画(+20%)までのスクロール進行度、`E(p) = 300年 × p³` を 2.5/s の一次遅れで追従。玉手箱を開くと `B` が 3s の easeOutCubic で 300年まで増える。表示は `YYYY.MM.DD HH:MM:SS`(hero)、`YYYY年M月D日` + `HH:MM:SS` + 経過(時間/日/年か月)の大きな表示(時の区画)。
5. **老化**: `body.aged` で `main{filter: sepia(.6) saturate(.42) contrast(.9) brightness(.82)}` 7s、和紙は `brightness(.42) saturate(.35) sepia(.5)`、見出し `letter-spacing .2em; opacity .78`、本文 `.06em; .72`。粒状は 200×120 の 2D canvas ノイズを `mix-blend-mode: overlay` opacity .32 で重ね、2 フレームごとに描き直す。煙は開封後 4s 間、箱の上から .03s ごとに注入(G .4、上向き 160、半径 .0012)。

```glsl
// 金箔の 1 粒(フラグメント抜粋)
vec2 q=gl_PointCoord*2.-1.; q=mat2(cos(a),-sin(a),sin(a),cos(a))*q;
float tilt=.2+.8*abs(sin(a*1.3+id));
vec2 d=abs(q)-vec2(.72,.42*tilt); float m=1.-smoothstep(-.12,.14,max(d.x,d.y));
float glint=pow(abs(sin(a*2.+t*.8+id*.37)),14.);
vec3 col=mix(vec3(.62,.44,.14),vec3(1.,.93,.66),glint)*(.45+.55*tilt);
```

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --bg | #0b1526 | 画面全体の地(藍) |
| --ink | #07101c | ボタン反転時の文字色、周辺減光 |
| --fg | #e9e4d6 | 見出しと本文の生成り |
| --sub | #b9b7ac | サブ本文 |
| --mute | #8a93a3 | ラベル、脚注、時計の小表示 |
| --gold | #d9b65c | 区画ラベルとボタン枠と箱の縁 |
| --gold2 | #f3dd9c | 時計の時刻、focus ring |
| current | rgb(.22,.36,.62) ≒ #385C9E | 潮(シェーダー内の線形値、screen 合成) |
| smoke | rgb(.92,.88,.8) ≒ #EBE0CC | 煙(シェーダー内の線形値 ×1.1) |
| cord | #a4342e | 玉手箱の紐。赤はここだけ |

## Typography
- 見出し: Zen Antique 400。h1 `clamp(96px, 17vw, 260px)` letter-spacing .14em(金箔の切り抜き)、h2 `clamp(28px, 3.4vw, 46px)` line-height 1.4、letter-spacing .06em。老化後は .2em。
- 本文: Zen Kaku Gothic New 300、`clamp(14px, 1.1vw, 16px)`、line-height 1.9、最大幅 30em。脚注 12.5px。
- 時計・ラベル: IBM Plex Mono 300/400、tabular-nums、letter-spacing .06〜.2em。日付 `clamp(28px, 4.6vw, 64px)`、時刻 `clamp(22px, 3vw, 40px)` を金で。
- 区画ラベル(時/潮/玉手箱): Zen Antique 12px、letter-spacing .3em、金。
- 文字には `text-shadow: 0 1px 16px rgba(7,16,28,.7)` を敷き、和紙の繊維の上でも読めるようにする。

## Spacing & Layout
- 横余白 `--gx: clamp(20px, 5.5vw, 84px)`。区画は `min-height: 100svh`、上下 `clamp(72px, 12vh, 140px)`、内容幅 1200px、文字ブロック 560px。
- hero は 2 行グリッド(中央の縦積み / 脚注行)。中央はラベル、h1、本文を中央揃え。脚注は左に操作説明、右に小さな時計。
- 時は左寄せ、潮は右寄せ、玉手箱は 2 列(文字 / 箱 `min(100%, 360px)` の正方形ステージ)。760px 未満で縦積み。
- 締めは `min-height: 50svh` 中央の 1 行。footer は 1px 罫線と 2 ラベル。
- 和紙の `<img>` は fixed、高さ 100%+600px、スクロール × .12 の視差。

## Motion
- rAF は 1 本。流体・時計・金箔の光・粒状を同じループで更新。`visibilitychange` で停止。
- 潮は常に動く(湧き上がりと noise のうねり)。スクロールとカーソルは注入のみで、ループ自体は変えない。
- 玉手箱: 蓋は `rotateX(-108deg)` 2.2s `cubic-bezier(.6,0,.2,1)`、紐は 1.5s で消える。開封 .9s 後に老化開始、7s で進む。時計は 3s で三百年進む。締めの 1 行が「三百年が、過ぎていました。」に変わる。
- `prefers-reduced-motion: reduce`: 流体は読み込み時に 40 ステップ進めて 1 枚描画、金箔の光は固定、時計はスクロール位置に直結(遅れなし)、老化の transition は無し。
- WebGL2 が無い場合: 水の canvas を消し、和紙だけを背景に残し、hero に 1 行の説明を出す。

## Components
- hero: 和紙 + 水 canvas、中央に英字ラベル / 金箔の h1 / 本文 2 文、左下に操作説明、右下に「外の時刻」。
- section: 区画ラベル、h2(2 行に手動改行)、サブ 1〜2 文。時の区画だけ大きな時計。
- box: 蓋(3D 回転)、胴(漆の勾配と金の縁)、赤い紐。`open` で蓋が開く。
- button: 角丸 999px、1px 金枠、hover で金に反転、focus-visible は淡金 2px、押した後は「開きました」で無効化。
- footer: `VALE / FABLE 010` と `設計と実装: VALE`。

## Do / Don't
- Do: 金は文字と箔と縁だけ。面に塗ると安っぽくなる。
- Do: 金箔は沈ませる。浮くだけだと装飾の粒子に見える。
- Do: 潮の区画では文字を片側に寄せ、反対側を金の流線に明け渡す。
- Do: 時計は実時刻から数える。架空の日付を置かない。
- Do: 煙は箱の位置から注ぐ。画面のどこからでも出すと意味が消える。
- Don't: 和紙を明るくしない(brightness .62 以下)。明るいと水に見えない。
- Don't: 圧力反復を 10 回未満にしない。流れが潰れて染みになる。
- Don't: 老化を一瞬で切り替えない。7s かけて進むから「年月」になる。

## References
- HeroKit: 「黒い余白に 1 色だけ、巨大な見出しがポスターになる」構成を借りた。黒を藍の和紙に、淡黄の 1 色を金箔の素材色に置き換え、3D レンダーの代わりに流体と金箔を置いた。
- Promly: 「近黒の地に発光する 1 色を機能的に置く」配色の考え方を借りた。紫の地と青のボタンは使わず、藍の地に金をラベル・時計・縁へ限定した。角丸の写真コラージュは使わない。