Introducing v3 — a new editor, faster engine, and more.

See what's new

Documentation

Documentation Components

Water

Translucent water — a refractive, light-absorbing body that deepens to its colour with thickness, wrapped in a wind-driven wave surface that reflects a procedural sky, with Fresnel-bright grazing edges and foam breaking on the crests and shoreline

Props

originstring
Default:center
Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center position of the water shape
scalenumber
Default:1
Scale of the water shape (1 = default size)
rotationnumber
Default:0
Rotation of the water shape in degrees
waterColorstring
Default:#00bfeb
The colour the water saturates toward with depth
claritynumber
Default:0.4
How much of the reflected sky transmits through the body
depthnumber
Default:5
How quickly the water darkens and saturates toward its colour with thickness
shallowsnumber
Default:0.5
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 colour
causticsnumber
Default:0.15
Intensity of the light caustics bubbling up through the body — bright veins of focused light churning inside the water
causticScalenumber
Default:6
Size of the caustic veins — higher = finer, busier light patterns inside the body
choppinessnumber
Default:0.8
Height of the wind-driven waves — the depth of the folds that bend the reflection
waveScalenumber
Default:3.5
Scale of the wave fronts — higher = smaller, busier ripples
swirlnumber
Default:0.6
Swirl of the flow — domain-warps the wave fronts into curling eddies
speednumber
Default:0.5
Speed of the rolling waves. 0 pauses the surface.
reflectionnumber
Default:2
Strength of the reflected sky across the surface
envRotationnumber
Default:0
Rotates the reflected sky — spins where the bright sky and sun fall
sharpnessnumber
Default:0.1
Tightness of the sun glint and reflected sun
lightAnglenumber
Default:30
Direction of the sun, in degrees — drives the glint and where the sun reflects
foamnumber
Default:0.3
White foam breaking on the wave crests and along the shoreline edge
edgeSoftnessnumber
Default:0.05
Softness of the shape boundary edge
shapeShapeConfig
Default:circleSDF
Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.
shapeSdfUrlstring
Default:""
URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

Usage

<Shader>
  <Water />
</Shader>
Previous
Voronoi
Next
Watercolor