Premium element

Core Background

Ripple Water

Ripple Water adds a realistic water ripple animation to elements, creating an interactive, visually appealing background that responds to user input or generates automatic ripple effects. This animation mimics the behavior of water with customizable settings for resolution, drop size, and interactivity.

Preview

Quick Setup

data-ripple-effect=true

Required

Activates the Ripple Water effect on the specified container. No value is needed; simply add this attribute to enable the functionality.

Advanced configuration

data-ripple-drop-radius

Optional

Defines the size of the ripple drop when clicked or triggered automatically. Larger values produce bigger ripples.

Default: 20

data-ripple-perturbance

Optional

Controls the amount of distortion in the ripples. Higher values create more intense waves.

Default: 0.03

data-ripple-interactive

Optional

Specifies whether the ripple effect should respond to user interactions (mouse or touch). Setting this to "false" disables interactivity.

Default: true

data-ripple-damping

Optional

Sets the damping factor of the ripples, which controls how quickly they dissipate. Lower values make ripples last longer.

Default: 0.985

data-ripple-auto-drop-interval

Optional

Specifies the interval (in milliseconds) between automatic ripple drops. Use this to create periodic ripple effects without user input.

Default: 4000

data-ripple-drop-effect

Optional

Sets the type of drop effect for the ripple. Drop or disturb.

Default: drop

data-ripple-auto-drop-strength

Optional

Determines the intensity of automatic ripple drops.

Default: 0.04

We're here to help

Choose how you'd like to connect with our support team

Contact Support

Get help from our team of experts

Response within 24 hours