POLARIS
Unique Engineering & Constructions
UEC is a CIDB G6 design-and-build contractor in Kuala Lumpur, building since 2012. The old site claimed the work but could not show it. We rebuilt it around proof, with an estimate tool where the phone number used to be.
THE CHALLENGE
Construction clients do not browse. A developer or a hotel operator shortlists contractors on paper first: the CIDB grade, the track record, the councils the firm has dealt with. UEC had all of it. G6 status, sixteen delivered jobs, more than a decade of work across the Klang Valley and beyond. The old site showed none of it. No project names, no scopes, no sense of what a ringgit buys. Enquiries arrived cold because the site gave people nothing to be warm about.
THE APPROACH
Make the record visible and let it sell. The work index names clients, locations and scopes, because a list of real jobs out-argues any adjective. Capabilities are grouped the way a tender document lists them, so a quantity surveyor recognises the shape. The method is written as four plain steps with the uncomfortable part priced in: submissions, permits, weekly photo updates. And instead of "call us for a quote", a five-step estimator puts a real range on screen before anyone has to talk to anyone.
THE MOTION
The site is argument-shaped, so the motion is too. Every animated moment either advances the case or gets out of the way. Nothing loops for decoration.
The loader holds the page for the moment the video and fonts need, then releases everything on a single expo curve, so the first thing a visitor sees is the hero whole rather than half-built.
Page transitions are clip-path cross-moves done in the Web Animations API. The outgoing page wipes aside and the incoming one arrives with its in-view reveals already settled, so nobody watches the same entrance twice.
Headline statements rise through SplitText line masks while supporting blocks fade up and settle. Each reveal fires once, as it enters the viewport, so the copy arrives at the speed it gets read. In the intro, a photograph rides beside the statement until it reaches the bottom of the first line, then releases. The target is measured from the glyphs' rendered bounds rather than the CSS box, which is why it lands where the eye says the line ends.
The set piece is the works canvas. A field of project images drifts under the pointer until the scroll dives the camera into a single tile. As the tile fills the screen the capabilities queue takes over, snapping from heading to heading. One pinned scene does two jobs: the scatter says the work is real, the queue says it is organised.
The method section literalises the process. A photograph travels a dashed route through the four steps on MotionPath while DrawSVG inks the trail behind it, so "how we work" reads as a road instead of a list.
A floating CTA renames itself for the section beneath it: View all work, Get an estimate, Talk to us. The way forward is always present and always specific. Visitors with reduced motion get the same sections standing still. The argument survives without the theatre.
THE SYSTEM
The whole site builds to static files. React is allowed only where interaction earns it: the calculator and the contact form are islands, and everything else is HTML that needs no hydration to be read. Lenis and GSAP run on a single ticker, which keeps every scroll-driven scene on the same clock, and each page's triggers are torn down on navigation so nothing accumulates.
Content lives in typed data files: projects, services, FAQs. When UEC finishes a job, adding it is a data entry rather than a rebuild. The scaffolding for Bahasa Malaysia and Chinese is already in the routing; English ships first because that is where the firm's buyers are.
scrolls horizontally
THE ESTIMATE
"How much will it cost" is the question every visitor brings and every contractor site dodges. The estimator answers it in five steps: project type, size, quality tier, add-ons, result. The range recomputes live from the second step onward, so the number on screen is always the consequence of the answers given.
It does not replace a real quotation. It replaces the week of phone calls it used to take to learn whether the budget and the project live in the same postcode. Enquiries that do arrive come in pre-qualified, with a ballpark already agreed before the first conversation starts.
scrolls horizontally
Yours doesn’t have to.
RESULTS
The site now carries what the firm can prove. Sixteen projects are named, with clients, places and scopes. The capabilities read the way procurement reads them. The method names the councils it deals with. And the most-asked question in Malaysian construction, what does this cost, is a self-serve step rather than a phone call. A prospect can go from sceptical to a ballpark figure alone at midnight. For a contractor whose buyers check before they call, that is the whole job a website has.
The work index. Every project named, located and scoped.
The same argument, whole, in the size Malaysians will actually read it on.