Aurora

概要

Aurora は複数の縦長グラデーションを Framer Motionで移動させることで オーロラを表現しています。

下記を組み合わせています。

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

特徴

• 幻想的な背景演出
• React対応
• Framer Motion使用

Note

コードブロック

カスタマイズ

見出しの下に変更箇所のコードを載せています。

オーロラの本数の変更

Arrayの数を変更します。

[...Array(8)].map((_, i) =>

アニメーション速度変更

durationを増やすと遅くなります。

duration: 8 + i

カラー変更

rgba(122, 164, 255, 0.9)

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

光帯の間隔

数値変更すると光帯同士の間隔が変わります。

translateX(${i * 320 - 900}px)

• 数値を大きくする → 間隔が広がる
• 数値を小さくする → 間隔が狭くなる

光帯の太さ

w-[500px]

• 大きくする → 幅広いオーロラ
• 小さくする → シャープなオーロラ

オーロラの傾き

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

移動距離の変更

x: [0, 1300, 800, 0]

• 数値を大きくする → 大きく流れる
• 数値を小さくする → ゆったりした動き
• 揺らぎの強さ

オーロラ特有の揺らぎ

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

光の拡散具合

blur-2xl

光の強さ

opacity: [0.3, 0.7, 0.4, 0.3]