Public
Glass buttons that fill with shader water on click
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Two chunky glass buttons filled with shader-simulated water. Raw WebGL, no libraries.
- Left vessel starts empty and fills ~8.5% per click (caps at 95%).
- Right vessel always settles back to half full.
- Both slosh when clicked — a side-to-side tilt plus a localized splash.
The water surface is a 1D height-field (128 columns) integrated on the CPU each
frame, encoded into a 1×N texture, and handed to a fragment shader that draws
the body, caustics, and a bright waterline. CSS handles the chunky rounded glass.
Rendering mermaid diagram...
main.ts— Hono server (serves page + assets,/sourceredirect)index.html— markupfrontend/style.css— dark aquarium theme, glass vesselsfrontend/water-button.js— WebGL sim + interaction