This HTML page you're viewing is enhanced with a full-screen <canvas> element. A fragment shader runs on this canvas, determining the color and opacity of each pixel. The shader takes several inputs: scroll position (or animation state), time, and screen dimensions.
Gathering time and screen dimensions is straightforward, but for animation state we leverage the Anime.js library.
With these inputs ready, we feed them into the shader as uniforms. The WebGL component of this demo uses a minimal JS setup to render the fragment shader on a single, full-screen plane. No additional libraries are required.
The shader utilizes Perlin Noise to create dynamic visual effects.
Initially, we generate a semi-transparent mask to shape a glowing effect. This mask is created with low-scale Perlin Noise and uses the scroll position as a threshold.
By adjusting the thresholds on the same Perlin Noise, we can
(a) gradually dim parts of the screen, darkening pixels before they become transparent
(b) create a border effect along the edges, which we use to apply a glowing outline
The glow itself is produced using two Perlin Noise functions - one for the shape and one for the color. Both functions operate on a larger scale and are animated with the time input instead of the scroll position.