# 砂 — Style Reference
> 紙の上の大きな一文字に、色の違う砂が積もっていく

**Theme:** light  **Series:** PLAY 010  **World:** 落ちる砂のシミュレーション(注いで積もり、崩れる)

## Concept
開いた瞬間に伝えること: 「砂が文字の上に積もっている」。クリーム色の紙の上に太い一文字「砂」を置き、上の3つの口から砂色・黄土・赤土の砂が落ちて、横画の上に山を作る。押した場所に選んだ色の砂を注げる。「文字を消す」で文字のセルが消え、乗っていた砂が崩れて床に溜まる。下のセクションでは同じセルオートマトンを 3 つの小さな器に入れ、安息角の違い、描いた線でせき止める様子、色を切り替えて作る地層を見せる。UI は暗いピルと細い罫だけにして、色は砂に任せる。

## Signature Technique
- 落下砂のセルオートマトン(CPU)。格子は Uint8Array を LUMINANCE_ALPHA の 2 ch で持ち、[種類, 明るさ] を 1 セルに記録する。種類: 0 空、1 壁、2〜6 砂(砂色 / 黄土 / 赤土 / 苔 / 若草)。ヒーローのセル幅は 2px(1440×900 で 720×450 セル)、パネルは 2.5px。パネルの先行計算は 01 が 900 ステップ(口ごとに 2 粒)、02 が 1100 ステップ(3 粒、幅 ±2)、03 が 2600 ステップ(3 粒)で、開いた時点で山と地層が器を埋めている。粒を細かくした分、自動の口は 2 ステップに 1 回 3 粒(幅 ±2 セル)を落とし、1 フレームに 5 ステップ(モバイル 4)進める。先行計算は 520 × 2.25 × 1.7 ステップ。
- 1 ステップ: 下の行から上へ走査、行内の走査方向は毎フレーム反転(偏りを消す)。砂は「真下が空なら落ちる」→「左右どちらかの横と斜め下が両方空なら斜めに滑る」。滑る前に `Math.random() > FLOW[type]` で止まる判定を入れ、FLOW が安息角になる: 砂色 0.95 / 黄土 0.7 / 赤土 0.45 / 苔 0.25 / 若草 0.6。下から走査するので 1 粒が 1 ステップで 2 回動くことはない。
- ヒーローは 1 フレーム 3 ステップ、パネルは 2 ステップ。読み込み時は fonts.ready 後に 520 ステップ(モバイル 420)を先に回し、最初の 1 枚から砂が積もった状態にする。
- 文字は障害物: 格子と同じ解像度の canvas に「砂」(Zen Kaku Gothic New 900、高さの 60%)を描き、α>110 のセルを壁にする。マスクを保持し、「文字を戻す」で同じ位置を壁に戻す。「文字を消す」は壁セルを空にするだけで、崩れは通常のルールで起きる。
- 描画は WebGL1 のフラグメントシェーダ。格子テクスチャを NEAREST でサンプルし、種類 → パレット、明るさ ch で粒ごとに 0.86〜1.12 倍、真上が空なら +0.08(上面が明るく見える)。テクスチャは毎フレーム texSubImage2D で更新。
- 注ぐ: ポインタ位置の列に 1 フレーム 6 × k² 粒、幅 ±3k セル(k = 2.25、モバイル 1.5)。モバイル(touch)はタップで 260 × k² 粒を一度に落とす(touch-action: pan-y でスクロールは殺さない)。自動の 3 口は最初のクリックで止まる。
- 粒数の表示は実際の砂セル数。
- 01 安息角: 4 口から 4 種類を 1 粒ずつ、520 ステップ先行。山の角度の差だけを見せる。
- 02 障害物: ポインタの軌跡を半径 1 セルの壁として線で結ぶ(Bresenham 風の線形補間)。中央の口から砂色を注ぎ続ける。初期状態に斜めの線を 2 本置く。
- 03 地層: 壁で V 字の器を作り、70 ステップごとに種類と口の位置を切り替える。1100 ステップ先行して層ができた状態で表示。粒数が格子の 30% で注ぐのを止める。
- IntersectionObserver で画面内のシミュレーションだけ進め、document.hidden で停止。prefers-reduced-motion では先行計算の結果を静止表示し、操作から 4 秒間だけ動かす。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --paper | #f6f1e8 | ページ地、空セル |
| --linen | #fdfcf7 | チップの台、パネル地、ゴーストボタン |
| --ink | #14150f | 文字(壁セル)と本文と塗りピル。緑を含む黒 |
| --line | #e3ded2 | ヘアライン、パネル枠 |
| --muted | #6f6d62 | ラベル、補足文 |
| --sand | #d9c7a3 | 砂色(FLOW 0.95) |
| --ochre | #c99a4b | 黄土(0.7) |
| --terra | #d7744f | 赤土(0.45) |
| --olive | #6f7a3e | 苔(0.25) |
| --lime | #dfe96f | 若草(0.6)。UI には使わず砂の 1 色としてだけ |

## Typography
- 日本語本文・UI: Zen Kaku Gothic New 400 / 15px / 1.9。ラベルは 500 / 12px / 字間 0.16em / 大文字(Latin)。
- 見出し: Zen Old Mincho 400、clamp(30px, 3.6vw, 50px) / 1.25 / 字間 −0.02em。締めの 1 文と粒数も同じ書体。
- 壁になる一文字だけ Zen Kaku Gothic New 900(太い横画に砂が乗るため)。
- 階層は書体の切り替え(明朝=見出し、ゴシック=本文)と色で作る。太字は使わない。

## Spacing & Layout
- 最大幅 1200px、ガター clamp(20px, 4vw, 56px)。セクション上下 clamp(88px, 13vh, 150px)、上端にヘアライン。
- ヒーロー 100svh(最小 600px)。上部 clamp(68px, 9vh, 96px) に罫、下部 clamp(24px, 4.5vh, 48px) に HUD(左: ラベル + 1 文、右: 色チップ + ピル 2 個)。720px 以下で HUD は縦積み。
- 2 カラム grid 5fr/7fr、gap clamp(32px, 6vw, 96px)。860px 以下で 1 カラム。
- パネル: 16/10(モバイル 4/5)、角丸 18px、1px ヘアライン、影なし。右上にゴーストピル、左上に小ラベル。
- チップ: 24px の円、選択中は 2px の黒い輪。ピル: 10px × 18px、999px。

## Motion
- 砂の速度: ヒーロー 5 セル/フレーム(モバイル 4)、パネル 3 セル/フレーム。粒は 1 セル単位で動くので粒状感が残る。
- 自動の口は粒数が格子の 18% に達すると止まる。パネルは 30〜35%。
- ボタンの hover は translateY(−1px)、チップは scale 1.08、0.15s。
- rAF は 1 本。見えているシミュレーションだけ進める。
- prefers-reduced-motion: 先行計算の静止画を表示し、クリック・ドラッグ・ボタン操作から 4 秒だけシミュレーションを進める。遷移なし。
- WebGL 不可: `.no-webgl` で一文字「砂」を HTML(900 / clamp(120px, 36vw, 420px))として表示。

## Components
- hero: 全画面 canvas + 罫 + HUD。h1 は視覚的に隠す。
- meter: 右上固定、`Grains` ラベルと粒数(明朝、tabular)。
- chips: 砂の色の選択。role="group"、aria-pressed。
- pill: 塗り(ink)とゴースト(linen + 枠)。塗りは「文字を消す / 戻す」と「はじめから」だけ。
- section: ヘアライン + ラベル(番号 / 英語)+ h2 + 1〜2 文(+凡例)。右にパネル。
- panel: Sand クラスの 1 インスタンス。
- footer: ヘアライン上、左に `VALE / PLAY 010`、右に作品名。

## Do / Don't
Do
- 色は砂だけに持たせ、UI は黒と紙色に留める。
- 文字は 1 文字。横画が太い書体を選ぶ。
- 最初の 1 枚から砂が積もっている状態にする(先行計算)。
- 粒を 1 セル単位で動かし、粒の明るさを 1 粒ずつ変える。
- 安息角の差は数値(FLOW)で凡例に書く。

Don't
- 砂にぼかしや発光を足さない。
- 紫やグラデーションを使わない。
- 文字を複数置かない。文章を砂の下に置かない。
- 粒を小さくしすぎない(3px 未満にしない)。
- 自動で注ぎ続けない。上限で止める。

## References
- Kindsight(Sunlit field journal at dusk): 「クリームの紙、緑を含む黒、砂色の区切り、1 色だけの差し色」という土の色相環を取り入れ、砂の 5 色(砂色・黄土・赤土・苔・若草)に展開した。深いオリーブのヒーロー面は使わず、紙の上に砂を置いた。
- Cohere(Editorial monograph on cream paper): 「UI は単色、色は画の中だけ」「暗いピル CTA、ヘアライン枠、大きめの角丸カード」という抑制を取り入れた。トライカラーの写真ウォッシュは使わず、色を砂そのものに限定した。