WaterImpact is a dynamic ripple animation component that simulates water droplets hitting a surface. Each drop appears at a random position and generates multiple expanding rings that animate outward with smooth easing and gradually fade, creating a calm, cinematic, and immersive visual effect. The animation runs continuously with randomized drop positions and timing, making it feel organic and non-repetitive. Each ripple consists of layered rings with slight delays, mimicking realistic wave propagation. Once the animation completes, each ripple is automatically removed to keep performance efficient.
You can fully control both the visual style and animation behavior through the following options:
🎨 Colors
Color 1 – Starting color of the ripple gradient
Color 2 – Ending color of the ripple gradient
🌊 Ripple Structure
Ring Count – Number of ripple layers per drop
Max Radius – Maximum expansion size of each ripple
Ring Width – Thickness of each ripple ring
⏱ Animation Control
Duration – How long each ripple animation lasts (ms)
Drop Frequency – Interval between new ripple generations (ms)
🔷 Shape Style
Ring Shape
Circle
Rectangle
Edi Priatama
