The studio reel that runs live in WebGL, with no video file

A heap of glossy plus-shaped objects tumbles slowly on the screen, cobalt and black and white, each one catching a hard highlight as it turns. It reads like a rendered showreel someone exported to video.

Open the network tab. There is no video.

That is Lusion, the site of a Bristol studio founded in 2017 by Edan Kwan, a self-taught coder from Hong Kong who started out in music, and every frame of that pile is being drawn live on your own GPU. I checked the honest way: the homepage document is 58KB, and it contains exactly one canvas element and zero video tags. A showreel would be a fat download, a half-minute of crisp 1080p runs to tens of megabytes before it loops; this is shaders and geometry instead, and it never loops because it was never recorded. Scroll and the camera moves through the scene, because it is a scene, not a timeline.

The resize test settles it for anyone still doubting. Drag the window narrower and an exported video would letterbox or crop; this recomposes, full resolution, the reflections still landing where the light says they should. My scroll never caught a dropped frame on the way down.

What the bundle confesses

Pull the site's main script bundle and the blueprint is right there: 1.25MB of JavaScript in which Three.js class names sit alongside the word Shader, which appears 477 times. So the renderer is the standard WebGL library, and the look comes from the mountain of custom GLSL material and lighting code stacked on top of it. I went in expecting a fully in-house engine; the source says otherwise, and the source wins.

The studio's signature move is older than this homepage. For the 2019 version of lusion.co, which took Site of the Month at Awwwards, the team published a case study laying it out: simulate the expensive things offline in Houdini FX, bake the animation into textures and ArrayBuffers, then interpolate between keyframes in real time on the GPU. Matcap shading fakes the lush translucent materials at almost no cost, an analytical volumetric light adds the glow, and, encoded as 16-bit integers, the cloth animation data for mobile came down to 246KB. The physics you feel was computed weeks earlier; your graphics card just plays it back with interest.

Matcap, the quiet hero in that list, deserves its sentence of explanation. Instead of computing how light bounces off a material, you photograph or render the finished look once, onto a sphere, and every surface simply looks its shading up from that image by its angle: a full lighting rig flattened into one texture read per pixel. It is why the plus-shapes can look wet and expensive while costing almost nothing per frame.

The current site went further and the judges noticed: Site of the Year 2023 at Awwwards, with the top annual prize from FWA and CSSDA landing on the same build, a sweep the studio talks through in a Codrops interview from this April. Their Awwwards profile lists 14 Site of the Day wins besides. That is the industry telling you it is hard. The network tab is you checking that it is real.

The maker learned in public

Kwan's road to that bundle is on the record if you want to walk it backwards. In 2016, a year before Lusion existed, he gave a conference talk on creative coding with WebGL at Graphical Web, built around the particle and shader experiments he had been publishing as his own training ground. Graphical Web was a standards-and-SVG sort of crowd, which makes the recording a time capsule: real-time GPU work as the strange new guest, presented by someone about to build a studio on it.

Watching it after scrolling the current homepage feels like finding the sketchbook. The obsessions are already in place a decade early: GPU particle systems, light that is faked rather than simulated, expensive looks bought with cheap math. The studio polished the handwriting; the hand is the same.

Where the path starts

Custom GLSL is the load-bearing skill in all of the above, and The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe is the gentlest way in: fragment shaders from first principles, every example editable and running in the page.

The renderer is the other half of the stack, and it is free. Three.js sits at 116,200 GitHub stars and 36,600 forks, which makes it close to the default way a browser gets handed a 3D scene. The library under this homepage is the same one under a long shelf of other sightings here.

For the guided version of the climb, Bruno Simon's Three.js Journey course packs 116 hours of video into 87 lessons, custom shaders included, with just under 51,000 students enrolled. Simon's own portfolio is the one linked at the bottom of this page, so the course is the technique taught by someone who used it to show off first. Fifty thousand students for a single-author course is its own small sighting: the real-time browser scene went from party trick to teachable craft inside a decade.

For a smaller dose of the same sorcery, real fluid dynamics solved in a fragment shader churns along in about fifty kilobytes of JavaScript.

More WebGL with no safety net: a portfolio you drive a car through.