# 液体のワイプ — Style Reference > 黒い更新履歴の画面を、淡いレモン色の液体が左から波打ちながら覆い、一語だけの大きな告知画面に変わる。境界は明るい縁をもつ。 **Theme:** dark **Series:** PARTS 072 **World:** 更新履歴を要約して配るサービス「RELAY」。A は管理画面、B は告知ポスター。 ## Concept 遷移パーツ。ノイズを足した x 座標のしきい値で2画面を分ける。境界は液面のように波打ち、ワイプ方向に舌を伸ばす。境界には明るい縁(メニスカス)、内側に細い暗い線、手前に短い影、わずかな屈折を置いて「面の切り替え」を「液体が流れ込む」に見せる。 初期表示は進み具合 0.5。無操作 2.6 秒で 0 と 1 の間を自動往復。カーソルの横位置で境界を直接動かせる。 A は近黒(#08090A)にヘアラインのカードと白い文字、B は淡いレモン(#FFFFA7)に黒の巨大な一語。色はレモン1色。 ## Signature Technique WebGL1、全画面クアッド1枚。2画面は 2D キャンバスで描いてテクスチャにする。 - 場 `field(uv) = uv.x + (fbm(q) - 0.5)*WAVE + (fbm(2.3q) - 0.5)*WAVE*0.3`、`q = (uv.x*1.6, uv.y*4.2)`。x 方向に引き伸ばしたノイズで、境界の舌がワイプ方向に伸びる。時間項 `(0.35t, 0.2t)` で液面がゆっくり動く。 - しきい値 `thr = p*(1 + 1.2*WAVE) - 0.6*WAVE`。p=0 で B が画面外、p=1 で A が画面外。 - `dd = field - thr`。B の割合 `inB = 1 - smoothstep(-SOFT, SOFT, dd)`(SOFT = 0.012)。 - 勾配 `g = ∇field`(中心差分 0.004)を正規化し、A 側の境界付近で `uv - g*REFRACT`(0.012)、B 側で半分の量だけ屈折。 - 縁: `rim = smoothstep(EDGE, 0, |dd|)`(EDGE = 0.05)。A 側に `lemon * rim * 0.9 * smoothstep(EDGE,0,dd)^1.5` を加算、B の内側 `dd ≈ -EDGE/4` に幅 0.012 の暗い線(×0.65)、A 側の手前に `1 - 0.22*smoothstep(1.3*EDGE, 0, dd)` の影。 - 1.5/255 のディザ。 ## Color Palette | Token | HEX | 役割 | |---|---|---| | onyx | #08090A | A の地 | | carbon | #141516 | A のカード面 | | salt | #F2F2F2 | A の文字 | | ghost | rgba(242,242,242,.14) | A のヘアライン | | pale-lemon | #FFFFA7 | B の地、境界の光 | | ink | #000000 | B の文字・ピル | | meniscus | rgb(255,255,166) | 境界の縁(加算) | ## Typography - Zen Kaku Gothic New。A の見出し 500 `min(W*0.062, H*0.1)` px、B の一語は 700 `min(W*0.3, H*0.5)` px を横 92% に圧縮(ポスターの詰まり)。 - ブランド「RELAY」500 14px 相当、カードの題 500 18px 相当、ピルの文字 500 13〜14px 相当。本文 400 16px(A)/ 17px(B)相当、ラベルは IBM Plex Mono 400 12px 相当(u = min(W/1440, H/900) で拡縮、下限あり)。 - HUD は 11px(640px 以下 10px)、letter-spacing .14em、`mix-blend-mode: difference`(黒でもレモンでも読める)。 ## Spacing & Layout - 余白 `pad = clamp(20, 5vw, 72)`。A: 上にブランドとピル、見出し、3列のヘアラインカード(角丸 5px 相当、間隔 12px 相当。幅が高さの 0.9 倍以下は1列)。B: 左寄せの一語と1行、輪郭だけのピル。 - HUD は右下 18px / 16px(640px 以下は左下 16px)。 ## Motion - 自動往復: 初回 4.0 秒静止 → 2.4 秒で 0 へ(cubic in-out。0.5 以上なら 0、未満なら 1 へ向かう)→ 1.4 秒静止 → 2.4 秒で 1 へ → … 。 - 液面の揺れ: ノイズの時間は `dt × FLOW / 0.12` で進む(既定 0.12 で実時間と等速)。 - カーソル: `p = x/width` を lerp 0.18 で追従。2.6 秒無操作で、0.2 秒止まってから自動に戻る(現在位置から遠い端へ)。 - reduced-motion: 時間を 2.0 に固定、自動往復なし、カーソルで直接変わる。 - WebGL なし: 2D キャンバスで正弦の波線でクリップした静止合成。 ## Components - 画面 A: ブランド「RELAY」、モノスペースのラベル、輪郭のピル「購読する」、見出し、3枚のカード(ラベル・題・薄い罫)。 - 画面 B: ブランドとラベルの下に一語「送る。」と1行。輪郭のピル「試す」。 - HUD: `VALE / PARTS 072 / 液体のワイプ` と操作説明。 ## Do / Don't - Do: 境界の縁を明るく、内側に暗い線を1本。これだけで液体に見える。 - Do: ノイズはワイプ方向に引き伸ばす(等方だと紙の破れに見える)。 - Do: 2画面の明度差を大きく取る(黒とレモン)。境界が主役になる。 - Don't: 屈折を 0.03 以上にしない(文字が崩れて読めない)。 - Don't: 影を広くしない(A 側が真っ黒になって何の画面か分からなくなった)。 - Don't: レモン以外の有彩色を足さない。 ## References - Changelog(stock/refero/md/changelog.md): 「近黒の地、1px のヘアライン、塗らない輪郭ピル、無彩色で機械のような密度」を抽象化して A にした。 - HeroKit(stock/refero/md/herokit.md): 「黒と淡いレモンだけの語彙、100px 超の詰まった見出しのポスター感」を抽象化して B にした。製品の 3D レンダリングは使わず、一語の大きさで代える。 ## Usage 1. ``、`.hud`、`