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"

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"

線の濃さ変更

tsx

rgba(255,255,255,0.05) 濃くする

tsx

rgba(255,255,255,0.1)

薄くする

tsx

rgba(255,255,255,0.02)

発光色変更

tsx

rgba(139, 92, 246, 0.3)
          Cyan
          rgba(34,211,238,0.3)
          Blue
          rgba(59,130,246,0.3)
          Green
          rgba(34,197,94,0.3)
          Pink
          rgba(236,72,153,0.3)

発光範囲変更

transparent 70%

tsx

小さくする

tsx

transparent 50%

大きくする

tsx

transparent 90%

アニメーション速度変更

tsx

duration: 8

速くする

tsx

duration: 4

ゆっくりする

tsx

duration: 12

発光の大きさ変更

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]

ギャラリーへ戻る