water
A caustic water-surface distortion. Use it as an image filter for shimmering reflections, or run it standalone as an animated texture.
Preview
live Click the preview to load a random sample image. Install
npm npm i @devmischief/shaders-svelte Code
import { Water } from '@devmischief/shaders-svelte';
<Water
width={1280}
height={720}
image="/assets/flowers.webp"
colorBack="#8f8f8f"
colorHighlight="#ffffff"
highlights={0.07}
layering={0.5}
edges={0.8}
waves={0.3}
caustic={0.1}
size={1}
scale={0.8}
rotation={0}
offsetX={0}
offsetY={0}
speed={1}
fit="contain"
/>
Shader Props
10 | name | description | type | values |
|---|
| image | Optional source image. Without one, the shader renders a standalone water texture. | string | url |
| colorBack | Background color visible through transparent regions of the image. | string | hex / rgba |
| colorHighlight | Color of the caustic highlights and crests. | string | hex / rgb |
| highlights | Strength of the highlight color overlaid along the caustic shape. | number | 0 → 1 |
| layering | Strength of the secondary caustic layer for added depth. | number | 0 → 1 |
| edges | Caustic distortion power along the image edges. | number | 0 → 1 |
| waves | Additional simplex-noise distortion, independent of the caustic. | number | 0 → 1 |
| caustic | Power of the primary caustic distortion. | number | 0 → 1 |
| size | Pattern scale of the water texture. | number | 0.01 → 7 |
| fit | How the source image is fit into the canvas. | string | cover · contain |
Common Props
9 | name | description | type | values |
|---|
| scale | Overall zoom level of the graphics. | number | 0.01 → 4 |
| rotation | Overall rotation angle of the graphics. | number | 0 → 360 |
| offsetX | Horizontal offset of the graphics. | number | −1 → 1 |
| offsetY | Vertical offset of the graphics. | number | −1 → 1 |
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| speed | Animation speed multiplier (default 1). | number | — |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |