Water
Click to change the sample image
Installation
npm i @paper-design/shaders-react
Code
import { Water } from '@paper-design/shaders-react';
<Water
style={{ height: 500 }}
colorBack="#8f8f8f"
colorHighlight="#ffffff"
highlights={0.07}
layering={0.5}
edges={0.8}
waves={0.3}
caustic={0.1}
effectScale={1}
scale={0.8}
fit="contain"
speed={1}
/>
Props
| Name | Description | Type | Values |
|---|---|---|---|
| colorBack | Background color | string | Hex, RGB, or HSL color |
| colorHighlight | Highlight color | string | Hex, RGB, or HSL color |
| highlights | A coloring added over the image/background, following the caustic shape | number | 0 to 1 |
| layering | The power of 2nd layer of caustic distortion | number | 0 to 1 |
| edges | Caustic distortion power on the image edges | number | 0 to 1 |
| waves | Additional distortion based in simplex noise, independent from caustic | number | 0 to 1 |
| caustic | Power of caustic distortion | number | 0 to 1 |
| effectScale | Pattern scale relative to the image | number | 0.01 to 7 |
| scale | Overall zoom level of the graphics | number | 0.1 to 10 |
| fit | How the image fits the canvas | enum | | "contain" | "cover" |
| speed | Animation speed | number | 0 to 3 |
Description
Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image