loveui

Shader Ripple

Animated ripple background with customizable colors and effects powered by Three.js shaders.

Customize
Adjust parameters and experiment with different color presets in real time.
0.05
0.002
8
3
135°
0.50
1
0.000
1
0.70
1
0.20

Installation

npx love-ui@latest add shader-ripple

Usage

import { ShaderRipple } from "@/components/shader-ripple"
<ShaderRipple
  color1="#FF00FF"
  color2="#FF00FF"
  color3="#FF6EC7"
  rippleCount={8}
/>

Props

speed

Controls the animation speed.

  • Type: number
  • Default: 0.05
<ShaderRipple speed={0.1} />

lineWidth

The width of ripple lines.

  • Type: number
  • Default: 0.002
<ShaderRipple lineWidth={0.003} />

rippleCount

Number of ripples to render.

  • Type: number
  • Default: 8
<ShaderRipple rippleCount={12} />

colorLayers

Number of color layers (1-3).

  • Type: number
  • Default: 3
<ShaderRipple colorLayers={2} />

backgroundColor

Background color for the container.

  • Type: string
  • Default: "transparent"
<ShaderRipple backgroundColor="#000000" />

rotation

Rotation angle in degrees.

  • Type: number
  • Default: 135
<ShaderRipple rotation={90} />

timeScale

Scale factor for animation timing.

  • Type: number
  • Default: 0.5
<ShaderRipple timeScale={1.0} />

opacity

Overall opacity of the effect.

  • Type: number
  • Default: 1.0
<ShaderRipple opacity={0.8} />

waveIntensity

Intensity of wave distortion.

  • Type: number
  • Default: 0
<ShaderRipple waveIntensity={0.02} />

animationSpeed

Multiplier for animation speed.

  • Type: number
  • Default: 1.0
<ShaderRipple animationSpeed={1.5} />

loopDuration

Duration of the animation loop in seconds.

  • Type: number
  • Default: 0.7
<ShaderRipple loopDuration={1.0} />

scale

Scale factor for the ripple size.

  • Type: number
  • Default: 1
<ShaderRipple scale={1.5} />

color1

First color layer in hex format.

  • Type: string
  • Default: "#FF00FF"
<ShaderRipple color1="#FF0000" />

color2

Second color layer in hex format.

  • Type: string
  • Default: "#FF00FF"
<ShaderRipple color2="#00FF00" />

color3

Third color layer in hex format.

  • Type: string
  • Default: "#FF6EC7"
<ShaderRipple color3="#0000FF" />

mod

Modulation value for ripple patterns.

  • Type: number
  • Default: 0.2
<ShaderRipple mod={0.3} />

className

Additional CSS classes to apply to the container.

  • Type: string
<ShaderRipple className="rounded-lg" />