Base Fragrances: a luxury perfume store, built custom
A fragrance brand built around oud, amber and musk needed a real storefront, not a template with a logo on it. This is what I built, and the decisions that shaped it.
The brief
Base Fragrances is a Hyderabad-inspired fragrance brand with an Arabic identity (أساس, “Asas”, meaning foundation) woven through the branding. It needed a real storefront that didn’t feel like a generic template, with bilingual Arabic and English branding running through the whole experience.
What I built
- Full e-commerce flow: product catalogue, cart and checkout, built custom rather than on a template platform.
- An interactive 3D “Signature Bottles” carousel. Drag to explore all six fragrances. A custom interaction, not a plugin.
- A searchable, filterable collection, organised by fragrance family.
- Detailed scent profiles for every fragrance, with top, heart and base notes.
- A dedicated Attars & Oud line: alcohol-free, oil-based fragrances presented as their own collection.
- A bilingual brand identity with Arabic and English designed together, not just translated.
Decisions that mattered
Drive the carousel from the store’s own data
The carousel reads the product list from the store’s API, so adding a perfume adds a bottle, with its colour and scent notes. Nothing is hard-coded per product.
Build the bottle from primitives instead of waiting for a scan
No 3D scan of the real bottle exists yet, so I built it from basic shapes in Three.js: an eight-sided glass prism, a liquid coloured per fragrance, a metal ring and cap, and a brass name plate drawn on a canvas.
Look right, not physically “correct”
Physically based glass transmission washed out each perfume’s colour, so I dropped it. The body is simple alpha-blended glass, and the reflections go where there’s no colour identity to lose: the metal cap and ring.
Keep the heavy 3D from blocking the page
Only the centre bottle is live; its neighbours are static and dimmed. The 3D starts when the section is near the viewport, falls back to a static image without WebGL, and turns off auto-rotation for visitors who ask for reduced motion.
The full write-up, including the glass experiment that failed, is in How I built the 3D bottle carousel →
Screens
Outcome
A live, in-production storefront with a custom cart and checkout, an interactive 3D bottle carousel and a dedicated Attars & Oud collection, shipped and running at basefragrances.com.
Want a store or site built like this?
Tell me what you’re working on and I’ll reply with a straight answer on scope, price and timeline.