LUXURY FRAGRANCE SHOWCASE
Noir Essence
A premium fragrance experience pairing dark-and-gold branding with a 160-frame scroll-driven canvas and responsive product storytelling.
Project details
- Project type
- Interactive fragrance showcase
- Services
- Web Design
- Web Development
- Branding
- Industry
- Fragrance & Luxury
- Project status
- Live showcase
Designed and developed by Ghulam Hussain. Selected portfolio work demonstrating motion, interaction design, and product storytelling.
OVERVIEW
The situation.
Noir Essence takes an editorial, cinematic approach to fragrance presentation. A scroll-linked canvas sequence introduces the product, supported by React navigation, product narrative, and calls to action. The dark-and-gold visual system carries through the experience.
THE CHALLENGE
What was getting in the way.
The constraints that shaped every decision that followed.
- Communicate fragrance atmosphere through a digital interface.
- Coordinate a frame-based reveal with navigation and product content.
- Carry the visual story across desktop and mobile.
APPROACH
The implementation approach.
Build around the reveal
A 160-frame sequence is preloaded and scrubbed in sync with scroll position.
Layer content around motion
React provides navigation, product sections, and calls to action alongside the canvas.
Keep the system coherent
Dark-and-gold styling and restrained Framer Motion details support the luxury positioning.
SOLUTION
What was built.
- 160-frame scroll-driven canvas hero.
- Premium fragrance presentation and product narrative.
- Dark-and-gold visual branding.
- Responsive layout with complementary entrance and hover motion.
DESIGN SYSTEM
The visual foundation.
The visual direction and interface choices reflected in the published project.
- Palette
- Dark and gold
- Experience
- Editorial, cinematic product storytelling
- Interaction
- Scroll-linked frame sequence
- Motion
- Complementary entrance and hover details
TECHNICAL IMPLEMENTATION
How it is engineered.
Application
React 18, Vite, and JavaScript provide the application and build tooling.
Canvas
The product animation uses a 160-frame sequence linked to scroll position.
Styling and motion
Tailwind CSS and Framer Motion support the responsive interface and secondary interactions.
FINAL RESULT
What changes.
- Delivered a live fragrance showcase with a distinctive product reveal.
- Connected product narrative and visual identity in a responsive interface.
- Demonstrated custom motion and interaction implementation.
SCREENS
The work, in view.
Project imagery from Ghulam Hussain's portfolio. Portrait and detail frames show crops of the same source screenshot.
TECHNOLOGIES
Built with.
Chosen for this brief rather than applied to every project by default.
- React.js
- JavaScript
- Tailwind CSS
- Framer Motion
- Vite
- Canvas
Related services
START SOMETHING
Got a project that needs this kind of thinking?
Tell us what you are trying to fix or build. We will come back with a scope, a timeline, and a straight answer on whether we are the right studio for it.