// Project Case StudyCompleted

Maison Aurelle — Haute Parfumerie & Immersive Luxury Digital Flagship

A high-converting, performance-engineered luxury e-commerce showcase featuring an interactive 3D fragrance carousel, frosted glass editorial chapters, multi-step private checkout simulation, and real-time EN/FR bilingual localization—optimized to deliver sub-second Core Web Vitals without compromising visual fidelity.

Luxury E-CommerceTanStack StartReact 19Tailwind CSS v4High-Performance UIInteractive 3D Carousel

Industry

E-commerce

Project Type

E-commerce · Luxury Brand Experience · High-Performance Web Application

Year

2026

Start a Project

// Project Gallery

Explore the Project

Select a screenshot to inspect the project interface and key pages.

// Project Overview

Built Around a Clear Business Need

Maison Aurelle is a digital haute parfumerie designed and engineered by Kodcraft AI to represent the pinnacle of luxury web design. Crafted around a narrative of Parisian high perfumery, the site immediately draws visitors into an intimate, obsidian-and-gold sensory universe. The centerpiece of the experience is an interactive 3D hero carousel where each flagship fragrance (Noir Élixir, Éclat Blanc, Velours Rouge) takes center stage. When the user navigates or the carousel auto-rotates, the ambient environment seamlessly transforms—transitioning between smoky oud and black marble, luminous iris and white stone, or deep crimson velvet and damask rose. Beyond aesthetics, the site is architected as a fully functioning client showcase. Users can explore olfactory families, review patron testimonials, examine notes and longevity specs, adjust currency and language on the fly, add bottles to their private bag, and experience a realistic multi-step luxury checkout flow. Throughout the experience, Kodcraft AI's branding highlights how state-of-the-art web performance, elegant motion design, and high-conversion UX can elevate luxury retail in the modern digital landscape.

// Case Study

From Challenge to Practical Value

01 / CHALLENGE

Challenge

Luxury goods brands face a notorious digital dilemma: creating rich, editorial, high-fashion experiences (deep atmospheric photography, ambient glows, fluid micro-interactions, high-res packaging, and bespoke typography) traditionally results in bloated page weights, poor mobile responsiveness, and abysmal Google PageSpeed / Core Web Vitals scores. Kodcraft AI was tasked with engineering Maison Aurelle as a luxury benchmark: proving that an ultra-premium visual aesthetic—complete with dynamic 3D-staged product models and cinematic storytelling—can achieve near-perfect performance scores, instant page loads, and zero layout shift on both mobile and desktop devices.

02 / SOLUTION

Solution

We developed a bespoke single-page luxury flagship on TanStack Start (React 19) and Tailwind CSS v4 deployed to edge infrastructure. Rather than relying on heavy WebGL/Three.js bundles, we engineered lightweight CSS 3D matrix transforms and perspective containers to create an interactive 3-fragrance rotating stage with synchronized full-bleed background transitions. We coupled this with an end-to-end asset optimization pipeline (responsive multi-resolution AVIF/WebP assets, critical LCP preloading, idle slide scheduling, and self-hosted WOFF2 luxury typography), achieving instant interactivity alongside a complete boutique shopping bag and multi-step private checkout flow.

03 / PRACTICAL VALUE

Practical Value

Brand Prestige Meets Conversion Speed: Delivers the prestige feel of high-end fashion houses (e.g., Chanel, Diptyque, Kilian) without the slow bounce-inducing load times typical of luxury websites. Turnkey Client Demonstration: Includes simulated payment processing, localized currency toggles (USD/EUR), bilingual support (English/French), and branded Kodcraft AI engagement touchpoints to showcase full-stack agency capabilities to prospective retail clients. Flawless Mobile Parity: High-end desktop micro-interactions degrade gracefully into touch-optimized gestures and tight vertical layouts on small screens.

// Build Details

Project Build Overview

A closer look at the capabilities, technology stack, and connected systems behind the project.

Key Features

Interactive 3D Fragrance Carousel Stage
Scroll-Driven Story Stacking Cards
Interactive Boutique Shopping Bag & Drawer
Multi-Step Demo Checkout Flow
Real-Time EN / FR Bilingual Engine
Instant Currency Conversion
Atelier Concierge & Private Client Consultation
Lead Generation & Demo Attribution Modal

Technology / Platform

TanStack Start v1Tailwind CSS v4Self-hosted FontsFull WCAG-compliant dialog semantics

Integrations

Kodcraft AI Lead EngineClient-Side Payment & Checkout SimulationInternationalization (i18n) EngineEdge CDN & Lovable Asset Pipeline

// Performance Case Study

Page Speed & Performance

Target: Achieve top-tier 95–100% scores across Google PageSpeed Insights, GTmetrix, and Pingdom on both Mobile and Desktop profiles. Mandate: Zero compromise on visual assets—maintain full-bleed 4K atmospheric backdrops, sharp product cutouts, glassmorphism overlays, and smooth CSS animations while eliminating all Cumulative Layout Shift (CLS) and minimizing Largest Contentful Paint (LCP).

Starting Point

Before the performance engineering pass, the website faced several common luxury design bottlenecks: Over 23 MB in raw PNG image assets across desktop and mobile banners. The primary hero background alone weighed 2.6 MB. Third-party Google Fonts loaded synchronously, introducing render-blocking CSS and flash of unstyled text (FOUT). All 3 carousel product images and background banners loaded simultaneously on page load, triggering network congestion and competing for bandwidth. Images lacked explicit intrinsic dimensions, causing Cumulative Layout Shift during initial rendering. Generic dialog accessibility tags triggered warnings in modern automated accessibility and Lighthouse audit trees.

Optimization Challenges

The Carousel Multi-Asset Dilemma: A 3-slide interactive carousel requires 3 full-bleed backgrounds and 3 high-res isolated bottle cutouts (6 large visual assets in the first viewport). Loading all 6 at once destroyed mobile LCP; loading none caused empty white flashes on slide change. Heavy High-Fashion Typography: Luxury branding relies on distinctive serif typography (Cinzel and Cormorant Garamond). Loading multiple weights from external font servers created render-blocking latency and layout jumps. Client-Side Heavy Dialogs: Rich modal drawers for the shopping bag and multi-step checkout inflated the main bundle and parsing cost on low-powered mobile devices.

What We Optimized

Multi-Format Responsive <picture> Pipeline: Converted every asset to modern AVIF (with WebP fallbacks) generated at granular responsive breakpoints (640px, 1024px, 1672px for hero scenes; 480px, 900px for cutouts). Critical Path LCP Preloading: Injected targeted <link rel="preload"> tags in the document <head> specifically targeting Slide 0’s background and primary bottle in AVIF with fetchPriority="high" and synchronous decoding (decoding="sync"). Self-Hosted WOFF2 Typography & Pruning: Removed Google Fonts CDN dependencies. Self-hosted modern WOFF2 font files directly on the edge server, preloaded the primary display and body faces in the root route, and purged unreferenced font weights to minimize CSS bundle size. Component Code-Splitting: Dynamic React.lazy loading for the multi-step Checkout modal, keeping the main bundle lean for initial render. Zero CLS Design: Applied strict aspect ratios and fixed container envelopes across cards, images, and the hero stage, holding Cumulative Layout Shift to 0.000. WCAG / ARIA Accessibility Hardening: Connected all dynamic modals and drawers to visible headers using explicit role="dialog", aria-labelledby, and aria-describedby tokens, resolving audit warnings in screen-reader and automated accessibility trees

Results

Payload Reduction: Total initial viewport image transfer plummeted from ~13 MB to < 300 KB—an astounding ~97% reduction in network weight. LCP Acceleration: Largest Contentful Paint moved into the sub-second range on fast networks and well within Google’s green threshold on simulated mobile devices. Cumulative Layout Shift (CLS): Reduced to a flawless 0.000. Accessibility & SEO: 100% compliant dialog structures and rich structured head metadata (og:title, og:image, twitter:card) across all routes. User Experience: Seamless transitions and buttery smooth 60fps animations on mobile and desktop without a single visual downgrade to the brand's haute luxury aesthetic.

Before Optimization

After Optimization

Mobile Score

Desktop Score

Performance Evidence

Google PageSpeed — Desktop

Google PageSpeed — Mobile

GTmetrix

Pingdom

// Build With Kodcraft AI

Like what you see?

Tell us about the business problem, workflow, or product idea you want to turn into a practical digital solution.

Start a Project Explore More Work