Plasma-System

Introduction

The Plasma-System project aims to create a premium hybrid 3D luxury perfume ecommerce website for the brand "Revaya Scent". The website will leverage modern 2026 web design trends to deliver a high-end, immersive shopping experience that is both visually stunning and optimized for fast loading and sales conversion.

System Overview

The Revaya Scent ecommerce platform will feature a cinematic dark luxury theme with scroll-based animations and a focus on mobile-first design. Key elements include a 3D animated perfume bottle in the hero section, fragrance mist effects, and glassmorphism product cards. The site will maintain a premium editorial layout with large bold typography and smooth micro-interactions to enhance user engagement.

Functional Requirements

• As a User, I should be able to view a 3D animated perfume bottle in the hero section with slow rotation and golden rim light.
• As a User, I should experience a cinematic dark luxury theme throughout the website.
• As a User, I should see scroll-based animations that enhance storytelling and engagement.
• As a User, I should see fragrance mist or smoke particle effects in key sections.
• As a User, I should interact with glassmorphism product cards that display product details.
• As a User, I should navigate a premium editorial layout with large bold typography.
• As a User, I should experience smooth micro-interactions for a seamless browsing experience.
• As a User, I should be able to browse the website on mobile devices with an optimized design for ecommerce conversion.
• As a User, I should be able to explore sections such as Hero, Featured Perfumes, Scent Categories, Best Sellers, Scent Notes Storytelling, Brand Story, Reviews, Instagram Gallery, Newsletter, and Footer.
• As a User, I should be able to quickly access the shop, product page, cart, and checkout with a fast, clean, and conversion-focused design.

User Personas

• Luxury Shopper: Interested in high-end products and experiences, values aesthetics and brand prestige.
• Mobile User: Primarily accesses the website via mobile devices, expects fast loading times and intuitive navigation.
• Perfume Enthusiast: Seeks detailed information about scents, notes, and brand stories.

Core User Flows

• Luxury Shopper visits homepage -> views 3D animated hero section -> explores featured perfumes -> adds product to cart -> proceeds to checkout.
• Mobile User accesses site -> navigates through scent categories -> selects a product -> views product details -> completes purchase.
• Perfume Enthusiast reads scent notes storytelling -> explores brand story -> checks reviews -> subscribes to newsletter.

Visuals Colors and Theme

• primary: #1A1A1D (Dark Charcoal)
• primary_light: #333337 (Soft Charcoal)
• secondary: #FFD700 (Golden)
• accent: #FF4500 (Orange Red)
• highlight: #FFA500 (Amber)
• bg: #0D0D0D (Jet Black)
• surface: rgba(26, 26, 29, 0.8)
• text: #FFFFFF (White)
• text_muted: #B0B0B0 (Gray)
• border: rgba(255, 215, 0, 0.2)

Signature Design Concept

The homepage of Revaya Scent will feature an interactive 3D scene using @react-three/fiber and @react-three/drei. The hero section will showcase a luxury perfume bottle floating in the center with a slow 3D rotation. A golden rim light will accentuate the bottle's contours, while a soft fragrance mist subtly moves in the background. Text will reveal smoothly as users scroll, creating an engaging storytelling experience. The homepage will also include cinematic transitions and micro-interactions to enhance the luxury feel.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, with layered depth via scroll. Decorative elements like fragrance mist and distant shapes will translate at different speeds, while real content scrolls naturally. This approach will create a visually rich first impression, ideal for a luxury fragrance brand. Internal pages such as the shop, product page, cart, and checkout will adopt a "static" model to prioritize clarity and speed.

Non-Functional Requirements

• The website must load quickly, with optimized assets to ensure fast performance on both desktop and mobile devices.
• The 3D elements should not compromise the overall site speed and should be limited to the hero and key storytelling sections.
• The design should be responsive, ensuring a seamless experience across various devices and screen sizes.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB
• AI Models: None specified
• AI Tools: None specified
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The website will primarily target luxury shoppers and perfume enthusiasts.
• The design will follow modern 2026 web trends, focusing on aesthetics and user engagement.
• The 3D elements will be limited to ensure the site remains lightweight and fast.

Glossary

• 3D Animation: The process of creating three-dimensional moving images in a digital environment.
• Glassmorphism: A design trend characterized by the use of transparent elements and frosted-glass effects.
• Parallax: A scrolling technique where background images move slower than foreground images, creating an illusion of depth.
• Micro-interactions: Small animations or design elements that provide feedback or enhance user interaction.