Ripple
Animated concentric circle effects for emphasis and focus. Perfect for React applications requiring attention-drawing elements with Next.js integration and TypeScript support.
Powered by
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.jsonFeatures
- Customizable circle parameters including size, opacity, and number of concentric rings
- Smooth pulsing animation using CSS transforms with configurable timing and scale effects
- Progressive opacity fading creating natural depth perception across concentric circles
- Responsive design adapting automatically to container dimensions and viewport changes
- Accessibility optimized with screen reader friendly implementation and semantic markup
- TypeScript support with complete interface definitions for reliable integration
- Color scheme flexibility working with any CSS color values and design systems
- Performance efficient using pure CSS animations without JavaScript calculations
CSS Animation
The ripple effect requires the following CSS animation to be added to your global styles:
@keyframes ripple {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(0.9);
}
}Make sure to also add the animation utility class:
.animate-ripple {
animation: ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s) infinite;
}Examples
Custom Configuration
Card Layouts
Use Cases
This free open source React component works well for:
- Call-to-action buttons - Draw attention to primary actions and conversion elements built with Next.js
- Feature highlights - Emphasize key product features and benefits using TypeScript
- Card layouts - Enhance content cards and interactive elements with subtle emphasis
- Dashboard indicators - Highlight important metrics and status elements using shadcn/ui design
- Notification systems - Draw attention to alerts and updates with pulsing effects
- Loading states - Provide visual feedback during data processing using Tailwind CSS animations
API Reference
Ripple
| Prop | Type | Default | Description |
|---|---|---|---|
mainCircleSize | number | 210 | Size of the main (center) circle in pixels |
mainCircleOpacity | number | 0.24 | Opacity of the main circle (other circles fade progressively) |
numCircles | number | 8 | Number of concentric circles to render |
className | string | undefined | Additional CSS classes to apply |
Implementation Notes
- Component requires specific CSS keyframes and animation classes to be added to global styles
- Ripple animation uses CSS transforms with scale effects (0.9 to 1.0) for smooth pulsing
- Each circle has staggered timing (0.2s intervals) creating natural wave propagation effect
- Circle opacity decreases progressively from center outward for realistic depth perception
- Main circle size determines the overall ripple diameter with concentric circles scaling proportionally
- Animation duration configurable via CSS custom property
--duration(default 2s) - Compatible with shadcn/ui design system and works with any background colors
- All standard HTML div props supported for flexible integration and styling
Retro Grid
Nostalgic 80s-inspired grid animations that capture the essence of cyberpunk aesthetics. This React component brings sci-fi movie magic to modern Next.js applications with authentic retro appeal.
Shape Landing Hero
Geometric hero sections with floating shapes and gradient text effects. Perfect for React landing pages requiring elegant visual impact with Next.js integration and TypeScript support.