# 水に落ちる墨 — Style Reference > 白い紙色の面に、クリックした場所から墨が一滴、丸く広がる。縁から毛細管の細い筋が伸び、外側に薄墨の輪が残る。 **Theme:** light **Series:** PARTS 042 **World:** 松の煤と膠だけで墨を作る工房。 ## Concept 全画面の背景。主役は一滴の形。丸い芯が √t で広がり、縁から毛細管のにじみが細い筋になって伸びる。その墨をGPUの流体ソルバに載せ、カーソルでかき回せるようにした。 色は墨1色。濃い所は黒、薄い所は青灰。カーソルを動かすと速度だけが入り、墨をかき回せる。 待機中は数秒おきに文字の外側へ一滴落ちる。文字は墨より濃い黒の明朝1本。 ## Signature Technique WebGL2(なければ WebGL1 + half float)の2Dオイラー流体。PARTS 041(煙の軌跡)と同じソルバで、浮力を 0 にし拡散を足した。 - 場: 速度 RG16F(短辺 256、mobile 128)、墨 R16F(短辺 900、mobile 560)。筋を1〜2pxで残すため墨は高めにする。 - 1ステップ: curl → vorticity(CURL 1.6) → forces(水の揺らぎ NOISE .22、浮力なし) → divergence → pressure(Jacobi 24回) → gradient → advection(速度 1.4 減衰、墨 .05 減衰) → diffuse(`DIFFUSE .008`)。渦と揺らぎは丸が崩れない弱さに抑える。旧版は CURL 8 で花弁状に割れていた。 - 一滴は2段。落ちた瞬間に burst で小さな放射状の速度(DROP_FORCE 40)だけ入れ、墨は grow シェーダーで広がる間に毎フレーム注ぐ。 - grow(1滴あたり5秒、実時間で進める): ```js k = 1 - exp(-age / DROP_GROW) // DROP_GROW .55 R = size * sqrt(k) // size = DROP_SIZE(.085 / mobile .062) × 0.85〜1.15 amount = DROP_DYE/1.3 * exp(-age/1.3) * dt // DROP_DYE 1.55 reach = FIBER_REACH * (1 - exp(-age/1.1)) // 筋は芯より遅れて伸びる ``` ```glsl float fr = R*(1. + .014*sin(a*19.+seed) + .01*sin(a*37.-seed*1.7) + .006*sin(a*71.+seed*3.1)); // ほぼ真円 float disk = 1. - smoothstep(fr - max(2.*px, dR*1.5), fr + .8*px, r); // 伸びた幅だけぼかして段を消す float core = .62 + .55*exp(-r*r/(R*R*.18)) + .5*smoothstep(fr*.72, fr*.97, r); // 落ちた中心と縁が濃く、間は少し薄い(縁に墨が寄る) // 筋: 角度を N 本の区画に分け、区画ごとに角度・長さ L(pow(rand,3) で長短)・太さを乱数で決める。 // 線までの距離 d = r*|sin(Δa)|、exp(-d²/w²) を先細り(t=(r-fr)/L)で掛ける。隣の区画も調べる。 float fb = max(fibers(N=38, 長さ1, 太さ.9px), .7*fibers(N=87, 長さ.45, 太さ.6px)); float halo = (1. - smoothstep(hr-6px, hr+2px, r)) * .16; // hr = 1.16R、薄墨の輪 dye += max(max(disk*core, halo), fb*1.15) * amount; ``` - 開いた時点で1滴目を 60 回(0.05 秒刻み)注いで広がりきった状態にし、2滴目も 8 回(0.4 秒ぶん)注いで広がり始めた所まで進める。描画の遅い端末でも、3秒後の静止画に「広がった丸」と「広がる途中」が必ず並ぶ。実行中は2滴目だけ 1.1 秒後、3滴目以降は 4.5 秒おき。同時に追う滴は最大6つ。 - かき回し: pointermove ごとに前フレームとの間を最大6点で補間し、速度 `Δ*SPLAT_FORCE(900)` だけ注入(墨は 0)。半径 .18。 - 表示: 墨の粒子のむら `grain = .55·vn(px·.09) + .3·vn(px·.23) + .15·vn(px·.6)`(静止した value noise、px は墨テクスチャの画素座標)を作り、`a = 1 - exp(-d·(1.55 + .7·grain))` に勾配 `|∇d|·.6`(1.5 texel 差分)を足して縁を締め、上限 .97。濃い所も真っ黒に潰れず、中心・中間・縁の3段の濃淡と細かいむらが残る。`ink = mix(INK+(.25,.25,.27), INK, a)`(薄墨は青灰、濃墨は黒)。周辺減光 12%、1.6/255 のディザ。 - 待機: `IDLE_EVERY 4.5` 秒おきに4か所(desktop は左右の余白 x .15〜.17 / .83〜.85、mobile は上下の余白)を順に回り、±.03 の乱れで落とす。 - 解像度: canvas は `min(dpr, 2)`(mobile 1.5)。 ## Color Palette | Token | HEX | 役割 | |---|---|---| | --void(紙) | #F1F2F3 | 背景(シェーダー BG も同値) | | INK | #131518 | 墨の芯 | | ink-thin | #53555D | 薄墨(INK + (.25, .25, .27)、青に寄せる) | | --bone(墨色) | #131518 | 見出し・ロゴ・ボタン地 | | lead | #45484E | 本文 | | --ash | #7C7F85 | eyebrow・フッター | | cta-text | #F1F2F3 | ボタン文字 | ## Typography - 見出し: Shippori Mincho 500、`clamp(38px, 6.2vw, 86px)`、line-height 1.25、letter-spacing .03em、中央揃え2行。mobile `clamp(34px, 9.4vw, 48px)`。 - 本文・ラベル: Zen Kaku Gothic New。本文 400、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 30em(mobile 24em、2行)。 - eyebrow: 12px、letter-spacing .26em(mobile .18em)。ロゴ: weight 500 / 12px / .24em。 - ボタン: weight 500 / 13px / letter-spacing .1em。 ## Spacing & Layout - 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文ブロックは中央、最大幅 980px。 - 左右余白 `clamp(20px, 5vw, 72px)`、上 26px、下 22px(+safe-area)。 - eyebrow → h1 28px、h1 → lead 26px、lead → CTA 36px。 - 待機の滴下位置は文字の外側: desktop x .15〜.17 / .83〜.85、mobile y .2〜.22 / .86〜.87。筋の先まで含めて半径およそ 2R あるので、文字から 2R 以上離す。 ## Motion - 1フレーム1ステップ(dt 最大 1/60)。requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で停止。 - 一滴は約1.5秒で丸がほぼ広がりきり、筋は約3秒かけて伸びる。広がる時間は実時間で進むので、描画が遅い端末でも同じ見え方になる。その後は弱い渦と揺らぎでゆっくり形が変わる。墨の減衰 .05 で数十秒残る。 - `prefers-reduced-motion`: 2滴を 200+150 ステップ計算して1枚だけ描く。フッター文言を差し替える。 - WebGL(half float)非対応: `.still` の radial-gradient 2つで墨の染みを置く。 ## Components - hero: 全画面。上に工房名と業種、中央に eyebrow / h1 / lead / CTA。 - button(.cta): 高さ44px、pill、墨色地に紙色の文字。hover で黒くなり1px浮く。focus-visible は墨色のリング。クリックは `a, button` の上では滴下しない。 - footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 042 / 水に落ちる墨`。 ## Do / Don't - Do: 墨は1色。薄墨の青灰は INK に (+.25, +.25, +.27) した1段だけ。 - Do: 紙は白に近い灰(#F1F2F3)。純白だと墨の薄い所が飛ぶ。 - Do: 一滴はほぼ真円に。不揃いさは縁の細かい揺れ(振幅1〜2%)と毛細管の筋で出す。 - Do: 丸の中に階調を残す。中心と縁が濃く、間がやや薄い。全面を黒で塗ると穴に見える。 - Don't: 浮力を入れない。墨が上に流れて水に見えない。 - Don't: CURL を 4 以上にしない。丸が花弁状に割れる。 - Don't: 背景にテクスチャや罫を足さない。紙の白が墨を立たせる。 ## References - Desktop.fm: canvas mist(#f1f2f3)に carbon black の文字という2色の配分を抽象化。UI のモックアップは置かず、面を墨に明け渡した。 - Co2: paper white と editorial ink の字組みを抽象化。チップの淡い色は使わず、色は墨の濃淡だけにした。 ## Usage 1. ``、`.still`、`#hint` と `