WebGL背景
生WebGLのフラグメントシェーダーで藍系プラズマをアニメーション。マウス/タッチで揺らぎが反応し、上に重ねたキャッチコピーがヒーロー背景として機能する。WebGL非対応時はCSSグラデにフォールバック。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- ブランドサイトのヒーロー背景
- テック系プロダクトの第一印象づくり
- WebGL 対応を前提にできる LP
- 避ける場面
- 長文の背景（常時描画で電池と可読性を削る）
- 低スペック端末が主な利用者の画面
- 同一ページに複数並べる（GPU 負荷）
- 構成要素
- 流体背景（canvas）
- CSS フォールバック
- サブ見出し
- 見出し
- 説明文
- 持っている状態
- 通常
- キーボード
操作要素なし（背景）。見出し側は pointer-events none で下の canvas がポインタを拾う
- 支援技術
canvas は aria-hidden の装飾で、見出し h2 と本文が情報を持つ。reduce 設定では静止フレーム1枚だけ描画。WebGL 不可・シェーダー失敗時は CSS グラデへフォールバック
- 動き
fbm ノイズを時間 0.28 倍で流し続ける流体プラズマ。ポインタ近傍で歪みと輝点が exp 減衰で強まる
デザインの要点
- fbm を2段ネスト（q→r→f）して流体らしい歪みを作る。1段のノイズは雲にはなっても流れにならない
- 時間は 0.28 倍・ポインタの効きは exp(−距離×3.5)×0.18 と小さく。背景は「反応した」と分かる最小限で止める
- 色は藍の4色を f で混ぜ、ビネットで四隅を 25% 落とす。白文字を中央に置く前提の明度設計
- canvas は devicePixelRatio 2 まで。取得失敗・コンパイル失敗は同じ色味の CSS グラデへ静かに落とす
コード（コピーして使えます）
<div class="hero-wrap">
<canvas id="glc" aria-hidden="true"></canvas>
<div class="hero-fallback" id="fb" aria-hidden="true" hidden></div>
<div class="hero-copy">
<p class="hero-sub">インタラクションデザイン</p>
<h2 class="hero-title">世界を、動かせ。</h2>
<p class="hero-desc">WebGL フラグメントシェーダーによる<br>リアルタイム流体背景</p>
</div>
</div>