Lagoon shader preview: Painted water, from above or out to the horizon.
ittybitty

Lagoon

Painted water, from above or out to the horizon.

Code

The usage always matches the preview, layers and performance settings included. No build step or package.

Copy embed gives one block to paste into any page or site builder, no setup. For your own code: add lagoon.js, ittybitty-shader.js, runtime.js, pointer.js, ripple.js, texture.js next to this page. Highlighted values follow the controls.

<!-- Quickest: one element. Size it with CSS; it fills its box. -->
<script type="module" src="./ittybitty-shader.js"></script>
<ittybitty-shader effect="lagoon" style="width: 100%; height: 480px;"></ittybitty-shader>

<!-- Or with JavaScript, for full control: -->
<canvas id="lagoon" aria-hidden="true" style="width: 100%; height: 480px; display: block"></canvas>

<script type="module">
  import { lagoon } from './lagoon.js';

  const canvas = document.getElementById('lagoon');
  const effect = lagoon(canvas, {
    showWater: true,
    showFoam: true,
    showCaustics: true,
    showSparkles: true,
    showClouds: true,
    showIslands: true,
    view: 'above',
    image: '',
    speed: 0.6,
    scale: 1,
    depth: 0.6,
    refraction: 0.6,
    caustics: 0.8,
    foam: 0.6,
    sparkle: 0.7,
    interactive: true,
    responsiveness: 0.5,
    shallow: '#35e0cf',
    deep: '#1250b4',
    sky: '#5fb8ff',
    // Performance
    dpr: 1.5,
    adaptive: true,
  });

  // Later: effect.set(…), effect.pause(), effect.resume(), effect.destroy()
</script>

Details

Stylised water in the manner of hand-painted adventure games. From above, the surface bends a sandy lagoon floor, an image or the layers beneath, and focus sunlight into crisp caustics with a rainbow rim, over shelves of colour from turquoise to deep blue, foam rolling around sandbars and star-shaped glints. Turn the water colour off for clear water: only refraction and light, over an image, the layers beneath or the page. The pointer drags a V-shaped wake behind it, and clicks send out ripples. At the horizon, toon clouds, far islands and a sea that steps from deep blue to sky, carrying white wave strokes and a path of sparkles. A small wave simulation runs only while the water is stirred.

Payload
12.6 KB brotli for lagoon.js and ittybitty-shader.js and runtime.js and pointer.js and ripple.js and texture.js, measured at build time. See the method.
Resolution
Device pixel ratio capped at 1.5, with adaptive resolution recommended.
Frame rate
Display rate.
When unseen
Stops rendering when the canvas leaves the viewport or the tab is hidden, and resumes where it left off.
Reduced motion
Shows a single still frame. Controls still update it.
Layers
Up to five effects fuse into one shader and one draw call. Filters such as dithering and halftone process the layers beneath them.
Browsers
Any browser with WebGL2: Chrome and Edge 56+, Firefox 51+, Safari 15+.
Licence
MIT. Copy it, change it, ship it.