§Case study
← All projectsLuxeQuest – Interactive Luxury Brand Experiences
Nine campaign-style launch pages for fictional premium brands and a style quiz. Each page uses an interaction technique the others don't: GLSL oceans, audio-reactive visuals, SVG displacement loupes. All of it keyboard-accessible, reduced-motion aware and tested end to end.
- Shipped
- Reading
- 2 min read
- Stack
- Next.js 16
- React 19
- TypeScript
- Three.js
- GLSL
- Web Audio API
- Motion
- Playwright
“Where the experience itself is the product.”
🚀 Live Site: https://luxequest.amirfaisalz.com
📦 GitHub Repository: https://github.com/amirfaisalz/luxequest
My client work is production platforms: commerce, CMS-driven sites, APIs. LuxeQuest covers the other side of frontend engineering, where the page has to feel like a campaign and still behave like software. All brands are fictional.
The showcase
| Page | Technique |
|---|---|
| Velin (watch) | Scroll-driven dial, live SVG clock, heritage timeline |
| Solenne (fragrance) | Real-time Three.js flacon, 3D tilt cards |
| Orsay (high jewellery) | Cursor spotlight, horizontal gallery, ring configurator |
| Castellane (EV) | Kinetic type, scroll throttle, route map |
| Ardoise (leather) | Colourway reveal, card stack, live monogram |
| Sonore (headphones) | Synthesized soundtrack, audio-reactive visuals, live EQ |
| Aubrac (champagne) | Bubble-particle countdown, scroll pour, swipe-to-sabre |
| Riviera (yacht charter) | Raymarched GLSL ocean from dawn to night as you scroll |
| Iris (eyewear) | SVG displacement loupe with chromatic aberration, frame morphs |
The quiz
Five visual questions build a style profile and recommend products. All quiz content and scoring live in plain data and pure functions (quiz.ts), with no React, so a CMS or API could replace them without touching the UI. Progress survives a reload, and corrupted or stale saved state is cleaned up on load.
Craft that still ships
- Every interaction works from the keyboard, with visible focus and labelled controls.
prefers-reduced-motionis respected everywhere; each page has a reduced-motion version.- Animations pause off-screen. Layouts use
svhso mobile toolbars don’t make pages jump. Every page works at 390px with no horizontal scroll. - Tests: Vitest for scoring, tie-breaks and state recovery. Playwright journeys on desktop and Pixel 7, keyboard-only and with reduced motion.
AI-assisted, human-owned
Claude Code helped with implementation, refactoring, tests and review. I reviewed and tested every change before merging, and architecture and quality decisions stayed with me. That is the same line I hold on client work.
