BRU Works
A dark, high-contrast site for a consultative tech studio. A single WebGL monolith carries the identity while the copy explains a three-step engagement model.
Overview
BRU Works is a consultative technology studio. The site needed to feel like a builder with a point of view, not another agency template with a services grid.
Studio sites often describe a process in abstract language and bury the actual offer. BRU needed a clear three-step engagement model, a distinct visual signature, and enough restraint that the work stayed legible.
Goals
- Establish a dark, confident identity that could hold future case studies.
- Explain discovery, consultation, and delivery as a concrete sequence.
- Use one 3D element as a brand mark, not a scene that competes with the copy.
- Keep the content in semantic HTML while the motion layer runs on top.
My contribution
- Art direction and interface design
- Next.js implementation and component system
- WebGL scene, lighting, and scroll choreography
- Responsive behaviour and production build
Design & engineering decisions
One monolith, one job
The hero uses a single faceted icosahedron with rim lighting and atmospheric dust. It gives the studio a recognisable mark without turning the page into a 3D demo. The canvas is isolated in a client component; the headline and offer remain ordinary text.
Process as a sequence, not a card grid
Discovery, consultation, and delivery are numbered rows with a description and a supporting detail line for each stage. The format makes the engagement model scannable and gives the page a rhythm that a three-column card grid would flatten.
A calibration motif
The preloader borrows from an instrument panel: a BRU_SYSTEM | CALIBRATING... readout with a percentage counter and a laser sweep. The motif is used once so it reads as a studio signature rather than a fake terminal.
Motion in service of sequence
GSAP and Lenis are used to reveal sections and move a ghost numeral through the process. The page still reads top to bottom with motion disabled or unavailable.
Architecture
- The WebGL layer is a single canvas, not a scene per section.
- Page copy, headings, and links are regular DOM elements and remain readable without the canvas.
- The production build is deployed on Vercel.
Implementation
- A faceted icosahedron with flat shading and a mouse-following point light creates the rim-lit silhouette.
- ScrollTrigger coordinates the section reveals and the vertical movement of oversized background numerals.
- The header uses a compact nav with a single accent link for the primary action.
- The process rows pair a short description with a supporting detail line for each phase.
Challenges
Keeping WebGL from becoming the product
The easiest version of this site would have been a full-screen 3D experience with the copy as an overlay. Instead the canvas is confined to the hero and the rest of the page is typography, rules, and spacing.
Making motion feel deliberate
Every section uses the same easing family and a short stagger. The goal is continuity between sections, not a different effect for each one.
Outcome
Live at bruworks.vercel.app. A complete studio site with a reusable section system, a single WebGL signature, and a clear three-step engagement model.
What I learned
A 3D object works best when it has a job.
Here it gives the studio a mark while the process copy does the selling.