React Ripple Background
Concentric circle animations that draw attention like a stone dropped in still water. Build mesmerizing React focus effects with CSS transforms, pulsing animations, customizable timing, and TypeScript support for Next.js applications with shadcn/ui.
Powered by
Creating attention-grabbing focus effects?
Join our Discord community for help from other developers.
User attention is precious. Finite. Most interfaces scream for it with garish colors and aggressive animations. But what if you could guide focus naturally? Like ripples spreading across water when you drop a stone? This React component creates concentric circles that pulse gently outward, drawing the eye without demanding it.
Organic attention effects
Watch concentric circles pulse with staggered timing for natural focus guidance:
Built for React applications with TypeScript and Next.js. Uses CSS transforms with staggered animation delays to create wave-like propagation. Each circle pulses from 90% to 100% scale with progressive opacity fading. Perfect for call-to-action buttons, feature highlights, or any element that needs gentle emphasis.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/ripple.jsonnpx shadcn@latest add https://www.shadcn.io/registry/ripple.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/ripple.jsonbunx shadcn@latest add https://www.shadcn.io/registry/ripple.jsonUsage
import { Ripple } from "@/components/ui/ripple";
export default function CallToAction() {
return (
<div className="relative">
{/* Your button or content */}
<button className="relative z-10 px-8 py-4 bg-blue-600 text-white rounded-lg">
Get Started
</button>
{/* Ripple attention effect */}
<Ripple
mainCircleSize={200}
mainCircleOpacity={0.2}
numCircles={6}
/>
</div>
);
}Required CSS Animation
Important: Add this CSS animation to your global styles for ripples to work:
@keyframes ripple {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(0.9);
}
}
.animate-ripple {
animation: ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s) infinite;
}Why most attention effects look aggressive
Most developers use CSS pulse animations that scale from 0 to 100%—jarring, attention-demanding, obviously artificial. Others try JavaScript libraries with complex easing functions that feel bouncy and distracting. Some use solid colors that create harsh visual contrast.
This React component uses subtle scale transforms (90% to 100%) that breathe naturally. Staggered delays create wave propagation like real ripples. Progressive opacity fading makes outer circles almost invisible. CSS custom properties allow fine timing control. It's the difference between gentle guidance and visual shouting.
Features
- Concentric circle system with customizable count and progressive opacity fading
- Staggered animation timing creating natural wave propagation with 0.2s delays
- Subtle scale transforms pulsing between 90-100% for gentle, non-intrusive emphasis
- CSS custom property timing allowing duration control via
--durationvariable - Progressive opacity reduction making outer circles fade naturally for depth effect
- Responsive sizing system adapting circle dimensions to container and content
- Pure CSS animations providing smooth 60fps performance without JavaScript overhead
- TypeScript definitions for all visual and timing customization parameters
- Accessibility optimized with non-distracting animations that don't interfere with content
- shadcn/ui compatible with theme-aware styling and proper layering support
Examples
Custom Configuration
Adjust circle count, size, and opacity for different emphasis levels:
Card Layouts
Subtle ripples enhance content cards without overwhelming the design:
API Reference
Ripple
Main component for concentric circle attention and focus effects.
| Prop | Type | Default | Description |
|---|---|---|---|
mainCircleSize | number | 210 | Diameter of the main circle in pixels (100-400 recommended) |
mainCircleOpacity | number | 0.24 | Opacity of innermost circle (others fade progressively) |
numCircles | number | 8 | Number of concentric circles (3-12 optimal range) |
className | string | - | Additional CSS classes for container styling |
Animation Timing System
Each circle animates with carefully calculated delays:
// Circle delays create wave propagation
Circle 1: 0s delay (center, most visible)
Circle 2: 0.2s delay
Circle 3: 0.4s delay
Circle 4: 0.6s delay (outer circles fade to nearly invisible)
...Ripple Intensity Guidelines
// Subtle background emphasis
mainCircleSize={150} mainCircleOpacity={0.1} numCircles={4}
// Moderate attention drawing
mainCircleSize={200} mainCircleOpacity={0.2} numCircles={6}
// Strong focus effect
mainCircleSize={250} mainCircleOpacity={0.3} numCircles={8}
// Maximum emphasis (use sparingly)
mainCircleSize={300} mainCircleOpacity={0.4} numCircles={10}CSS Custom Properties
/* Adjust animation timing globally */
.animate-ripple {
--duration: 3s; /* Slower, more meditative */
--duration: 1s; /* Faster, more energetic */
}Common gotchas
Missing CSS animation: The component won't animate without the required @keyframes ripple in your global styles. Circles will appear static without this crucial animation.
Overflow container required: Ripples extend beyond their container bounds. Always use overflow-hidden on the parent element to prevent layout issues and unwanted scrollbars.
Z-index layering conflicts: Ripples appear behind content by default. If your content disappears, ensure it has relative z-10 or higher positioning.
Performance with many circles: Each circle is an animated element. Very high numCircles values (15+) might impact performance on older devices. 8 circles is the optimal balance.
Animation timing accumulation: Multiple ripples on the same page all animate simultaneously. Consider staggering component mounting or using different durations to avoid synchronized pulsing.
Accessibility considerations: While subtle, ripples are still motion effects. Consider respecting prefers-reduced-motion for users with motion sensitivity.
You might also like
Explore other attention and emphasis background components for React applications:
Spotlight
Interactive spotlight effects that follow cursor movement
Pulse
Simple pulsing animations for buttons and call-to-actions
Glow
Soft glow effects that add premium feel to elements
Particles
Interactive particle systems with physics-based movement
Gradient Animation
Flowing orb gradients with color mixing and movement
Sparkles
Magical sparkle effects with random positioning patterns
Questions developers actually ask
React Retro Grid Background
80s-inspired perspective grids that transport users to the cyberpunk future. Build nostalgic React background components with CSS animations, infinite scrolling, customizable neon colors, and TypeScript support for Next.js applications with shadcn/ui.
React Shape Landing Hero
Geometric hero sections that transform landing pages from boring to breathtaking. Build stunning React hero components with floating shapes, Framer Motion animations, gradient text effects, and TypeScript support for Next.js applications with shadcn/ui.