Case study
Caffeine — Coffee & Tea House
An immersive mobile-first digital experience created for Caffeine, combining a premium visual identity, dynamic menu, GSAP motion, Three.js 3D elements and a custom dashboard that gives the team full control over the website content.
Case study by Keltoum Malouki
The project
Caffeine is a modern web experience designed to translate the atmosphere and identity of the coffee shop into an immersive digital product.
The goal was to build more than a traditional showcase website. The platform allows visitors to discover the menu, promotions, reviews, locations and opening hours while giving the Caffeine team complete control over the content.
The challenge
The main challenge was balancing a strong creative direction with usability and performance.
The website needed to feel visually distinctive without making navigation complicated or sacrificing accessibility.
Another important requirement was eliminating hardcoded business content so the team would not need a developer every time a product, promotion or opening hour changed.
The approach
The experience was designed mobile-first.
Its visual language combines espresso, pistachio and cream tones with expressive serif typography and an editorial layout inspired by the coffee shop experience.
The interface uses several layers of motion:
- scroll reveals;
- masked text entrances;
- image parallax;
- floating product elements;
- animated words;
- interactive 3D elements.
Motion is used to reinforce the experience rather than prevent users from accessing content.
Dynamic menu
The menu is completely connected to the administration dashboard.
Visitors can browse every product by category and search using product names, descriptions or ingredients.
Featured products with imagery are surfaced first.
On mobile, categories remain accessible through a sticky navigation rail while larger screens use a side index.
Promotions
The dashboard supports different promotion types:
- percentage discounts;
- fixed-amount discounts;
- special prices;
- bundle pricing.
Active promotions automatically appear on the public website and update the prices displayed in the menu.
Database rules also prevent overlapping active promotions for the same product.
Reviews
Visitors can submit reviews directly from the website.
New reviews enter a moderation queue before appearing publicly.
Administrators can approve or decline them individually or in bulk from the dashboard.
The project also supports Google Places data, displaying Google's rating and review count separately from the website's own guest reviews.
Custom CMS
A major part of the project is the custom administration dashboard.
From /admin, authorized users can manage:
- products;
- categories;
- promotions;
- locations;
- opening hours;
- social links;
- contact information;
- reviews;
- team members and roles.
The public website is powered by this data rather than hardcoded content.
Authentication and security
Dashboard access is restricted to accounts with an admin role.
The project uses Supabase Authentication together with Row Level Security.
Permissions are checked by the application and again at database level.
Images are managed through Supabase Storage with administrator-only upload permissions.
Motion & 3D
GSAP powers the motion system, including:
- scroll-based reveals;
- masked text animations;
- word animation;
- photo parallax;
- floating products.
Three.js renders softly lit rotating coffee beans around the original product photography.
The WebGL scene is optimized to reduce rendering work when the scene is offscreen or the browser tab is inactive.
Performance and accessibility
Motion respects the visitor's reduced-motion preference and can also be manually paused.
Static coffee-bean imagery remains available when WebGL cannot be used.
The initial page content does not depend on motion or JavaScript to remain readable.
Automated tests cover multiple viewport sizes, mobile navigation, keyboard focus, reduced-motion behavior, image loading, WebGL and WCAG accessibility checks.
Technology
- Next.js 16
- TypeScript
- Supabase
- PostgreSQL
- GSAP
- Three.js
- Playwright
- Supabase Authentication
- Supabase Storage
- Row Level Security
Outcome
The final product combines an expressive brand experience with a practical content-management platform.
Visitors receive an immersive and responsive coffee-shop experience, while the Caffeine team can independently manage the content that changes day to day.
The architecture also gives the project room to grow as new products, offers, locations, reviews and features are introduced.
