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

概要

Ripple は、画面中央の中心点から複数の円形の波紋を広げる アニメーションエフェクトです。 円を徐々に拡大しながら透明にすることで、 水面に波紋が広がるような動きを表現しています。

このエフェクトでは、複数の波紋を同時に表示するのではなく、 それぞれの開始タイミングを少しずつずらしています。 そのため、1つの波紋が消える前に次の波紋が発生し、 継続的に波が広がっているように見えます。

Heroセクションの背景やローディング画面、 通信中のインジケーター、レーダーやソナーをイメージしたUIなど、 中心から広がる動きを使いたい場面で利用できます。

また、波紋の色や大きさ、速度、間隔を変更することで、 水面だけでなく、SF風のUIや光のパルスなど、 異なる雰囲気の表現にも応用できます。

• 複数の円形要素を生成
• 円を拡大しながら透明化
• 波紋ごとに開始タイミングを変更
• Framer Motionでアニメーションを管理
• Tailwind CSSで線の色や太さを調整

実装のポイント

Rippleでは、波紋を1つの円として固定表示するのではなく、 同じ構造の円を複数生成し、それぞれに異なるアニメーション開始時間を設定しています。

各波紋は小さな円から始まり、アニメーション中にサイズを大きくしながら opacityを下げていきます。 サイズと透明度を同時に変化させることで、 円が外側へ広がりながら消えていくように見せています。

• Arrayを使って複数の波紋を生成
• widthとheightを同時に変化させて円を拡大
• opacityを下げて波紋をフェードアウト
• delayを変えて波紋の発生タイミングをずらす
• borderで波紋の輪郭を表現

この実装にした理由

Rippleの動きは、円のサイズと透明度を時間に合わせて変化させることで 比較的シンプルに表現できます。 そのため、このエフェクトではCanvasや複雑な物理計算を使わず、 Reactの要素とFramer Motionを組み合わせています。

波紋を1つずつHTML要素として生成し、 Framer Motionからサイズやopacityをアニメーションさせることで、 波紋の数や速度、開始タイミングをコード上から調整しやすくしています。

また、すべての波紋を同時に開始すると、 円が一斉に拡大して単調な動きになります。 そこで、波紋ごとにdelayを変えることで、 一定間隔で波紋が発生しているような連続した動きを作っています。

特徴

• 水面の波紋表現
• 比較的シンプルな構成で実装
• Framer Motionでアニメーションを管理
• Hero背景にも利用可能
• Sci-Fi風UIにも応用可能

コード

カスタマイズ

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

波紋の数

Array() の数値を変更すると、 生成される波紋の数を変更できます。

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

• 数値を大きくする → 同時に表示される波紋が増える
• 数値を小さくする → 波紋の数が減る

波紋が発生した瞬間のサイズ変更

  initial={{
  width: 20,
  height: 20,
  opacity: 0.8,
}}

拡大アニメーション

animate={{
  width: [20, 900],
  height: [20, 900],
  opacity: [0.8, 0],
}}

円を拡大しながら透明にしています。

波紋同士の間隔

delay: i * 1

delay: i * 1 のように設定することで、 波紋ごとの開始タイミングを1秒ずつずらしています。

波紋の大きさ

width と height の終了値を変更すると、 波紋がどこまで広がるかを調整できます。

width: [20, 900],
height: [20, 900]

• 終了値を大きくする → 大きく広がる
• 終了値を小さくする → 小さく広がる

波紋の速度

duration は、1つの波紋が最初のサイズから 最終サイズまで拡大するのにかかる時間です。

duration: 9

• 値を小さくする → 波紋が速く広がる
• 値を大きくする → 波紋がゆっくり広がる

波紋の発生間隔

delay は、各波紋がアニメーションを開始するまでの 待ち時間を設定しています。

delay: i * 1

• 値を小さくする → 波紋の発生間隔が短くなる
• 値を大きくする → 波紋の発生間隔が長くなる

波紋カラー変更

border-cyan-400/30

青

border-blue-400/30

紫

border-purple-400/30

ピンク

border-pink-400/30

中心点サイズ変更

"w-10 h-10"

大きくする場合

"w-16 h-16"

小さくする場合

"w-4 h-4"

中心点カラー変更

bg-cyan-400

変更例

bg-blue-400
bg-purple-400
bg-pink-400

パフォーマンスについて

Rippleでは、複数のHTML要素をFramer Motionで同時にアニメーションさせています。 波紋の数を増やしすぎると、同時にアニメーションする要素も増えるため、 実際に使用する場合は必要な数に調整してください。

特に背景として常に表示する場合は、 波紋の数やアニメーション速度を控えめにすると、 コンテンツへの視覚的な干渉も抑えられます。

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

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

実際に使うなら

Rippleは、中心から外側へ広がる動きを視覚的に表現したい場合に向いています。 波紋の色や大きさ、速度、発生間隔を変更することで、 水面のような柔らかい表現から、SF風のインターフェースまで幅広く調整できます。

• Heroセクションの背景
• ローディングや通信中の表示
• レーダー・ソナーをイメージしたUI
• SF・テクノロジー系Webサイト
• クリックや通知などの視覚的なフィードバック