Fabrica: a 3D spine clinic site drawn like a 1543 book

For private clinics that want patients to understand their problem before they book. A self-initiated concept: a live 3D spine you scroll level by level, a "where does it hurt" picker and a five-step booking request. The clinic is fictional, and the booking demo sends nothing.

Fabrica is a website I designed and built for a fictional private spine clinic. Someone looking for a spine clinic is often in pain and worried, so the site starts with the body: a live 3D spine you scroll down level by level, drawn in the engraved line of Andreas Vesalius's 1543 anatomy book, De humani corporis fabrica.

I laid this case study out as a new edition of that book. On each spread, a real page from 1543 sits beside the same anatomy drawn by the site.

Role: design and build, the real-time 3D, the booking flow and the film

Deliverables: a live website with real-time 3D for desktop and phone, a five-step booking, a 55-second film

Tools: three.js, JavaScript, a custom engraving shader, BodyParts3D anatomy

Type: self-initiated concept. The clinic, its clinicians and its prices are fictional

Fifty-five seconds of the site in use on a desktop in a clinic room: the anatomy, the region picker and the booking, every click shown.

A clinic's website is often the first thing a person in pain reads about their back, and many open with credentials, jargon and a phone number. Fabrica starts with the body and walks down all 33 vertebrae, one level at a time. Some evidence supports showing the body first: in an updated review of 88 trials, 48 of the 60 that measured it found that video animation improved what people knew about their health, although the authors rate the overall risk of bias as high.

Vesalius drew his anatomy from his own dissections, and its engraved line gives the site its look and its name. A custom shader draws every vertebra the same way, live in the browser, with hatching that follows the form.

Four plain choices instead of medical terms: neck, between the shoulders, lower back, down one leg. Choose one and the camera moves to those levels, they light up in copper, and the page says what it often is, what is usually tried first and when surgery comes up. The A&E warning stays on screen with every answer, and the sciatica answer was checked against the NHS page. It is a design concept, not medical advice.

Scroll on and the lower back comes apart at L4 and L5, so the disc between them and the nerve that runs to the leg can be seen and named. Then it closes again, and the next chapter lists the usual order of care, with surgery last. It shows where things are, not how a body heals.

Booking takes five steps: reason, clinician, day and time, details, then check and send. A case sheet stays beside every step and fills in as you choose, with the £250 fee always in view and a do-not-book warning for emergencies. Errors show beside the field, every step has Back, and the last step gives you a calendar file. Nothing is sent.

Keyboard and screen-reader users get real tabs and buttons, labelled steps, and focus that moves to each new step. Reduced-motion mode replaces camera movement with still views. The Pause control stops automatic motion; scrolling can still change the scene. An engraved placeholder appears while the 3D model loads, and the model is 1.16 MB instead of 3.04 MB.

Three engraving styles were cut, and the flowing line was kept. The anatomy is BodyParts3D, re-cut into one piece for each level from C1 to S1 and one for each disc, so any level can light up or come apart. It was compressed without loss from 3.04 MB to 1.16 MB and is decoded in plain JavaScript, because the site's security policy blocks WebAssembly. The booking is tested end to end, with 30 checks on desktop and 30 on a phone.

Case study: akintadestudio.com/work/fabrica

Live demo: akintadestudio.com/work/fabrica/live

Credits: Vesalius plates, Wellcome Collection, CC BY 4.0, via Wikimedia Commons. Spine model: BodyParts3D, © The Database Center for Life Science, CC BY 4.0 (CC BY-SA 2.1 JP in its files), modified by AKINTADE; the modified model is CC BY-SA 4.0. Music: Skyline, from Mixkit, under the Mixkit Stock Music Free License.