オーロラ・グレイン背景

使い方

<Aurora
  eyebrow="NEW SEASON"
  heading="Colour that breathes."
  lead="説明文"
  cta={{ label: '詳しく見る', href: '/more' }}
  colors={['#ff7a45', '#7b5cff', '#18c3a8', '#ffd25e']}
  base="#0e0c14"
/>

• colors は光の4色で、1色目がポインターへ寄ります。base は下地の色です。

動きの仕組み

• mountAurora(root) は表示サイズの4分の1の Canvas に放射グラデーションを screen で重ね、CSSで拡大します。拡大でさらにぼけるため、なめらかで負荷も小さくなります。
• 各色は周期の異なる2つのサイン波で円を描くように漂い、大きさもゆっくり変わります。1色目はポインターがセクション内にある間、その位置へ少しずつ近づきます。
• 粒子は SVG の feTurbulence を背景画像にし、steps(5) で位置をずらして揺らします。
• 画面外・非表示タブでは描画を止め、prefers-reduced-motion: reduce では1枚だけ描いて止めます。JavaScriptなしではCSSのグラデーションを表示します。

調整する箇所

• 光の大きさは RADII、ポインターへの寄り方は FOLLOW、解像度は SCALE で調整します。
• 粒子の濃さは .aurora__grain の opacity で変更できます。

参考にした傾向

Webデザインクリップ に掲載された国内サイトでよく使われている「グラデーション・背景」の表現を参考に、このカタログ用に一から設計・実装しました。特定サイトのコード・画像・文言・配色は使っていません。

利用条件

このカタログ用に書き下ろした実装で、MITライセンスで公開しています。LICENSE、src/Component.astro、src/motion.ts を取得して利用できます。再配布する場合は LICENSE の著作権表示と許諾文を残してください。