Ripples Background Component

WebGL-based Interactive Water Ripple Background

Encapsulated Vue component with mouse/touch interaction, auto drops, and customizable parameters

View Directive Version

Interactive Demo

Water Ripple Effect Demo

Move or click to create ripples

Parameter Controls

Resolution: 512

Drop Radius: 20

Perturbance: 0.03

Auto Drops Interval: 400ms

Interactive

Auto Drops

Code Example

<AnimationRipplesBackground
  image-url="/img/home/hero-gradient.svg"
  :resolution="512"
  :drop-radius="20"
  :perturbance="0.03"
  :interactive="true"
  :auto-drops="true"
  :auto-drops-interval="400"
  :auto-drops-strength="0.04"
>
  <h1>Content on top of ripples</h1>
</AnimationRipplesBackground>

Props Reference

Prop	Type	Default	Description
`imageUrl`	String	required	Background image URL (required)
`resolution`	Number	256	Ripple resolution (recommended: 256, 512, 1024)
`dropRadius`	Number	20	Drop radius
`perturbance`	Number	0.03	Perturbance strength (recommended: 0.01 ~ 0.1)
`interactive`	Boolean	true	Enable mouse/touch interaction
`autoDrops`	Boolean	false	Enable auto drops effect
`autoDropsInterval`	Number	400	Auto drops interval (ms)