LM-48

Copper & Main

A plumbing company site where the camera follows copper pipe down a house, through a basement burst and into the sewer.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly.

A complete site for COPPER & MAIN, an invented plumbing company, built entirely in code and drawn live with three.js. The plumber's tools float in front of a navy block wall while a bundle of copper lines runs down out of frame, and the visitor follows the pipes down through the house in cutaway: past fire-stopped floors with stencilled level names, and four stations, one service at each (a drip growing at a sweat joint in the bath, a drain cable spinning into the kitchen cleanout, a tankless heater reading 120°F, a manifold of orange and blue PEX). In the basement the pressure gauge in the header climbs, a pipe splits and the spray floods the floor, mirroring the copper in the water, beside the 24/7 line and what to do first. Then the main shuts off, a clamp closes, the wrench from the hero turns it, the water swirls down the floor drain and the camera follows it into a sewer-camera run with a live feet and clock readout, roots at a joint and a glossy relined section. Every tool hangs back in its outline on a pegboard beside the booking form. Everything a plumbing site needs is on the page: click-to-call and a phone bar, services with prices and detail drawers, a rate card, a membership, financing and offers, reviews, licences, a service area map with a ZIP check, office hours, an FAQ, a privacy note, a 404 and Plumber structured data for local search. Every word is in one file, every 3D number in another, the colours in a third, and the booking form sends nothing until you point one function at your own service. A poster paints before any script, and visitors with reduced motion or no WebGL get a rendered still for every chapter. For plumbers, drain and sewer companies, HVAC and other home service trades.

How it's made

  1. A story written as data

    The page and the 3D were built side by side against one contract: fixed chapters and heights, one scroll coordinate, and a short list of things the engine may write on the page. Every 3D number lives in one file and every word in another, so the story changes without touching code.

  2. Copper, built in code

    The pipe is swept along curves with real fittings, solder rings at every joint and the blue TYPE L printing along it, on galvanised strut with clamps. The materials are physical, lit by a warm and cool environment, plus a neutral one so chrome and steel read silver.

  3. Tools from primitives

    The pipe wrench, tubing cutter, adjustable wrench, ball valve, gauge, PTFE tape, fittings and a torch with a flickering blue flame are each modelled from lathes and primitives. They drift a few degrees at most, and the same wrench returns to make the repair.

  4. A burst you can scroll

    The pipe bulges and splits, the spray is GPU particles driven by engine time, and the floor holds a wetness field with ripples and a planar reflection. The fix closes a two-shell clamp, the water drains in a swirl and the camera tips into the drain.

  5. Down the drain

    The sewer runs through cast iron, clay joints, a fan of roots at 34 ft and a glossy liner, lit only by the camera's ring light and seen through a barrel lens, with the page's HUD counting feet and time.

  6. Stills before the 3D

    A poster rendered from the engine paints before any script, and one still per chapter serves reduced motion and browsers without WebGL 2, so nobody sees a blank page.

  7. Smooth on a laptop

    Each scene is built in small idle steps and compiled before the camera arrives, 15 shader programs in all, nothing reads layout in the frame loop, and a quality ladder steps down on slow devices. Phones start on the light tier.

In this kit

  • src/

    Full source. The complete site as its own project, ready to run.

  • public/

    Media and assets. The images, clips, textures and icons the page loads.

  • scripts/

  • harness.html

  • index.html

  • package.json

  • package-lock.json

  • vite.config.js

  • tailwind.config.js

  • postcss.config.js

  • eslint.config.js

  • jsconfig.json

  • .gitignore

  • README.md

    Start here. What's inside and how to run it.

  • CONTRACT.md

  • HOW-IT-WAS-MADE.md

    How it was made. The build step by step, and a recipe to make your own.

  • ADAPT.md

    Adaptation prompt. Fits the kit to your client's brand in an AI builder.

  • RESKIN.md

    Re-skin guide. Colors, type, copy and media, changed file by file.

  • PROVENANCE.md

    Provenance. Where every model, texture and image came from.

  • THIRD_PARTY.md

    Open-source credits. Every library and font inside, with its license.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • LICENSE.md

    Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack
Vite 8.2 · React 18.3 · React Router 7.18 · three.js 0.186 · Lenis 1.3 · Lucide icons · Tailwind CSS 3.4 (base layer) · Plain JavaScript (JSX) · GLSL shaders · Procedural geometry (no model file) · Archivo and IBM Plex Mono (self-hosted)
File size
6 MB
Triangles
192,924
Load time
1.6 s (Measured on a production build in Chrome on an RTX 3060 desktop at 1440 x 900: the opening view reaches 90 percent of its triangles at a median of 1.6 s over three cold loads. Triangles: the most one view draws in its main pass (the sewer roots); the opening view draws about 74k. Download: about 93 KB of script (gzipped) to start; three.js and the engine load after the first paint, and no model, texture or video files.)
Browser
Needs WebGL 2 (current Chrome, Edge, Firefox and Safari on desktop and phones). Phones start on a lighter quality setting with the whole story. Without WebGL 2, or with reduced motion, the page shows a rendered still for each chapter and every word, and the booking form still works. Checked from a fresh unzip in Chrome on a real GPU at 1440 x 900 and 390 x 844: every chapter, the booking form, the privacy page and the 404, with no errors.
Released
Nov 2026
Version
1.0.0

From download to client site

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. Download the zip

    It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

  3. Run it

    Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

    npm install && npm run dev

  4. Make it your client's

    Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.

Unlimited client projects, one person per license, no resale. Read the license

Built entirely in code: the tools, the copper, the house in cutaway, the burst, the sewer and the pegboard are generated in the browser, and the site loads no model, texture or video files. Every business detail is a marked placeholder, and the six reviews and the rating are sample content to replace with your client's own. Archivo and IBM Plex Mono are self-hosted under the SIL Open Font License. Written with an AI coding assistant (Claude Code) under Parallel's direction. COPPER & MAIN is an invented company and no trademark search has been run on the name.

Buy LM-48 Copper & Main

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.