Project Title: AURA — Interactive 3D Scroll-Driven Techwear E-Commerce Showcase

Role: Full-Stack Creative Developer & Motion Specialist

Deliverables: Web Application, Custom Canvas Animation Engine, Responsive UI/UX

Overview AURA is a minimalist, high-contrast digital e-commerce experience built for a futuristic techwear brand. The core engineering challenge was delivering a cinematic, 60fps 3D product visualizer without sacrificing initial page load speeds, SEO performance, or mobile responsiveness.

The Engineering & Design Solution Instead of using heavy 3D webGL assets that degrade performance on low-end devices, I engineered a high-DPI HTML5 Canvas frame-scrubbing engine bound directly to user scroll progression via GSAP.

Canvas Render Engine: Custom-built sequence renderer processing 300 high-resolution frames with dynamic device pixel ratio scaling (window.devicePixelRatio) and CSS sharpening for Retina screens.

Scroll-Bound Motion: Integrated GSAP ScrollTrigger for buttery-smooth visual timeline scrubbing and zero scroll-lag.

Modern Product Grid: Designed an interactive, high-contrast apparel collection grid below the hero sequence using Framer Motion for responsive 3D card tilt effects.

Clean Dark-Mode HUD: Built an immersive cyberpunk-inspired UI complete with live status indicators, backdrop-filtered navigation, and minimal typography.

Tech Stack

Framework: Next.js (App Router), React

Styling: Tailwind CSS (Dark Mode & Cyberpunk HUD)

Animation Engine: GSAP (ScrollTrigger), Framer Motion

Rendering: HTML5 Canvas API

Results & Impact

Delivered 60fps desktop and mobile scroll performance with 0% dropped frames.

Fully responsive across standard, Ultra-HD, and mobile viewports.

Built modularly for easy addition of new product SKUs and e-commerce cart integrations.

link: https://aura-luxury-techwear.vercel.app/