MD
All Work

Web & Digital · Industrial B2B

ALPCOR — Protective Coatings Division Site

Year
2026
Location
Ploiești, Romania
Role
Design & Development
The scroll-built 3D coating cross-section fully assembled, with each layer labelled — steel substrate, surface preparation, zinc-rich primer, stripe coat, intermediate coat and topcoat — and a running film-build figure of 229 microns
Overview

The protective-coating arm of AlpAccess needed a site of its own, separate from the parent company's industrial-access work. The homepage is a scroll-driven 3D model: as you scroll, an ISO 12944 C5 system builds on a steel plate layer by layer — blast-cleaned substrate, zinc-rich primer, stripe coat, MIO-pigmented intermediate, polyurethane topcoat — with the film build counting up in microns as it goes.

The Challenge

Coating work is sold on specifics: preparation grade, film thickness, standards, test results. A marketing site that quietly rounds those off, or states a capability the company hasn't confirmed it has, is worse than no site at all — it costs credibility with exactly the technical buyers it's meant to reach.

Process
  1. 01Modelled the coating system in React Three Fiber and tied its assembly directly to scroll position
  2. 02Made every technical field optional in the type system, so an unpublished value renders as a visible "Not published" row rather than being silently hidden
  3. 03Required a printed source on every published figure, so a statistic can't be added without its provenance appearing on the page
  4. 04Gated unconfirmed capabilities behind an enquiry panel instead of stating them as fact
  5. 05Built the site bilingual throughout — English at the root, Romanian under /ro
Result

Brief to finished bilingual site in six days, carrying all twenty of the division's coating projects. The outcome that matters here isn't visual: the content model cannot overstate the company. A statistic without a printed source will not render. An unconfirmed capability renders as an enquiry panel rather than a claim. A value AlpAccess hasn't published shows as a visible "Not published" row instead of quietly disappearing. For a contractor that sells on preparation grade and film thickness, a site that can be handed to a technical inspector without a single line needing a caveat is the whole job.

Tools
  • Next.js
  • React Three Fiber
  • TypeScript
  • Tailwind CSS
  • Framer Motion
Technical Information
  • Next.js 16 App Router, React 19, TypeScript, Tailwind CSS 4
  • React Three Fiber for the scroll-driven coating cross-section
  • Bilingual English / Romanian routing
  • Test suite covering content parity, scope, the quote endpoint and routing
  • Built and deployed; awaiting AlpAccess's content sign-off before it goes public
Gallery
The ALPCOR homepage at the start of the scroll sequence, showing raw carbon steel before any coating is applied
The quality philosophy page, setting out four principles on coating systems, inspection hold points, records and non-conformances
The same homepage in Romanian
The site on a phone

This site uses analytics cookies to see how it's used. Nothing is tracked until you accept.