Live site 02Website · Live 3D · WebGL2026

MurermesterMagnus

A Copenhagen mason. The whole page is a white-painted brick wall at real size in low sun, and every block of text gets troweled on as you reach it.

Open the site (opens in a new tab)murermester-magnus.dk

Client
Murermester Magnus ApS, Copenhagen
Sector
Construction
Role
Design, 3D and development
Year
2026
Deliverables
Website, Live brick wall, Service details, Wet-room cutaway, Quote request form, An editor the owner can use themselves
Tech
three.js · WebGL2 · GLSL · Next.js · Sanity

The brief

Murermester Magnus is a Copenhagen mason with more than fifteen years in the trade. Most of the good work is stuff a customer never gets to check: the joints in a wall, the layers under a bathroom floor. The old site ran on stock photos, so none of that came across. The new one had to show the craft and get people to call or ask for a quote.

The approach

Their own tagline is Danish masonry with a focus on detail, so I took it literally. The whole page is a brick wall at real size, painted white like the city's old brick houses and standing in low sun behind a street tree, and every block of text is a patch of lime render that gets troweled on when you scroll to it. The cursor is a work lamp that rakes light across the joints, the way a mason checks them. The old site had a page for each service; here each one opens in place with what it covers and how a job runs, and bathrooms and facades keep the old site's stock photos. Further down, a bathroom floor comes apart into its five layers, and three customers say what it was like. The firm can keep it all up to date from a phone: the number, email and address, the five services and their photos, and the customers' words sit in Sanity, a headless CMS, with the editor in Danish. The page reads them when it loads, with no rebuild, and keeps its own copy if Sanity is slow.

  1. The mason's site on a phone: the headline on a patch of render, on a white-painted brick wall in low sun with leaf shadows.

    01 / 05

    The wall

    Bricks of 228 × 108 × 54 mm with 12 mm joints in running bond, painted white, at their real size on your screen, so a phone shows about a metre of wall. The first screen gets laid course by course, then each block of text is troweled on in render as you reach it. The lamp follows the pointer, a hand's breadth off the wall.

  2. The services on a phone, bathrooms open: their lead, two stock photos of bathrooms and what the job covers.

    02 / 05

    Every service, in full

    Five services, the way the old site had five pages, without leaving this one. Point at one, or tap it on a phone, and it opens with what it covers and how a job runs, in their own words, with the old site's stock photos for bathrooms and facades. Bathrooms are their speciality, so that one leads on to the floor below.

  3. A bathroom floor in cutaway, its five layers listed as buttons.

    03 / 05

    What you pay for

    Tiles, adhesive, membrane, a screed laid to fall and the concrete deck. Lift out any layer, or look at how the clamping ring holds the membrane in the drain and which way the water runs.

  4. A customer's words about their new bathroom, on a patch of render on the white wall.

    04 / 05

    In their customers' words

    A bathroom, a facade and a doorway closed up, each customer's words on a patch of render of its own, first names only.

  5. The quote request form: job type and timing as buttons.

    05 / 05

    Get a quote

    The form asks what the job is and when it should start, promises an answer within 24 hours and opens as an email to them.

Open the sitemurermester-magnus.dk (opens in a new tab)

Under the hood

Measured 18 October 2026, Chrome on a MacBook Pro

Triangles a frame
454,146
The heaviest frame, every pass counted, in 97 draw calls. WebGL2.
Download
2.0 MB
1.6 MB before the first frame, 2.4 MB on a phone.
Slow phone
60 fps
95 % of frames under 16.8 ms, on a phone screen with the CPU slowed four times. There the case shows a film of the site.
If 3D can't run
The wall drawn in CSS, with the services as plain cards. The phone number works the same.

Index 15 projects