Shader Atlas
한국어
◆ Materials

Water

물 재질

Translucent water with wind-driven waves, reflected sky, and foam along crests and shores.

Also known as: WaterWater surfaceWater material

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, Water } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Water />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, Water } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Water/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, Water } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Water />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, Water } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Water />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Water',
    }
  ]
}, { disableTelemetry: true })

Props · Water

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
originOriginSet in codecenter—Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the water shape
scaleScale10.1 – 3 (step 0.01)Scale of the water shape (1 = default size)
rotationRotation00 – 360 (step 1)Rotation of the water shape in degrees
waterColorWater Color#00bfeb—The color the water saturates toward with depth
clarityClarity0.40 – 1 (step 0.01)How much of the reflected sky transmits through the body
depthDepth50 – 8 (step 0.01)How quickly the water darkens and saturates toward its color with thickness
shallowsShallows0.50 – 1 (step 0.01)Brightness of the thin shallow water at the edges — high fades the rim to light translucent water, low keeps the edges close to the deep water color
causticsCaustics0.150 – 2 (step 0.01)Intensity of the light caustics bubbling up through the body — bright veins of focused light churning inside the water
causticScaleCaustic Scale61 – 20 (step 0.1)Size of the caustic veins — higher = finer, busier light patterns inside the body
choppinessChoppiness0.80 – 1.5 (step 0.01)Height of the wind-driven waves — the depth of the folds that bend the reflection
waveScaleWave Scale3.50.5 – 8 (step 0.01)Scale of the wave fronts — higher = smaller, busier ripples
swirlSwirl0.60 – 1.5 (step 0.01)Swirl of the flow — domain-warps the wave fronts into curling eddies
speedSpeed0.50 – 4 (step 0.01)Speed of the rolling waves. 0 pauses the surface.
reflectionReflection20 – 2 (step 0.01)Strength of the reflected sky across the surface
envRotationEnv Rotation00 – 360 (step 1)Rotates the reflected sky — spins where the bright sky and sun fall
sharpnessSharpness0.10 – 1 (step 0.01)Tightness of the sun glint and reflected sun
lightAngleLight Angle300 – 360 (step 1)Direction of the sun, in degrees — drives the glint and where the sun reflects
foamFoam0.30 – 1 (step 0.01)White foam breaking on the wave crests and along the shoreline edge
edgeSoftnessEdge Softness0.050 – 1 (step 0.01)Softness of the shape boundary edge
shapeShapeSet in code{"type":"sphere3D","radius":0.35}—Serialized shape configuration (JSON)
shapeSdfUrlshapeSdfUrlSet in code—URL to a pre-generated SDF .bin file
shapeTypeshapeTypeSet in code—Active SDF shape type

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Glass유리 렌즈

A glass lens that refracts content beneath a custom shape and adds a soft luminous edge.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Goo구이 액체

Wet liquid blobs that merge and bulge inside a shape, with sliding highlights and a translucent body.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Ripples물결무늬

Concentric animated ripples emanating from a point.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Wave Distortion파동 왜곡

The input ripples in a repeating wave that can move across the frame.

It resembles light entering clear water while the sky wavers in its reflection. Foam gathers along the wave crests and the edge of the water.

Raise `clarity` to let more reflected sky pass through the body. `depth` controls how quickly thicker areas deepen in color, and `choppiness` changes wave height. Raise `waveScale` for smaller, busier waves; `foam` adds white foam.

The effect creates its own water surface and can sit over a still backdrop or shape as decoration. Constantly moving waves are a poor fit for stable UI surfaces or small lettering, so keep motion restrained behind text.

When to use

Use it for wave backdrops, water-themed marks, or the water in an illustration. Avoid it on stable controls or behind small text that must stay readable.

Open as page ↗