RoughWorks
& Lamacraft
Brand identity — logotype, typography and colour — by Module Creative Agency.
Web design and development by Rough Works.
Craft You Can’t Photograph
Overview
Lamacraft Construction builds decks, fences, concrete, interiors and landscaping in and around Calgary — frequently all of it, on the same yard, with one crew. Their WordPress site did what most trade sites do: it showed finished projects, in a gallery, and left it there.
The trouble is that a finished deck looks like every other finished deck. Everything that separates a Lamacraft build from a cheap one — footing depth, ledger flashing, joist spacing, the order the trades run in — is covered up before the first photo is taken. The site carried plenty of proof of the work and almost none of the proof of the craft. Module Creative Agency had already given them a brand that could carry a much more confident site; the site itself hadn’t caught up.
The proof gets buried
Post depth, ledger flashing, hanger spacing — the decisions that determine whether a deck is still flat in fifteen years are all under the surface by the time anyone photographs it.
Four trades, four crews
Most yards get built by four contractors who never speak to each other. Lamacraft sequences them itself, and nothing on the old site said so.
Animation costs bandwidth
Our first pass at showing a build was a 120-frame image scrub. It looked exactly right, and it weighed 53 MB of frames to cover two sections of the site.
A relaunch can’t cost the rankings
The WordPress site had indexed URLs, a Google Business profile and real reviews behind it. Any rebuild had to land on exactly the paths Google already knew.
Draw the Build, Don’t Film It
We stopped trying to photograph the craft and modelled it instead. A single parametric spec — post size, footing depth, joist spacing, board width, gap — drives a set of Three.js scenes that render live in the browser and are scrubbed by GSAP ScrollTrigger. The homepage carries a fifteen-stage journey through one yard and four trades. Five service pages each open with their own build runway. Six WebGL surfaces in all, and the larger of the two bundles is 528 KB on disk, 137 KB over the wire — against 53 MB of pre-rendered frames for the two sections it replaced. The whole site is static HTML generated from one build script, so there is no database between a visitor and the page.
One spec, six scenes, 528 KB
Every dimension lives in one spec file — post size, footing depth, joists at 406mm on centre, board width and gap — and all six scenes read from it, so no two drawings on the site can disagree. The first version of this was an image sequence: 120 frames a section, alignment-locked so the background never bounced. It worked, and it cost 53 MB across two pages. Live Three.js geometry does all six for 528 KB.
Scroll drives everything, and pays for nothing idle
GSAP and ScrollTrigger, self-hosted rather than pulled from a CDN, with Lenis for smoothing. Scroll drives the clip-path reveals, the drafting-board gallery that measures the photo under the cursor, and the build itself. Scenes only render while they are on screen, behind an IntersectionObserver-gated frame loop, so an idle page costs nothing.
Every photo on the site is theirs
102 project photographs and five project films, all Lamacraft’s own work around Calgary, cut into full-bleed film bands and a survey-board archive. Where their existing copy already said the thing well, we carried it over word for word rather than rewriting it for the sake of it.
An inquiry that arrives as an email
The contact page asks for the project type, the neighbourhood and the timeline, then opens a ready-to-send email to Brian with the answers already in it — no endpoint to monitor, no lead sitting in a database nobody checks. Above it, a season planner says plainly when to book what in a Calgary build year.
A Site That Explains the Trade
Eight static pages, six live 3D builds
The rebuild is eight pages of static HTML generated from a single build script, with the galleries, the stage copy and the brand tokens living in data rather than in markup. Module’s identity sets the type and the palette; the drawings do the explaining the photographs never could.
Every page emits at the path the old WordPress site already had indexed — /decks/, /fences/, /contact-us/ — so the relaunch is a straight swap with no redirect chain, carrying canonical tags, per-service structured data and a sitemap with it.
53 MB of frames → 528 KB of geometry
The two image sequences shipped 53 MB of pre-rendered frames and covered two sections. The Three.js bundle that replaced them is 528 KB — 137 KB gzipped — and covers six.
Six live build surfaces
A fifteen-stage yard journey on the homepage plus a build runway on decks, fences, concrete, landscaping and commercial — each one checked stage by stage in headless Chrome at 3%, 50% and 97% scroll.
It holds up on a phone
Verified at 390 × 844: the drawing takes a 16:9 band, the copy sits on clean paper below it, offscreen video and marquees pause themselves, and nothing overflows sideways.
Reduced motion is a real state
With prefers-reduced-motion set, every scene renders its finished build and stops. No scrub, no scroll-jacking, and not a single fact lost.
Status — running on a private preview build ahead of cutover from WordPress.
Eight Pages, Start to Finish
Let's Build
Something Great
Ready to build a website that actually works for your business?
Let's talk about your project.