Web Design · Experiment 01
WebGL Immersive Hero
A single fullscreen quad, a fragment shader, and a flow of fractal noise — a page background that feels alive and bends toward your cursor. This is the finished design, running live below.
WebGL 2.0
three.js
GLSL fragment shader
GSAP
↑ This is the real thing, running live. Move your cursor inside the frame to bend the light.
Learn how to make this
Build this shader hero, step by step
Follow the full requirements-first tutorial — from a blank canvas to the mouse-reactive, production-optimized hero you see above. Copy-paste code at every stage.
Read the tutorial