Abstrakt
View LiveTechnologies used
- Three.js
- WebGL
- 3D
- Blender
Overview
I worked with Abstrakt's in-house design team to bring a set of interactive 3D overlays to life across their site. The starting point was a batch of Blender meshes their team had already modelled, undulating tube forms designed to reveal and grow down the page as the user scrolls. My job was to take those meshes, get them performant, and build the behaviour, lighting and interaction layer around them in Three.js.
First step was mesh optimisation. I took the Blender files and reduced vertex counts, cleaned up some geometry issues in the source meshes, and got everything prepped for real-time rendering before it touched WebGL. From there I moved into lighting and material work, building out shader uniforms for the tube surfaces and a base ground plane, then developing the reveal behaviour: the tubes growing down the screen as if unfurling into view.
Handing control to design
Once the core look was in place, I shipped a prototype with a full set of exposed controls, environment map colour and intensity, PBR material properties, base colours, turbulence, so the design team could shape the final look themselves without needing to touch code. That handoff mattered: it meant the visual direction stayed entirely in their hands, and I could focus on making sure the underlying system was flexible enough to support whatever they landed on.
With the look signed off, I helped integrate the work into the live site as isolated JS modules, each tracking DOM elements to trigger animations at the right scroll points. Two scenes came out of the project: a hero reveal, and a longer services section where the tube geometry grows down through multiple content blocks, each with its own trigger point along the way.
The overlays have since given way to more static imagery on the live site, the way front-ends tend to evolve over time.