Water Impact

ripple animation component

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.

Customize Options

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