To overcome the constraints of static 2D product sheets and catalog renders, I built this interactive real-time product configurator to let clients preview any possible combination of materials and colors.

The customization engine works by dynamically overlaying and compositing multi-layer assets—including separate renders for the metal frame, earpads, and headpad—directly in the browser. Each layer corresponds to a specific material type, color tone, and camera angle.

The system processes and packages 1,008 unique render states into optimized WebP images, compressing the entire asset bundle to under 50MB. On load, the core imagery is displayed immediately, while a background pre-caching pipeline loads the remaining variants into active memory to enable responsive, fluid rotations and style switching.