anthemionanthemion-pelagos
← all of Extras

Extras

anthemion-pelagos

A path of light on dark water

Built from a reference frame — a moonlit coast — and deliberately not all of it. The surf and the backlit seed heads in that image are geometry problems a raymarcher turns to mush, and most of its sparkle is GIF dither rather than anything in the scene. What was worth taking is the light path on the water. On the shelf for the same reason as the other two: unmistakable, and not Greek.

A wave field solved per pixel against one plane — no volume, so it is the cheapest of the three. The sparkle is not scattered or drawn: a wave surface has a normal that varies faster than a pixel can average, so a tight specular lobe against a low light breaks into thousands of points by itself, exactly as a real sea does. Wave detail fades with distance by wavelength, which is what keeps the horizon from crawling — the failure every naive ocean shader has. Inside an <anthemion-sky> the light comes from the page’s own hour, and the road is longest when the light is lowest.

Integration

<link rel="stylesheet" href="anthemion.css">
<script type="module" src="anthemion.js"></script>

<anthemion-pelagos swell="46" chop="58" wind="210" glitter="42" headland="52" altitude="6" drift="100" zoom="100" render="80" place="inline"></anthemion-pelagos>

Slot

A full-bleed animated backdrop for a page that wants water behind it. The third of three states — nephele is air, selas is sky, this is water.

Custom properties

  • --pelagos-water
  • --pelagos-light
  • --pelagos-sky
  • --pelagos-land
  • --pelagos-layer
  • --pelagos-ratio

Also in surface