Shadcn.io is not affiliated with official shadcn/ui
React Ripple Background
Concentric pulsing circles radiating from center—a simple but hypnotic ripple effect
Concentric circles pulsing outward from the center in a staggered rhythm. It's a simple effect but surprisingly mesmerizing. Each circle is slightly larger and more transparent than the last, with staggered animation delays so they pulse in sequence like ripples in water. A radial gradient mask fades the circles toward the edges so they blend naturally instead of having hard cutoffs. It's pure CSS animation, so performance is rock solid. Nice for hero sections, behind avatars or logos, loading states, or anywhere you want to draw the eye to a central focal point with some ambient energy.
React Ripple Background preview
Installation
Related Components
Background Circles
Floating circle patterns
Background Beams
Animated light beams
Vortex
Spiral animation
Aurora Background
Flowing gradient waves
Wavy
Noise-driven wave lines
Gradient
Flowing gradient blobs
FAQ
Was this page helpful?
Sign in to leave feedback.