Shaders
Click to change sample image

Water

Installation

npm i @paper-design/shaders-react

Code

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

<Water
  style={{ height: 500 }}
  colorBack="hsl(205, 51%, 15%)"
  highlightColor="hsl(0, 0%, 100%)"
  highlights={0.07}
  layering={0.5}
  edges={0.8}
  waves={0.3}
  caustic={0.1}
  effectScale={1}
  scale={0.9}
  fit="contain"
  speed={1}
/>

Props

colorBack, highlightColor

Background and highlight colors.

highlights

A coloring added over the image/background, following the caustic shape.

layering

The power of 2nd layer of caustic distortion.

edges

Caustic distortion power on the image edges.

waves

Additional distortion based in simplex noise, independent from caustic.

caustic

Power of caustic distortion.

effectScale

Pattern scale relative to the image.

scale

Overall pattern zoom.

fit

How the image fits the canvas.

speed

Animation speed.

Description

Mimicking water surface distortion with a combination of noises. Can be applied over the texture or just be used as an animated pattern.