Kamengrad — a house you build by scrolling.

• Type — a website for a turnkey builder, aimed at a buyer still deciding who to trust with a house.
• Scope — five pages (home, about, services, projects, contact) plus a privacy policy. A scroll-driven construction film, a 3D model of a house, nine projects that open, and a form with two tap questions.
• Stack — HTML5, CSS and plain JavaScript, written from scratch. No framework, no bundler, no CSS library. The only third-party code is three.js, self-hosted and loaded on the services page alone.
• Language — Serbian, Latin script. Written in Serbian, not translated into it.
• Accessibility — text contrast over photos measured against a pure-white image, the worst case, and full prefers-reduced-motion support.

We pictured the client who keeps showing up: a serious Belgrade builder, about thirty years in, working turnkey. Most of the work comes through word of mouth and listing directories, and the company's own website has been stuck somewhere around 2012. It is slow and cluttered, and there isn't one sentence on it that would convince anyone of anything.

The brief is easy to say and hard to pull off: build a site that feels like a firm you would trust to build your house without a second thought. Adjectives don't do that. Evidence the visitor can see for themselves does.

Every construction firm claims a clear process. Almost none of them show it. On Kamengrad's home page, in the section on how the company works, aerial footage of a building site pins to the screen, and the scroll decides the frame, not the clock. Scroll forward and the house goes up, from the dig through the foundations, the structure and the roof to the handover of the keys. Scroll back and it comes apart. Five phases light up alongside the film, and each one gets the same share of the scroll, however long it takes in the footage.

It is one video, not an image sequence, with a keyframe every half second so a seek never has far to go. The same footage as a WebP sequence would be around 11 MB; as video it is 2.98 MB on desktop and 1.10 MB on phones. Nothing downloads when the page loads: the film is fetched a screen before its section. Without JavaScript, with reduced motion or with data saver on, a photo of the finished house and the full list of phases stand in its place.

The footage there now belongs to someone else and stands in for the real thing. On a real project a drone flies the same saved route once a week, from the same spot, and those flights become the film. Only then may the copy beneath it say that the footage arrives with a weekly progress report.

On the services page, in a dark band headed "your house, before the first shovel", sits a model of a family house that turns under a mouse or a finger. It has three views: a scale model with a slider for the same five phases as the film, a drawing with lines and dimensions, and a floor plan, cut at 1.2 metres, with the name and area of every room.

The house is not a downloaded 3D file but data in the code: walls with openings, slabs and rooms. The scale model, the drawing, the plan and the construction phases all come out of that one description, so changing a wall changes all three views at once.

three.js is self-hosted and loads only once the section is a screen away: about 200 KB compressed, and zero bytes on every other page. The mouse wheel doesn't zoom; it scrolls the page, as it does everywhere else, and zoom sits on buttons. On a phone a horizontal swipe turns the model and a vertical one scrolls.

Every screen answers the next question a buyer has before calling: what exactly do you do, can I trust you, what does it cost, and what if something goes wrong. On the home page that means, in order, the promise, the numbers, the people behind the firm, six services, four phases with real timeframes, the projects, six contractual commitments and three client voices. Every one ends in the same small step.

• One label everywhere. "Book a consultation" in the header, the hero, every band, the mobile menu and the form. It is checked automatically: a second label fails the check.
• "Learn more" opens the services page right at that service, with no slide down the whole page, and every service ends with a real example and a call to action that preselects the topic in the form.
• Projects open. Nine projects, each with its data and a short story. The same view opens from a direct link, from client testimonials and from the services page.
• A form that qualifies. Only a name, one way to reach you and consent are required. Two tap questions, what you are building and how far along you are, tell sales who to call first. After sending, a thank-you with your name and a call time worked out from office hours.

We started deliberately dark: cinematic, heavy background, dramatic. It looked expensive on the first screen and started to tire the eyes three sections in. So we pulled back to what premium actually means: calm.

The final palette is ivory and graphite, with one accent, a weathered bronze, used sparingly. Dark bands stay only where drama earns its place: the hero, the film, the 3D model and the call to action. Light and dark are the same theme: dark sections simply redefine the same colour names, which is why switching the whole palette from dark to light was a one-file edit.

The signature is a 45° cut on the top-right corner, like dressed stone. It repeats on photos, project tiles, the model's frame and the main button. On the button the cut is drawn with a gradient rather than clipped, because a clipped corner would also cut off the keyboard focus ring.

The type is one family with a width axis: headings are drawn wider, for the visual mass of masonry, and body text at normal width. A third voice, monospace, is kept for technical data alone, dates, phases and labels, like the annotations on a drawing.

From scratch. HTML, CSS and plain JavaScript — no framework, no bundler, no build step. The whole design system fits in one variable-driven CSS file. Fonts, images, footage and three.js are all self-hosted, and nothing is pulled from anyone else's server when a page loads.

Before every change the site runs 56 automated checks in a real browser: the fonts and the film, the mobile menu, the project filter, the form, the project view, the single call-to-action label, arriving at every service at two widths, and focus rings the 45° cut never clips. Alongside them run checks on heading structure, overflow at 320 pixels and the real dimensions of every image.

Source: file sizes on disk, and transfer measured in the browser on a first visit from a local server with the cache disabled, 3 October 2026. Of the 5.4 MB on desktop, 3.8 MB is the hero clip, which attaches only once the page has loaded, and only on screens wider than 768 pixels without data saver or reduced motion; phones never download it. The construction film is not part of the first load. Photos load straight away rather than lazily: that was a decision for the presentation, not an oversight, and a real project would weigh it again.

We measure Lighthouse on the published site and fill these in once we have. Until then there is a dash here, not an estimate.

Contrast over a photo can't be calculated from colours, because the image changes underneath. So it was measured: every image is swapped for pure white, the text is hidden, and the real pixel under every line of text is read, at widths from 320 to 1920 pixels. The shading under the text was set from that measurement, not by eye.

Body text sits at 14.6:1 against its background; the accent at 5.3:1 on light and 6.7:1 on dark. The mobile menu keeps focus inside it, and Escape returns focus to the button that opened it. Every page has a single top-level heading and no skipped levels.

The Serbian is typeset as Serbian: no one-letter word is left at the end of a line, a number never parts from its unit, and the quotation marks are the Serbian kind, hung outside the text edge.

Under prefers-reduced-motion nothing moves: photos replace the hero clip and the film, and decorative hover movement is switched off too.

• Walls of words everyone uses and nobody checks.
• The three-icon feature grid with filler text.
• The endlessly scrolling logo strip.
• The cascade where everything pops in one by one as you scroll.
• A form with ten required fields.
• A gallery where nothing opens.
• A Ken Burns zoom on the hero photo, the most recognisable move in any template.
• Counters that count up from zero: until they fire, the site says "0 years of experience".

A construction company's website can show what others only claim: how a house gets built, what it will look like before the first shovel, and exactly what happens after the first call. Go into the site in the laptop above, scroll through the film on the home page, turn the model on the services page and send a test enquiry, then judge for yourself.

We follow the same method on every site: message and structure first, then design, then clean code that lasts. More on scope and pricing is on the web design page.

If you run a construction company and the work still only comes in through word of mouth, get in touch.