Kinetic Rebalance

The client partner, BLDG Brands, is a creative agency with a strong print-era identity: chamfered tiles, editorial cream, saturated color blocks. Their own site does not express it well. The brief we set ourselves: what could the BLDG homepage look like.

We built their language as a system: a hand-coded poster wall hero in their palette, chamfered corners at their scale via CSS clip-path, an editorial serif with a weight that settles as headings land, and a dashed energy line that conducts the reader through all twelve sections of a continuous scroll.

A design the branding agency's own principal is credited inside, coded rather than pictured: the hero posters are CSS, not images.

The one phrase with search presence in every metro was 'engineering firms {city}'. We had already targeted it when we caught the problem: that searcher is hiring an engineering firm, not running one. Volume with inverted intent is worse than none.

We retargeted every title to 'Grow Your {City} Architecture or Engineering Firm', a phrase only an owner searches, and moved the volume play into a ten-question FAQ written in the exact full-form phrasings principals type: what a firm is worth, what owners actually make, when succession planning starts.

Matched intent on every page before launch, documented in the code so the reasoning survives the project.

Twelve sections of choreography (an energy line, weight-settling type, a flywheel cursor) initially spent 660ms of main-thread blocking on phones, and the score dropped under our 90+ bar.

We pulled the Chrome trace instead of guessing: the static hero painted at 1278ms, but 34 one-shot entrance animations were forcing the animation library to evaluate during hydration. They became IntersectionObserver and CSS transitions with identical trigger points and easing; the fonts were instanced to the axis ranges actually used, 144KB to 69KB.

99 mobile performance under real throttling, blocking time 660ms to 50ms, zero layout shift, and the choreography unchanged.