Fornasetti Profumi ASMR Interactive Gallery

Overview

This website is a sensory-driven landing page for Fornasetti Profumi, utilizing high-quality, full-screen video backgrounds to create an ASMR-inspired immersive experience. It is an excellent reference for luxury branding or storytelling projects that prioritize mood, minimalist UI, and non-linear navigation through interactive hotspots.

Design System

• Color Palette & Visual Hierarchy: The design uses a dark, cinematic base. The primary palette is driven by the video content (muted, earthy tones) with high-contrast white typography and yellow accents from the product packaging. The hierarchy is extremely flat, placing the user's focus entirely on the center of the frame where the interaction occurs.
• Typography: The system uses a mix of serif for descriptive text (e.g., "Later, 32 hours of pouring...") and a monospace or clean sans-serif for technical labels and numbers. The HTML reveals a typo-default class for uppercase titles and typo-small for metadata like duration and scent type.
• Page Structure: The layout is a single-screen, full-bleed container with layered elements.
  • Background Layer: A stack of <video> elements (using Cloudflare Stream) that toggle opacity to transition scenes.
  • Interactive Layer: A grid md:grid-cols-3 system that hosts numbered hotspots (1–6) mapped to specific product areas.
  • Overlay Layer: Floating minimalist buttons for "About" and "Unlock the rooms."
• Reusable Components:
  • Interactive Hotspots: Numbered ovals (.digit) that act as anchors for specific content.
  • Minimalist Data Grid: The 3x3 grid used for product details (Duration, Scent, Trigger) is highly portable for product cards.
  • Glow Buttons: Styled with a .glow class and typo-button for specific call-to-actions.
• Motion & Interaction: The interface uses Vue/Nuxt-based transitions (mode="out-in"). Elements use translateY(6px) and opacity transitions to fade in and out gracefully as the user "unlocks" different rooms. The mouse cursor is replaced with a custom small circular indicator.
• Responsive Behavior: On mobile, the grid shifts to a vertical layout with "Next" and "Prev" navigation buttons appearing to replace the spatial 3x3 grid, ensuring the interactive experience works on touch screens.

Use Cases

• Who should clone this: Creative agencies, luxury fragrance or high-end decor brands, and experiential artists looking for a portfolio or product launch site that focuses on atmosphere over traditional e-commerce grids.
• Remix Directions:
  • Product Showcases: Replace ASMR videos with high-definition 3D renders of hardware or jewelry.
  • Educational Tools: Use the hotspot grid to explain complex machinery or software features through short video loops.
  • Portfolio: Adapt the "Rooms" concept into different project categories, where each number reveals a different case study.
• Suggested Clone Scope: For a quick win, clone the video-layered background system and the numbered hotspot layout. A full-page clone is best for projects where the "discovery" phase is more important than immediate conversion.