# 波の遷移 — Style Reference > 白い紙を、インク色の波が下から覆う。引いたときには次の画面になっている **Theme:** light **Series:** PARTS 080 **World:** 架空の SQL 図示ツール「Ledgerline」。クエリ画面と図の画面の切り替え。 ## Concept ページ遷移。Canvas に描いた藍色の波が下から上へ画面を覆い、天井まで届いた瞬間に画面を入れ替え、波が引くと次の画面が現れる。波の境界は周波数の違うサイン波 3 本の和で、上がる途中は中央が盛り上がる。読み込み時は画面の 42% まで来た状態で 4 秒止まり、その後は自動で上がる→引く→上がるを繰り返す。クリックで波を呼べる。 2 画面は白い紙に濃いグロテスク、藍色は波と強調語だけ。 ## Signature Technique - `canvas#wave` を最前面(z-index 3、pointer-events none)に置き、毎フレーム `clearRect` → 波形パスを `fill`。 - 水位 `level` 0..1。基準線 `base = H·(1 - level)`。各 x(6px 刻み)で `y = base + Σ sin(x/W·f·2π + t·sp)·a·H·(.5 + .5·min(1, 2·level))·(1 - .5·level)`。WAVES = `[[.055, 1.0, 1.3], [.018, .6, -.8], [.032, .4, 2.1]]`(振幅は H 比、周波数は画面幅あたりの周期数、速度 rad/s)。 - 上昇中だけ `y -= .08·H·sin(πx/W)·(1 - level)` で中央が盛り上がる。 - 塗りは `base - .15H` から下端へ #2d4de0 → #1b2f9a の線形グラデ。境界線に白 55% の 1.5px のストローク。 - 奥の波: 前の波より先に、`base - .035H`(`BACK`)の高さで位相を 2.4rad ずらし、時間を 0.8 倍に遅らせた同じ波形を `rgba(45,77,224,.18)`(`COLOR3`)で塗る。手前の波と少しずれて動き、水に奥行きが出る。 - `level` は RISE 1100ms / FALL 1300ms、easeInOutQuad。天井(level=1)で `swap()`(2 画面の visibility を入れ替え)、260ms 後に引く。引ききったら HOLD 1800ms。 - pointerdown: 引いている途中でも上がり直す。 - `prefers-reduced-motion`: level .42(`LEVEL0`)で静止し、波形も時間を止めて 1 枚描く。 ```js for(const [a,f,sp] of P.WAVES) y+=Math.sin(x/W*f*6.283+t*sp)*a*H*(.5+.5*Math.min(1,level*2))*(1-level*.5); ``` ## Color Palette | Token | HEX | Role | |---|---|---| | --paper | #fbfbf9 | 1 画面目の地 | | --paper2 | #f3f4f1 | 2 画面目の地(一段だけ沈める) | | --ink | #1f2430 | 見出し、ボタン | | --slate | #5c6470 | 本文、モノスペースのラベル | | --mist | #a6adb8 | タグ | | --blue | #2d4de0 | 波の上端、強調語、手書き注記、focus ring | | --blue2 | #1b2f9a | 波の下端 | | COLOR3 | rgba(45,77,224,.18) | 奥の波(藍の 18%) | ## Typography - 見出し: Inter 600、`clamp(34px, 5.4vw, 72px)`、line-height 1.08、letter-spacing -.025em。強調語は `em` を藍色の正体で。 - 本文: Zen Kaku Gothic New 300、`clamp(14px, 1.1vw, 16px)`、line-height 1.9、最大幅 32em。 - ラベル: JetBrains Mono 400 11px、letter-spacing .08em。手書き風の注記は同じモノスペース 12px を -4deg 回転。 - ボタン: Inter 500 14px、角丸 8px、高さ 44px、墨の塗り。 ## Spacing & Layout - 画面は fixed、3 行グリッド(上ラベル / 本文 / 下ラベル)。余白 `clamp(20px, 5vw, 72px)`。本文は縦中央、最大幅 760px。 - 注記は本文ブロック内に絶対配置(left 62% / top 38%)、640px 未満で非表示。 - タグは右下固定(モバイル左下)、`mix-blend-mode: difference`。 ## Motion - RISE 1100ms / FALL 1300ms、easeInOutQuad。天井で 260ms、底で 1800ms 保持。読み込み時は水位 .42 で 4000ms 保持(window の load の 2 フレーム後に `document.fonts.ready` を待ってから数える)。 - 波の揺れは実時間(1.3 / -.8 / 2.1 rad/s)。水位が高いほど振幅を半分まで減らし、天井で平らになる。 - `prefers-reduced-motion: reduce`: 水位 .42 で静止、クリックで動かない。 ## Components - screen: 上ラベル行(ツール名 / 文脈)、見出し、1〜2 文、ボタン、下ラベル行(件数や時間)。 - canvas: 奥の波と手前の波の 2 枚。中身を持たない。 - tag: `VALE / PARTS 080 / 波の遷移` と操作説明 1 行。 ## Do / Don't - Do: 波は 1 色の濃淡だけにする。多色にすると液体に見えない。 - Do: 画面の入れ替えは天井に届いた瞬間に行う。引き始めてからでは前の画面が一瞬見える。 - Do: サイン波は 3 本以上重ねる。1 本だと機械的な波になる。 - Don't: 振幅を H の 8% 以上にしない。文字に波がかかって読めない。 - Don't: 波に影やハイライトを足さない。白い 1.5px の線で十分。 ## References - Lightdash: 「白い紙に、スレートの文字と彩度の高い紫 1 色」という配色の考え方を借りた。紫を藍に変え、ピクセルの装飾は使わず波だけにした。 - Drizzle ORM: 「ワークベンチの紙に、手書きの青い注記が乗る」姿勢を借りた。注記 1 つをモノスペースで傾けて置き、雨粒のキャラクターは使わない。 ## Usage 1. HTML: 遷移させたい 2 画面を `.screen` として fixed で重ね、`` を最後に置く。 2. CSS: `canvas#wave{position:fixed;inset:0;pointer-events:none;z-index:3}` を移植。 3. JS: `