UIARIUM React Effects Gallery

ReactでAurora背景アニメーションを作る方法

概要

Auroraは、複数の縦長グラデーションを組み合わせ、 Framer Motionでそれぞれの光帯を異なる速度で移動させることで、 オーロラのような柔らかい背景アニメーションを表現しています。

Heroセクションやランディングページの背景など、 コンテンツを邪魔せずに画面全体へ動きを加えたい場面で利用できます。 この実装では、Reactから光帯の数や位置、アニメーションを管理しやすくするため、 Framer Motionを使用しています。

単純に光を左右へ移動させるだけではなく、 光帯ごとに速度・傾き・透明度を少しずつ変えることで、 規則的になりすぎない動きを作っています。

このエフェクトでは、主に以下の要素を組み合わせています。

  • 8本の光帯
  • スキュー変形
  • 透明グラデーション
  • ブラー

このエフェクトを作った理由

Webサイトのファーストビューに動きのある背景を入れたかったため、Aurora風の背景をReactで実装しました。

実装のポイント

Auroraを自然に見せるために、複数の光帯へ異なるアニメーション設定を 適用しています。すべての光帯を同じタイミングで動かすのではなく、 durationや開始位置をずらすことで、動きが同期しすぎないようにしています。

  • 複数のグラデーションを重ねて光の厚みを表現
  • 光帯ごとにアニメーション速度を変更
  • skewXで光帯に揺らぎを加える
  • blurとopacityで光の境界と明るさを調整
  • Reactの配列処理で複数の光帯を生成

この実装にした理由

Auroraのような背景アニメーションでは、すべての光帯を同じ速度で 動かすと、それぞれの動きが同期して規則的に見えてしまいます。 そのため、この実装では光帯ごとにdurationを変えています。

例えば、すべてを8秒に設定すると同じタイミングで動きやすくなりますが、8 + i のように少しずつ速度をずらすことで、 光帯同士の動きに差が生まれます。 これによって、単調な繰り返しを避け、より自然な揺らぎを表現しています。

また、skewXやopacityにも複数の値を設定しています。 位置だけを変化させるのではなく、光帯の形状や明るさも時間とともに変化させることで、 単純な横移動ではなく、柔らかく揺らいでいるような印象を作っています。

配色について

Auroraは青系だけでなく、紫・ピンク・緑などの色でも作ることができます。 背景色とのコントラストが強すぎる場合は、rgbaのAlpha値を下げることで 光を弱めることができます。

使用時の注意

背景アニメーションは視覚的な印象が強いため、 その上に配置するテキストやボタンが読みにくくならないよう注意が必要です。 十分なコントラストを確保し、必要に応じて背景のopacityやblurを調整してください。

コード

tsx

カスタマイズ

以下では、Auroraの見た目やアニメーションを変更するための 主なパラメータを紹介します。

オーロラの本数

配列の数を変更すると、生成される光帯の本数を変更できます。

tsx
[...Array(8)].map((_, i) =>
  • 数値を大きくする → 光帯が増える
  • 数値を小さくする → 光帯が減る
光帯を増やすほど複雑な見た目になりますが、 同時に画面上で動く要素も増えます。 見た目とパフォーマンスのバランスを確認しながら調整してください。

アニメーション速度

duration はアニメーションが1サイクルするまでの時間です。 値を大きくすると動きがゆっくりになり、小さくすると速くなります。

tsx
duration: 8 + i
  • 値を大きくする → ゆっくりした動き
  • 値を小さくする → 速い動き
  • 光帯ごとの差を大きくする → 動きのばらつきが大きくなる
背景として使用する場合は、アニメーションを速くしすぎると コンテンツより背景の動きが目立つことがあります。 Heroなどで使用する場合は、ゆっくりした速度から調整するのがおすすめです。

カラー

光帯のグラデーションに使用しているrgbaの値を変更すると、 Auroraの色合いを変更できます。

tsx
rgba(122, 164, 255, 0.9)

第1～3引数はRGB、第4引数はAlpha値です。 RGBで色を変更し、Alpha値で透明度を調整できます。

光帯の間隔

光帯の配置に使用している数値を変更すると、 光帯同士の間隔を調整できます。

tsx
translateX(${i * 320 - 900}px)
  • 数値を大きくする → 光帯同士の間隔が広がる
  • 数値を小さくする → 光帯同士の間隔が狭くなる

光帯の太さ

光帯の幅を変更すると、Aurora全体の見え方を調整できます。

tsx
w-[500px]
  • 大きくする → 幅広く柔らかいAurora
  • 小さくする → 細くシャープなAurora

オーロラの傾き

rotate の値を変更すると、光帯の傾きを調整できます。 偶数と奇数で角度を変えることで、光帯が同じ方向に揃いすぎないようにしています。

tsx
rotate(${i % 2 === 0 ? "-12deg" : "12deg"})

移動距離

アニメーションの移動距離を変更すると、 Auroraが画面上をどの程度大きく移動するかを調整できます。

tsx
x: [0, 1300, 800, 0]
  • 数値を大きくする → 大きく流れる
  • 数値を小さくする → 移動範囲が小さくなる

オーロラ特有の揺らぎ

skewX の値をアニメーションさせることで、 光帯に左右の揺らぎを加えています。

tsx
skewX: [0, 8, -8, 0]

光の拡散具合

blur を変更すると、光帯の境界や光の拡散具合を調整できます。 blurを強くすると柔らかい印象になり、弱くすると光帯の形がはっきりします。

tsx
blur-2xl

光の強さ

opacity をアニメーションさせることで、 光帯の明るさにも変化を加えています。

tsx
opacity: [0.3, 0.7, 0.4, 0.3]
  • 値を大きくする → 光が強くなる
  • 値を小さくする → 光が弱くなる

パフォーマンスについて

Auroraでは複数の要素を同時にアニメーションさせているため、 光帯の数を増やしすぎると描画負荷が高くなる可能性があります。

特にblurは視覚効果として便利ですが、 画面サイズや端末によっては描画コストが大きくなる場合があります。 実際のサイトで使用する場合は、デスクトップだけでなく モバイル端末でも動作を確認することをおすすめします。

光帯を増やすほど必ず見た目が良くなるわけではありません。 まずは少ない本数から始め、必要な場合だけ追加すると調整しやすくなります。

アクセシビリティについて

背景アニメーションは、ユーザーによっては動きが負担になる場合があります。 実際のWebサイトで使用する場合は、prefers-reduced-motion を考慮して、 アニメーションを停止または弱められるようにすることをおすすめします。

エフェクトそのものを目的にしたデモではなく、 Webサイトの背景として使用する場合は、 アニメーションよりもコンテンツの読みやすさを優先してみてください。

実際に使うなら

Auroraは、背景全体に柔らかい動きを加えたい場合に向いています。 特に以下のような場所で利用できます。

  • WebサイトのHeroセクション
  • ランディングページの背景
  • ポートフォリオサイト
  • SaaSやWebアプリケーションのアクセント
  • プロモーションページの背景演出
背景の情報量が多いページでは、opacityやblurを弱めることで、 テキストやボタンとの視覚的な競合を抑えられます。
ギャラリーへ戻る