Water

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}
    />
  );
}

import { mountShader, waterFragmentShader } from '@paper-design/shaders';

const canvas = document.getElementById('canvas');
const mount = mountShader(canvas, {
  fragmentShader: waterFragmentShader,
  uniforms: {
    u_image: '/path/to/image.jpg',
    u_colorBack: [0.565, 0.565, 0.565, 1],
    u_colorHighlight: [1, 1, 1, 1],
    u_highlights: 0.07,
    u_layering: 0.5,
    u_edges: 0.8,
    u_waves: 0.3,
    u_caustic: 0.1,
    u_size: 1,
    // Sizing uniforms
    u_fit: 2, // 0=none, 1=contain, 2=cover
    u_scale: 0.8,
    u_rotation: 0,
    u_offsetX: 0,
    u_offsetY: 0,
    u_originX: 0.5,
    u_originY: 0.5,
  },
});

// Start animation
mount.play();

Parameters

Visual Parameters

string | HTMLImageElement

default:"''"

Optional source image to apply the water effect to

string

default:"'#909090'"

Background color in hex, rgb, or rgba format

string

default:"'#ffffff'"

Highlight color for caustic patterns in hex, rgb, or rgba format

number

default:"0.07"

Coloring added over image/background following caustic shape

number

default:"0.5"

Power of 2nd layer of caustic distortion for more complex patterns

number

default:"0.8"

Caustic distortion power on the image edges

number

default:"0.3"

Additional distortion based on simplex noise, independent from caustic

number

default:"0.1"

Overall power of caustic distortion effect

number

default:"1"

Pattern scale relative to the image

Sizing Parameters

'none' | 'contain' | 'cover'

default:"'contain'"

How to fit the shader into the canvas dimensions

number

default:"0.8"

Overall zoom level of the graphics

number

default:"0"

Overall rotation angle in degrees

number

default:"0"

Horizontal offset of the graphics center

number

default:"0"

Vertical offset of the graphics center

number

default:"0.5"

Horizontal reference point for positioning

number

default:"0.5"

Vertical reference point for positioning

Animation Parameters

number

default:"1"

Animation speed multiplier

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

Get Started

Shaders

Guides

Features

Basic Usage

Parameters

Visual Parameters

Sizing Parameters

Animation Parameters

Presets

Examples

Slow Motion Water

Abstract Water Pattern

Streaming Effect

Technical Details

Shader Uniforms (Vanilla JS)

Animation

Performance Notes

​Features

​Basic Usage

​Parameters

​Visual Parameters

​Sizing Parameters

​Animation Parameters

​Presets

​Examples

​Slow Motion Water

​Abstract Water Pattern

​Streaming Effect

​Technical Details

​Shader Uniforms (Vanilla JS)

​Animation

​Performance Notes

Features

Basic Usage

Parameters

Visual Parameters

Sizing Parameters

Animation Parameters

Presets

Examples

Slow Motion Water

Abstract Water Pattern

Streaming Effect

Technical Details

Shader Uniforms (Vanilla JS)

Animation

Performance Notes