A self-set brief for a premium members-only gym selling keys before the fit-out is finished — designed, built and shipped end-to-end, the same way a client project runs.
Studio concept
MONOLITH is a fictional Birmingham gym — there's no paying client behind it. The brief was set internally to answer one question: can real-time 3D replace photography for a space that doesn't exist yet? Pre-launch fitness sites almost all fall back to stock imagery and 'artist's impression' JPEGs; this explores the alternative. The deltas below are what would change on day one of a real engagement.
MONOLITH is a concept brief for a members-only bodybuilding gym opening in a Digbeth railway arch — a pre-launch site that has to sell £89/month keys before the fit-out exists, using a real-time 3D fly-through of the space instead of photography that can't be taken yet.
Walk them through the gym the way I would — then show them the price.
The four specific calls that defined this build.
A pre-launch gym has no photography, and stock iron looks like every franchise in the country. The whole site is one stylised 3D scene built in code — the space itself becomes the brand asset, and it weighs a few kilobytes instead of a photoshoot.
Every gym sells memberships the same way: someone walks you across the floor, then names the price. The scroll is that walk — a single unbroken camera move from aerial shot through free weights, machines, and the recovery suite, landing on the membership grid.
The tour hands off straight into three named prices — £15, £59, £89 — with no enquiry form and no 'from' asterisks. If the walk-through did its job, the price is a confirmation, not a negotiation.
Premium here means what's missing: no classes, no cardio theatre, no gamified app. Near-black, one ember accent, one condensed typeface. The house-rules section does the positioning that a 'why us' page normally fumbles.
What was ruled out, and why.
The entire site is one procedural 3D scene. When the real fit-out exists, film replaces the render — but pre-launch, a stylised model of the actual floor plan is more honest than stock photos of someone else's gym.
The premium positioning is subtraction: a keyholder gym sells access, not programming. Cutting the timetable, the trainer bios, and the booking flow isn't a missing feature — it's the pitch.
The fly-through is the selling moment, but reduced-motion and no-WebGL visitors get the full content as stacked sections. The 3D is a layer on top of a complete page, not a gate in front of one.
Every tool chosen on purpose, with a reason that beat the obvious alternative.
The 3D scene ships as a client-only chunk behind a dynamic import; everything else is static HTML.
The gym is procedural geometry built in code — no GLB downloads, no textures. Instanced meshes keep the whole building under 80 draw calls.
One shared scroll-progress value drives the camera spline, the zone lighting, and the copy crossfades, so nothing can drift out of sync.
Static-first deploy; the only heavy asset is a ~150KB JS chunk that loads behind a poster.
Cookie-free. The one funnel that matters: tour completion → 'request a key'.
Every word of the tour exists as plain stacked HTML when the camera can't fly. Content parity, not a 'please rotate your device' apology.
The numbers a real engagement would be scored on.
What would change on day one of a real engagement.
Like this for your business?
