0

Hello world,welcome to my site.

Scroll. The camera rides a spline through the scene, twenty thousand particles morph between shapes, and the text comes apart letter by letter.

01 · Scroll as camera

The page is a track the camera runs along.

A Catmull-Rom spline through six points in the scene; scroll position maps to distance along it via GSAP ScrollTrigger, smoothed by Lenis so the wheel feels like inertia rather than steps. This is the single most reused device on award sites of the last two years.

02 · Particle morph

One buffer, three shapes, a GPU in between.

Every particle carries three target positions, for a sphere, a torus knot and a cube. The vertex shader mixes between them with a scroll-driven uniform and adds curl-like noise so the transition billows instead of sliding. Nothing is recomputed on the CPU per frame.

03 · Mouse reveal

The cursor is a torch.

The fractal blob is lit only where the pointer is. A raycast finds the point under the cursor each frame and the fragment shader brightens within a falloff radius, the "reveal on interaction" pattern currently fashionable on corporate hero scenes. The surface pattern is still the Julia set from the hand-written WebAssembly module.

Magnetic buttonTry hovering
WebGLGLSLWebAssemblyGSAPLenisThree.jsBloomChromatic aberrationWebGLGLSLWebAssemblyGSAPLenisThree.jsBloomChromatic aberration
Hover: image displacement shader
04 · Post-processing

The film look.

Everything passes through bloom, then a custom shader pass that separates the colour channels radially (chromatic aberration), darkens the corners (vignette) and adds animated noise, on top of a CSS SVG grain overlay. These are what make a render look "shot" rather than computed.

fps
20kparticles
278 BWebAssembly