Back to Projects
Web Development

LuxAudio Buds Pro - AR Promotional Website

A premium promotional website for LuxAudio Buds Pro featuring augmented reality, interactive hotspots, an X-ray slider, and a 899-frame scroll-triggered exploded view animation.

HTML SCSS JavaScript GSAP ScrollTrigger Cinema 4D Model Viewer Canvas API
Overview

A fully responsive, immersive product showcase for a premium wireless earbuds brand. The site features AR model viewing, an interactive X-ray internal component reveal, and a 899-frame scroll-driven exploded view animation built on a canvas element.

The Problem

Standard product pages felt flat for a premium audio brand. The goal was to build an experience that matched the product quality - interactive and memorable enough to justify a premium price point.

The Solution

Modeled the earbuds in Cinema 4D with RedShift, exported as GLTF for Google Model Viewer AR. Built a custom X-ray reveal slider, a 899-frame WebP canvas animation driven by GSAP ScrollTrigger, and interactive hotspots. Fully responsive with IIFE-structured JavaScript.