オーロラ・メッシュ背景
ゆっくり漂う光の塊が溶け合う、オーロラ風のアニメ背景。WebGL不要、ぼかした放射グラデだけで作るリッチなヒーロー背景。
プレビュー
自動再生
操作自動で再生されます。
仕様書
- 向く場面
- ヒーローセクションの背景
- WebGL を使わずリッチな背景を敷きたい
- 見出しを重ねる暗色の演出面
- 避ける場面
- 本文の背景（明滅が文字を読みにくくする）
- 白文字のコントラストを確認しない配置
- 多数の画面で同時に動かす
- 構成要素
- 暗色の面
- 光の塊（3つ）
- 見出し
- サブテキスト
- 持っている状態
- 通常
- キーボード
操作要素なし（背景装飾）。上に重ねる見出し・ボタンが通常どおりフォーカスを受ける
- 支援技術
光の塊は疑似要素と空 span の装飾で読み上げ対象外。見出しは通常テキスト。reduce 設定で漂いを停止する
- 動き
3つの光塊が 6s／7.5s／5s の ease-in-out alternate で往復し溶け合う。背景として静かに動き続ける
デザインの要点
- 3つの塊の周期を 6s／7.5s／5s とずらす。同じ周期だと同時に折り返して呼吸のようなリズムが出てしまう
- 塊は blur(46px)＋mix-blend-mode: screen で重ねる。重なりが加算で明るくなり「溶け合う」色になる
- 動かすのは transform（translate と scale）だけ。位置や blur を変えると毎フレーム再描画で重い
- 白文字は最も明るい塊が重なった瞬間でコントラストを確認する。暗い基調（#060a1c）はそのための下地
実装メモ
色の塊は ::before / ::after の radial-gradient を blur+translate で動かしています。色を変えるだけで雰囲気が一変します。ヒーローセクションの背景に敷いて、上にテキストを重ねてください。
コード（コピーして使えます）
<div class="aurora">
<span class="aurora-blob aurora-blob-3"></span>
<div class="aurora-content">
<p class="aurora-title">Aurora</p>
<p class="aurora-sub">純CSSの動くメッシュ背景</p>
</div>
</div>