雰囲気と背景 · ページの空気
シェーダー背景着色器背景
- 計算で描く
- 止まらない
- 式ひとつで姿を変える
背景は画像でも CSS グラデーションでもなく、GPU 上で走る小さな数式です。各ピクセルの色が座標と時間からその場で計算されるので、流れ続け、同じフレームには決して戻りません。オーロラ、リキッドメタル、プラズマ、シルク、光線 —— すべて同じものに別の式を入れただけです。
使いどころ
「質感は欲しいが主役は譲る」ヒーローやセクションの背景に、不透明度 0.6 以下・内容を上に重ねて使います。二つの代償を必ず処理してください。GPU を常時占有すること（低スペックではフレームレートか解像度を落とす）、そして決して止まらないこと（prefers-reduced-motion では一帧で凍結する）。
パラメータ
fullscreen fragment shader · 2 triangles · u_time drives noise field · dpr capped 2 · 30fps cap · no easing
レシピ
シェーダー背景 → fullscreen fragment shader · 2 triangles · u_time drives noise field · dpr capped 2 · 30fps cap · no easing
AI に渡す一文
シェーダー背景を作ってください。コンテナを満たす WebGL キャンバス、二つの三角形による全画面クワッド、座標と u_time からノイズ場を計算して色に写像するフラグメントシェーダーです。デバイスピクセル比は 2 で頭打ち（それ以上は GPU の無駄遣い）、フレームレートは 30fps 上限。アンマウント時に GL コンテキストを必ず解放してください。数回スクロールするだけでブラウザのコンテキスト枠を使い切ります。低スペックでは解像度を落とし、reduced-motion では一帧で凍結します。