ReactでMesh Gradient背景アニメーションを作る方法
ぼかしたグラデーションが動く背景エフェクトサンプルです。
概要
Mesh Gradient は、複数の発光するカラーオブジェクトを重ね、 それぞれをゆっくり移動させることで、 滑らかなグラデーション背景を表現するエフェクトです。
大きな円形のカラーオブジェクトにブラーを適用することで、 オブジェクトの境界をぼかし、隣り合う色が自然に混ざるようにしています。 さらに、それぞれのオブジェクトを異なる位置へ移動させることで、 静止したグラデーションではなく、ゆっくり変化する背景を作っています。
Heroセクションやランディングページのファーストビュー、 ポートフォリオサイトなど、背景に柔らかな動きを加えたい場面で利用できます。
また、カラーやブラー量、発光オブジェクトのサイズ、 移動量やアニメーション速度を変更することで、 サイトの雰囲気に合わせて表現を調整できます。
- 複数のカラーオブジェクトを重ねる
- 大きなブラーで色の境界をぼかす
- カラーオブジェクトを個別に移動させる
- 透明度付きのカラーで光の強さを調整する
- Framer Motionで位置をアニメーションさせる
特徴
- 複数の色を重ねた滑らかなグラデーション
- 大きなblurによる柔らかな発光表現
- 各カラーオブジェクトを個別にアニメーション
- Canvasを使わずHTML要素とCSSで構成
- Framer Motionで動きの調整が可能
- Heroやランディングページの背景に利用可能
コード
実装のポイント
Mesh Gradientでは、複数の大きな円形要素を背景上に配置し、 それぞれに異なるカラーと位置を設定しています。
円形要素には大きなblurを適用しています。 これによって円の輪郭が見えにくくなり、 複数の色が重なった部分が滑らかなグラデーションとして見えるようになります。
- 大きな円形要素を複数配置
- 透明度を持つカラーを使用
- 大きなblurで境界をぼかす
- 各オブジェクトを異なる軌道で移動させる
- delayを変えて動きが同期しすぎないようにする
この実装にした理由
Mesh Gradientは、複雑な画像処理やCanvasを使わなくても、 CSSのグラデーション・blur・透明度と要素の移動を組み合わせることで 表現できます。
この実装では、カラーオブジェクトをHTML要素として配置し、 Framer Motionから位置をアニメーションさせています。 そのため、JavaScriptでCanvasを直接描画するよりも、 色やサイズ、位置、アニメーション速度などを Reactのコードから調整しやすい構成になっています。
また、各オブジェクトの動きを少しずつ変えることで、 すべての色が同じタイミングで移動する単調なアニメーションを避けています。 delayや移動量を変えることで、背景全体がゆっくり揺らいでいるような印象を作っています。
カスタマイズ
見出しの下に変更箇所のコードを載せています。
発光オブジェクト
各色は大きな円形要素で構成されています。
className="absolute rounded-full"ブラー処理
大きなブラーを適用することで境界を消しています。
blur-[140px]これによって色同士が自然に混ざります。
発光
ピンクの発光
左上からゆっくり移動します。
background: "rgba(236, 72, 153, 0.4)"青の発光
右側に配置しています。
background: "rgba(59, 130, 246, 0.4)"緑の発光
下部から背景全体を補完しています。
background: "rgba(34, 197, 94, 0.3)"アニメーション
各オブジェクトを別々の軌道で移動させています。
animate={{
x: [0, 180, -120, 0],
y: [0, 120, -80, 0],
}}
時間差演出
各色にdelayを設定しています。
delay: 1
delay: 2完全に同じ動きにならないため自然に見えます。
色変更
background のrgba値を変更すると、 発光するカラーを変更できます。 Alpha値を下げると光が弱くなり、 上げると色が強く表示されます。
background: "rgba(236, 72, 153, 0.4)"例えば紫系に変更する場合：
background: "rgba(168, 85, 247, 0.4)"
rgba(236, 72, 153, 0.4)
rgba(59, 130, 246, 0.4)
rgba(34, 197, 94, 0.3)
//Purple
rgba(168, 85, 247, 0.4)
//Cyan
rgba(34, 211, 238, 0.4)
//Orange
rgba(249, 115, 22, 0.4)発光サイズ変更
w-[700px] h-[700px]小さくする
w-[500px] h-[500px]大きくする
w-[900px] h-[900px]ブラー量
blur の値を変更すると、 カラーオブジェクトの境界がどの程度ぼけるかを調整できます。
blur-[140px]- 値を小さくする → 色の境界が残りやすくなる
- 値を大きくする → 色がより柔らかく混ざる
ブラー量変更
blur-[140px]シャープにする
blur-[80px]より柔らかくする
blur-[200px]移動量変更
x: [0, 180, -120, 0]
y: [0, 120, -80, 0]動きを大きくする
x: [0, 300, -200, 0]
y: [0, 200, -150, 0]控えめにする
x: [0, 80, -50, 0]
y: [0, 50, -30, 0]アニメーション速度変更
duration: 8
duration: 7
duration: 6ゆっくり
duration: 12速く
duration: 4オブジェクト数追加
例えば黄色を追加できます。
<motion.div
className="absolute rounded-full w-[500px] h-[500px] blur-[140px]"
style={{
background: "rgba(250, 204, 21, 0.3)",
top: "40%",
left: "40%",
}}
/>
遅延時間変更
delay: 1
delay: 2発光ごとに遅延をずらすことで、より自然な動きになります。
delay: 0
delay: 2
delay: 4
delay: 6パフォーマンスについて
Mesh Gradientでは、複数の要素に大きなblurを適用しながら 同時に位置をアニメーションさせています。 発光オブジェクトを増やしたり、blurを強くしたりすると、 端末によっては描画負荷が高くなる場合があります。
背景として使用する場合は、必要以上にオブジェクトを増やさず、 blurの強さやアニメーション速度も含めて調整してください。 特にスマートフォンでは、実際の端末で表示やスクロールへの影響を確認することをおすすめします。
アクセシビリティについて
背景アニメーションは、ユーザーによっては動きが負担になる場合があります。 実際のWebサイトで使用する場合は、prefers-reduced-motion を考慮し、 アニメーションを停止または弱められるようにすることをおすすめします。
実際に使うなら
Mesh Gradientは、画面全体に柔らかな色の変化を加えたい場合に向いています。 特に、背景そのものに情報を持たせるのではなく、 コンテンツの雰囲気を補助する装飾として利用すると効果的です。
- WebサイトのHeroセクション
- ランディングページのファーストビュー
- ポートフォリオサイトの背景
- SaaSやWebアプリケーションのアクセント
- クリエイティブ系Webサイトの背景演出