VERTEX

Overview

VERTEX is a concept build for a construction and civil engineering practice. Construction sites are usually shown as a gallery of finished buildings, which skips the only part that is actually interesting — the process. Here the process is the website: the visitor arrives at a finished tower, is taken back to the bare land it stood on, and then builds it by scrolling.

Challenge

Construction sites default to the same shape: hero, services, projects, contact. The hard part was making a sequence of still photographs behave like an architectural film the visitor controls — and doing it without a 3D engine, so it still loads quickly on a phone.

Approach

Ten pinned stages, each deriving its state from its own scroll position rather than playing a timeline. Photographic layers crossfade under scroll control, and over them a vector tower genuinely assembles: survey marks, boundary, grid and floor plate are drawn onto the land, then eighteen floors stack one by one as the scroll advances. The structural breakdown at the end separates the tower into its load path and puts it back together.

Design

Deep charcoal and black with concrete and steel greys, warm white type, and a copper accent used only as an accent — markers, rules, single words, never a surface. Headlines are set as architectural signage; technical labels are monospaced like drawing annotations.

Development

React 19 and Vite, Tailwind CSS v4 design tokens, and Framer Motion for every scroll-linked value. A shared hook wraps useScroll in an identity transform, which keeps the browser’s native scroll timeline from desyncing multi-stop ranges from the real scroll position — the bug that makes this kind of site report one state while showing another.

Responsive Experience

The story is kept intact on a phone rather than shrunk: horizontal detail becomes vertical, the stage rail collapses to a progress bar, and the building-growth animation stays. Audited at 360, 390, 740 landscape, 768, 1024 and 1440 with no overflow, no clipped text and no console errors.

Final Result

Live at vertex-iota-three.vercel.app as a portfolio piece on scroll-driven storytelling. The practice, its projects and its figures are fictional and labelled as such on the page.

Key Features

• Ten pinned stages that build the tower from empty land to completion
• A vector building that assembles floor by floor under scroll control
• Survey drawing laid over the site photography in perspective
• Structural breakdown that separates and reassembles the load path
• Draggable before / during / after comparison of the same site