Interactive 3D work that ships in production
Technology
Most studios that build with AI can't also build with WebGL. It's a different discipline: shader math, frame budgets, and the willingness to hand tune something no component library gives you for free. We build directly on WebGL and, more often, through Three.js, the library that does the heavy lifting of talking to the GPU.
We reach for it when a moment calls for something a flat page can't do: a portal, a scrollytelling homepage, a scene that reacts to the cursor. We don't reach for it by default. Every shader pass and every particle is a frame budget spent, and that budget runs out fast on an older device.
The craft
What WebGL buys, and what it costs
- Three.js, pushed past the example gallery
The background for IBM's AI Alliance site and the portal behind Hypermode's landing page both started as Three.js examples, marching cubes and metaballs, then got a custom shader layered on top that colors and moves them based on scroll and camera distance. The library gets you the scene. The shader makes it yours.
- Every particle is a frame budget
The starfield behind Hypermode recycles three fixed blocks of particles instead of generating an unbounded field, because unbounded means unbounded GPU cost. Every animation we ship gets that same scrutiny: a fixed count, and a hard look at what happens on a five year old laptop, not just a new one.
- When not to reach for it
We don't put WebGL on a page whose job is to be read. Documentation, pricing, checkout: those pages need to load fast and get out of the way. WebGL earns its place on a homepage or a launch moment, not on the fifty content pages behind it.
- Shaders tuned to a specific brand
For Angular's docsite we built a scrollytelling homepage with custom shaders mapped to Google's own gradient mesh, converted from print values for a web canvas. For M8 we built a glitch shader and a mouse driven fluid distortion effect. Neither is a stock effect; both are tied to a specific brand decision.
