Website Design & Development
APEX
The machine, exhibited.
Overview
APEX is a concept build that treats a car showcase as a museum exhibition rather than a dealership listing. The premise drove every decision: the hall is dark, each machine sits under its own light, and the visitor moves through rooms instead of scrolling a spec table.
Challenge
Automotive sites almost always resolve into the same two things — a hero render and a configurator. The harder problem was making a static set of photographs feel like something you walk through, and making specification data feel like a placard you read rather than a table you skim.
Approach
The entrance puts the machine in darkness and hands the visitor the light: a radial mask follows the cursor, so the car is revealed only where the beam falls. Past the entrance, the exhibit hall moves four machines through four rooms — exterior, cockpit, powertrain, details — with a clip-path wipe between them and a placard per room.
Design
Near-black gallery walls, a xenon-blue accent borrowed from headlight colour temperature, and a heavy condensed display face set against a monospace for the placard and telemetry type. Performance figures are drawn as SVG dials and comparison bars instead of listed, so the numbers read as exhibits too.
Development
React 19 and Vite, Tailwind CSS v4 design tokens, and Framer Motion for the scroll-linked room transitions and the spring-damped spotlight mask. Scroll-linked values pass through an identity transform so the browser's native scroll timeline cannot desync them from the actual scroll position — a subtle bug that silently breaks multi-stop animations.
Responsive Experience
The spotlight needs a pointer, so it is keyed to pointer capability rather than screen width — touch tablets and visitors who prefer reduced motion get the machine lit and legible instead of an unlit dark frame. Audited across six viewports from 360px to 1440px, including landscape phones.
Final Result
Live at apex-motors-inky.vercel.app as a portfolio piece on interaction design — the cars and the exhibition are illustrative, not a real dealership.
Key Features
- Cursor-driven spotlight that reveals the car where the light falls
- Four machines walked through four rooms with clip-path transitions
- SVG performance dials and comparison bars driven by the spec data
- Design wall and heritage timeline
- Paint-tint preview, labelled in the UI as a preview rather than a real respray
Technology Stack
Want something like this?
Let's talk about what you're building.