ReactでGrid Pulse背景アニメーションを作る方法
発光しながら脈動するグリッド背景エフェクトサンプルです。
概要
Grid Pulse は、グリッド状の背景に発光する光を重ねることで、近未来的なUI演出を実現するエフェクトです。 CSSのグラデーションでグリッドを生成し、Framer Motionで発光をアニメーションさせています。 下記を組み合わせています。
- グリッド背景
- ラジアルグラデーション
- スケールアニメーション
- 透明度アニメーション
- Framer Motion
特徴
- サイバー風・SF風デザインに最適
- Heroセクションの背景に使いやすい
- CSSのみでグリッド生成
- Canvas不要
- F軽量で扱いやすい
コード
tsx
カスタマイズ
グリッド生成
縦線と横線を2つのLinear Gradientで描画しています。tsx
backgroundImage:
linear-gradient(
rgba(255,255,255,0.05) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,0.05) 1px,
transparent 1px
)
グリッド間隔
tsx
backgroundSize: "40px 40px"発光エフェクト
中央にラジアルグラデーションを配置しています。tsx
background:
radial-gradient(
circle at 50% 50%,
rgba(139, 92, 246, 0.3) 0%,
transparent 70%
)拡大縮小アニメーション
発光をゆっくり膨張・収縮させています。tsx
scale: [1, 2.2, 1]透明度アニメーション
発光の強弱を表現しています。tsx
opacity: [0.5, 0.8, 0.5]移動アニメーション
専用ページでは光がゆっくり移動します。tsx
x: [0, 120, -80, 0]
y: [0, -60, 40, 0]Hero背景や404ページ、管理画面ダッシュボードなどの背景演出に向いています。
グリッドサイズ変更
tsx
backgroundSize: "40px 40px"tsx
backgroundSize: "20px 20px"tsx
backgroundSize: "80px 80px"線の濃さ変更
グリッドの rgba のAlpha値を変更すると、 線の濃さを調整できます。
tsx
rgba(255,255,255,0.05)濃くする
tsx
rgba(255,255,255,0.1)薄くする
tsx
rgba(255,255,255,0.02)発光色変更
発光カラーのRGB値を変更できます。
tsx
rgba(139, 92, 246, 0.3)Cyan
tsx
rgba(34, 211, 238, 0.3)Blue
tsx
rgba(59, 130, 246, 0.3)Green
tsx
rgba(34, 197, 94, 0.3)Pink
tsx
rgba(236, 72, 153, 0.3)発光範囲変更
radial-gradient のtransparent の位置を変更すると、 発光が広がる範囲を調整できます。
tsx
transparent 70%発光範囲を小さくする
tsx
transparent 50%発光範囲を大きくする
tsx
transparent 90%発光の大きさ変更
tsx
scale: [1, 2.2, 1]tsx
scale: [1, 1.5, 1]tsx
scale: [1, 3, 1]発光移動量変更
tsx
x: [0, 120, -80, 0]
y: [0, -60, 40, 0]tsx
x: [0, 200, -150, 0]
y: [0, -100, 80, 0]tsx
x: [0, 0, 0]
y: [0, 0, 0]