Our homepage hero looks like a video. It isn't. It's a still long-exposure image of Eau Rouge — the famous uphill left-right-left at Spa-Francorchamps — brought to life by two layers of hand-built rendering, weighing less than a single Instagram photo.
The first layer is the taillight streams. Each trail is a Catmull-Rom spline — a curve defined by a handful of control points that the renderer interpolates smoothly between. We placed every point by hand: 25 paths for desktop and a separate set of 10 for mobile, each one traced along the actual racing line as it appears in our hero photograph, climbing through the corner and disappearing over the crest. Generic particle libraries scatter dots randomly; these trails follow the geometry of a real corner because a person put them there.
Placing 35 splines by trial and error in code would have been miserable, so we built a tool for it: a small in-house trail editor that loads the hero image, lets us click control points directly onto the corner, tune each trail's color, speed, width, and tail length, and export the result as data. It's the same discipline game studios apply — when the art demands iteration, build the authoring tool first. The editor never ships to visitors; its output does.
At runtime, each trail renders on a 2D canvas in twelve alpha-banded segments — bright at the head, fading through the tail — drawn twice per frame: a wide soft pass for glow and a narrow pass for the light core, composited additively so overlapping trails bloom the way headlights do in long-exposure photography. The whole system is a few kilobytes of hand-written canvas code.
The second layer is depth. The hero image ships with a companion depth map — a grayscale image encoding how far each pixel is from the camera. A fragment shader we wrote in raw WebGL (about fifteen lines of GLSL, no three.js) displaces each pixel based on its depth and your pointer position. Move the mouse and the barrier at the apex shifts more than the treeline behind it: a still photograph gains parallax. On phones, scroll position drives the same effect.
Everything degrades deliberately. The image underneath the canvas is a plain, server-rendered element, so visitors on failing GPUs, readers who prefer reduced motion, and search crawlers all get the full scene instantly. The WebGL and the trails are enhancement, never a requirement — and the whole hero, shaders and splines included, costs about 100 kilobytes on a phone.
That's the philosophy we bring to client work too: bespoke where it creates a feeling you can't buy off a shelf, boring and bulletproof everywhere else.
Tagged with
Let's discuss how our expertise can help you achieve measurable results for your brand.
