Liquid distortion with Three.js
A gallery where images melt into one another with a liquid distortion that follows the cursor. Every transition is computed in real time on the GPU with WebGL, no video.
The technique
Three pieces work together: Three.js manages the scene and the WebGL render; a GLSL shader computes the distortion pixel by pixel directly on the GPU; and a procedural noise field drives the liquid displacement and the blend between images. All at 60 frames per second, lightweight, with a static fallback when WebGL isn't available.
How it's built
Three.js
Three.js is the library that orchestrates everything. It creates the 3D scene, sets up the camera and the full-screen plane, loads the textures and talks to the graphics card through WebGL. Without Three.js you'd write hundreds of lines of raw WebGL; with it, we can focus on the effect itself rather than the plumbing.
WebGL
WebGL is the browser API that draws hardware-accelerated graphics directly on the GPU. It's what lets everything run at 60 frames per second with no plugins and no video: the same kind of engine that powers video games, but inside a web page and with nothing to install.
GLSL shaders
Shaders are small programs written in GLSL that run on the GPU, once for every pixel, in parallel. This is where the magic happens: the shader computes how much the image bends, blends the two scenes and shifts the colour channels to create the chromatic aberration. That massively parallel computation is what makes it so fast and fluid.
What it's for
Effects like this give personality to portfolios, product launches and landing pages that want to stand out. At Nexe Labs we build them custom, optimised to load fast and work on any device. If you want a site with this level of polish, let's talk.