Case Study
Dub@i Möbel
The Challenge
Dub@i Möbel had no web presence. If you didn't happen to walk by, you wouldn't know the shop existed. The range was invisible.
What We Built
- ✦Next.js 14 website with Louvre intro, cinematic hero and a Lighthouse score near 100
- ✦AI room advisor: upload a room photo, OpenAI Vision recommends matching products
- ✦Trilingual in DE, EN and TR for Hagen's Turkish-speaking customers
- ✦Sanity CMS so the client can manage their own products
Chapter 01
The Louvre Intro
How the website opens — once per session
12 slats, 3D
Each of the 12 slats rotates individually around its Y-axis, staggered 55ms apart. perspective: 800px gives the motion genuine spatial depth.
Once per session
The Louvre intro plays only on the first visit. Anyone who returns dives straight into the site without any wait.
Chapter 02
Hero Design
Cinematic first screen — impression before content
Word by word
The headline builds up one word at a time with a slight rotateX tilt. Dramatic without being loud.
Ken Burns zoom
The background image slowly zooms in a 20-second loop. The effect is so subtle you barely notice it — but you feel it.
Logo centred
Navigation in the pharmacy style: logo in the middle, functions spread symmetrically. Louis Vuitton, Chanel and Hermès all use the same principle.
Chapter 03
Product Showcase
Editorial layout with clip-path animations
Clip-path reveal
Each product image unfolds from left to right, like a curtain opening. It follows natural reading direction and turns every reveal into a small moment.
Alternating sides
Image left, then right, then left again. The eye moves as you scroll and the page feels much less like a list.
Chapter 04
AI Room Advisor
OpenAI Vision as a conversion lever
Upload a room, find a sofa
Users upload a photo of their room. GPT-4 Vision reads the style, colour palette and furniture, then suggests matching products.
Cost control, no login
Supabase caps API requests per IP to a daily limit. No user account needed — the usage stays predictable and controlled.
Goals and Projections
What we aim for.
In final development. Numbers are projected target values.