A premium car care studio needed a website as polished as their ceramic coatings. We built a scroll-driven experience with a 360° turntable, before/after reveals, and pricing that converts.
Lustre Auto is a high-end detailing studio offering ceramic coatings, paint protection film, color wraps, and full correction services. Their existing online presence was a social media page — no website, no pricing transparency, no way to book online.
The brief was clear: build a site that feels as premium as a $4,500 ceramic coating. Car owners spending that kind of money expect a brand experience to match. The site needed to showcase the transformation quality, display transparent pricing, and convert visitors into booked appointments.
Target audience: luxury car owners in urban centers who care about protecting their investment. They're comparing detailers on Instagram, and the one with the best digital presence wins.
We studied the best automotive brands — Porsche, McLaren, AVATR — and noticed they all share one principle: let the product be the hero. Dark backgrounds, restrained palettes, cinematic photography. The car is the star, everything else supports it.
We chose a near-black background (#000) with pure white typography and minimal accent color. No gradients, no decorative elements, no noise. Every pixel exists to make the cars look incredible.
The scroll-driven interactions serve a purpose: the 360° turntable lets visitors inspect the coating finish from every angle (something photos alone can't do), and the before/after slider makes the transformation undeniable.
1. Product as hero. Dark backgrounds push the car forward. No competing elements.
2. Proof over promises. Before/after reveals and 360° views replace marketing copy with visual evidence.
3. Transparent pricing. Three tiers (Essential $350, Ceramic Shield $1,200, Full Armor $4,500) displayed upfront. No "contact for pricing" games.
4. Conversion-first layout. Every section ends with a path to book. The form is always one scroll away.
Bright colors, playful animations, carousel galleries. The temptation with car sites is to go flashy. We went the opposite direction — calm, confident, surgical. The kind of brand that doesn't need to shout.
We also rejected template layouts. Every detailing site on the internet uses the same hero → services grid → testimonials → footer pattern. We broke that with the frame scrub, the turntable, and the specification callouts (9H hardness, 120° contact angle).
Pulled from the automotive world: deep blacks, clean whites, and a restrained use of warm tones only where the car's finish catches light.
The page flows through a deliberate narrative sequence:
Hero (full-viewport cinematic car + scroll indicator) → Value prop (split text animation) → Before/After (visual proof) → Services carousel (5 service cards with dot nav) → 360° Turntable (scroll-triggered rotation) → Specs (9H hardness, warranty years, contact angle) → Facility (studio photography) → Pricing (3 tiers) → Booking form
Single-file HTML architecture. No framework, no build step, no dependencies beyond GSAP for scroll-driven animations. This keeps the site fast, portable, and easy to update.
Canvas frame scrub. The hero uses a canvas element that scrubs through pre-rendered video frames as the user scrolls. This gives cinematic motion without the performance hit of actual video playback. Each frame is loaded as a JPEG sequence for smooth 60fps scrubbing.
360° turntable. Built on the same canvas technique — a second set of frames showing the car rotating. Scroll position maps to rotation angle, letting the user control the view with their scroll wheel.
Before/after slider. CSS clip-path driven comparison with a draggable handle. No library needed — pure CSS + a touch of JS for the drag interaction.
AI-generated hero video. The opening frames were generated using Sora, prompted with specific camera movements and lighting to match the brand's premium feel. This removed the need for an on-location shoot entirely.
The finished site delivers a premium brand experience that matches the quality of Lustre's detailing work. Every scroll interaction serves a purpose — proving the product, building trust, and moving toward a booking.
Visit the live site →Tell us about your project. We'll come back with a first idea within hours.