Back to projects

NOIR & GOLD — Luxury Coffee E-commerce

A luxury coffee e-commerce landing experience: cinematic loading screen, a real 3D hero scene with a steaming coffee cup (React Three Fiber), GSAP + Lenis smooth scrolling, glassmorphism UI, shop with filters and pagination, 360° product viewer, cart/wishlist/checkout flows, and demo auth — all fully responsive.

Next.jsReactThree.jsGSAPTailwind CSS
01Overview

Role

Add your role on this project here.

Timeline

Add the project timeline here.

Team

Add team size / collaborators here.

02The challenge

Build a landing experience for a premium coffee brand that feels as crafted as the product itself — one that could stand next to real luxury e-commerce sites rather than a generic shop template.

03The approach

Layered a real 3D hero scene (React Three Fiber) with a steaming coffee cup on top of a fast Next.js/React foundation, driving scroll-based motion with GSAP and Lenis for smooth, cinematic pacing, and building the UI in a restrained glassmorphism style.

04Solution

A complete shop flow — product filters and pagination, a 360° product viewer, cart, wishlist, checkout, and demo authentication — implemented fully responsively across breakpoints.

05Architecture
Client (Browser)
Next.js / React
React Three Fiber (3D scene)
GSAP + Lenis (scroll & motion)
Tailwind CSS (UI)
06Key features
  • Real-time 3D hero scene with steaming coffee cup
  • GSAP + Lenis smooth scrolling
  • 360° product viewer
  • Cart, wishlist, checkout & demo auth
07Performance

Add real performance metrics here (e.g. Lighthouse scores) once measured.

08Result

Add the real-world outcome or result here.

Back to projects