没入・リッチ演出
WebGL背景
生WebGLのフラグメントシェーダーで藍系プラズマをアニメーション。マウス/タッチで揺らぎが反応し、上に重ねたキャッチコピーがヒーロー背景として機能する。WebGL非対応時はCSSグラデにフォールバック。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
コード（コピーして使えます）
<div class="hero-wrap">
<canvas id="glc"></canvas>
<div class="hero-fallback" id="fb" 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>