Skip to main content
Water-like surface distortion with natural caustic realism. Works as an image filter or standalone animated texture with realistic underwater light patterns.

​
Features

  • Realistic water caustic patterns
  • Animated wave distortion
  • Configurable highlight intensity
  • Multi-layer caustic effects
  • Edge distortion control
  • Works as filter or standalone texture

​
Basic Usage

import { Water } from '@paper-design/shaders-react';

function App() {
  return (
    <Water
      image="/path/to/image.jpg"
      colorBack="#909090"
      colorHighlight="#ffffff"
      highlights={0.07}
      layering={0.5}
      edges={0.8}
      waves={0.3}
      caustic={0.1}
      size={1}
      speed={1}
    />
  );
}

​
Parameters

​
Visual Parameters

​
image
string | HTMLImageElement
default:"''"
Optional source image to apply the water effect to
​
colorBack
string
default:"'#909090'"
Background color in hex, rgb, or rgba format
​
colorHighlight
string
default:"'#ffffff'"
Highlight color for caustic patterns in hex, rgb, or rgba format
​
highlights
number
default:"0.07"
Coloring added over image/background following caustic shape
​
layering
number
default:"0.5"
Power of 2nd layer of caustic distortion for more complex patterns
​
edges
number
default:"0.8"
Caustic distortion power on the image edges
​
waves
number
default:"0.3"
Additional distortion based on simplex noise, independent from caustic
​
caustic
number
default:"0.1"
Overall power of caustic distortion effect
​
size
number
default:"1"
Pattern scale relative to the image

​
Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'contain'"
How to fit the shader into the canvas dimensions
​
scale
number
default:"0.8"
Overall zoom level of the graphics
​
rotation
number
default:"0"
Overall rotation angle in degrees
​
offsetX
number
default:"0"
Horizontal offset of the graphics center
​
offsetY
number
default:"0"
Vertical offset of the graphics center
​
originX
number
default:"0.5"
Horizontal reference point for positioning
​
originY
number
default:"0.5"
Vertical reference point for positioning

​
Animation Parameters

​
speed
number
default:"1"
Animation speed multiplier
​
frame
number
default:"0"
Manual frame control for animation

​
Presets

The Water shader comes with several built-in presets:
  • Default: Balanced water effect with caustics and waves
  • Slow-mo: Slow animation with strong highlights
  • Abstract: High-scale pattern for abstract effects
  • Streaming: Fast flowing water without caustics
import { Water, waterPresets } from '@paper-design/shaders-react';

function App() {
  return <Water {...waterPresets[0].params} />;
}

​
Examples

​
Slow Motion Water

<Water
  image="/image.jpg"
  speed={0.1}
  highlights={0.4}
  layering={0}
  edges={0}
  waves={0}
  caustic={0.2}
  size={0.7}
/>

​
Abstract Water Pattern

<Water
  fit="cover"
  scale={3}
  highlights={0}
  layering={0}
  edges={1}
  waves={1}
  caustic={0.4}
  size={0.15}
/>

​
Streaming Effect

<Water
  image="/image.jpg"
  fit="contain"
  scale={0.4}
  speed={2}
  highlights={0}
  layering={0}
  edges={0}
  waves={0.5}
  caustic={0}
  size={0.5}
/>

​
Technical Details

​
Shader Uniforms (Vanilla JS)

When using the vanilla JavaScript API, colors are passed as RGBA arrays with values from 0 to 1: 
{
  u_colorBack: [r, g, b, a], // e.g., [0.565, 0.565, 0.565, 1]
  u_colorHighlight: [r, g, b, a],
  u_highlights: 0.07,
  u_layering: 0.5,
  u_waves: 0.3,
  u_edges: 0.8,
  u_caustic: 0.1,
  u_size: 1,
}

​
Animation

The Water shader is animated by default. The animation shows:
  • Moving caustic patterns
  • Wave distortion
  • Flowing highlights
Control animation with the speed parameter or frame for manual control.

​
Performance Notes

  • Animated shader with continuous rendering
  • Uses simplex noise for wave distortion
  • Multiple layers can be disabled for better performance
  • Best with moderate size values for visible caustics