Interactive 3D WebGL Experience

The name ERIK VAN DE BLAAK stands in fourteen chrome letters above a pink neon grid that runs endlessly towards the horizon, while stars fly towards the camera. There is no video or pre-rendered image in it: Three.js 0.160 renders every frame live in the browser.

The letters come from a font in JSON format (Droid Sans Bold) that Three.js loads with its FontLoader. While that file comes in, a loading screen shows INITIALIZING SYSTEM... After that, each letter is its own TextGeometry, 0.2 deep with a bevelled edge, and centred on its own middle, so it turns around its own axis. The material is a MeshPhysicalMaterial: fully metallic, slightly rough (0.2), with a clear coat on top and a faint cyan glow.

On load the letters grow one by one from nothing to full size, in a second and a half with a springy GSAP animation (elastic.out), each 0.05 seconds after the one before. After that each letter bobs up and down along a sine, with a small phase shift per letter, so a wave runs through the name. At the same time the letters turn slowly, with a slight sway.

The road is a flat plane of 80 by 400 units. The grid is drawn once on a 1024 by 1024 pixel canvas: black, with hot pink lines (#ff00aa) every 128 pixels, 4 pixels thick and with a shadow glow. That texture repeats twice across and ten times along. The plane itself does not move; the code shifts the texture by 0.6 every second, which makes the road look endless. The grid emits light, and a bloom pass (UnrealBloomPass, strength 1.2, threshold 0) puts a glow around it. Exponential fog lets the distance fade into the dark, and a cyan light shines into the scene from below.

Above it fly 3,000 stars, together a single Points object. Every frame, each star moves a base step plus its own random speed towards the camera. Once a star has passed the camera, it starts again far away in a new spot. After each pass the updated positions go to the GPU again.

Move the mouse and the camera follows: at most two units sideways and half a unit up or down. Each frame it covers 5 per cent of the remaining distance, so the movement eases out smoothly, and it keeps looking at the letters. The demo only responds to the mouse: on a touchscreen the camera stays put. Everything is in one PHP file, with Three.js and GSAP 3.12.5 loaded through an import map from jsDelivr.