Ripple
An animated ripple effect typically used behind elements to emphasize them.
Examples
Only lines
Squared
Blobed
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
baseCircleSize | number | 210 | The size of the main circle in pixels. |
baseCircleOpacity | number | 0.24 | The opacity of the main circle. |
spaceBetweenCircle | number | 70 | The space between each ripple circle in pixels. |
circleOpacityDowngradeRatio | number | 0.03 | The rate at which opacity decreases for each successive ripple circle. |
circleClass | string | undefined | CSS class name(s) for additional styling of circles. |
waveSpeed | number | 80 | The animation speed for the wave effect, measured in ms. |
numberOfCircles | number | 7 | The number of ripple circles to render. |
Component Code
You can copy and paste the following code to create this component:
Credits
- Credits to Magic UI.
- Credits to SivaReddy Uppathi for porting this component.
- Credits to Nathan De Pachtere for updating this component.