Developer Builds WebGL Shader That Simulates Real Capillary Physics for UI Press Effects

A developer has created a WebGL fragment shader that models capillary action — the physics of liquid spreading through porous material — to power a realistic ink-spread UI press effect. Unlike common web animations that rely on radial gradients and opacity transitions, this approach uses the Lucas-Washburn equation, where a wetting front advances proportionally to the square root of time. The implementation includes a regularization fix to prevent the infinite initial speed predicted by pure Washburn theory, and an anisotropy adjustment so the spreading front forms a realistic elongated ellipse rather than a perfect circle. The shader was built as the interaction engine for Tantu, a React design system, and handles browser constraints such as Safari's limit on simultaneous live WebGL contexts. The project's live demo and full source code, including the shader and test suite, are publicly available on Netlify and GitHub.