Nuxar Perfumery
Full-Stack Developer
Overview
High-end cinematic perfume website featuring GSAP animations, 3D transforms, particle effects, and dark luxury UI. Backend deployed with Golang and Railway.
The Problem
Premium perfume brands need a digital presence that matches the luxury and sophistication of their products. Standard e-commerce templates fail to convey the artistry, emotion, and craftsmanship behind fine fragrances. Nuxar Perfumery needed a website that delivers a cinematic, immersive brand experience — not just a product catalog — with dramatic animations, 3D effects, and a premium dark-themed interface that reflects the elegance of their perfume collection.
The Solution
Nuxar Perfumery is a high-end cinematic perfume website built with React 19, TypeScript, and Vite. The site features GSAP-powered scroll animations, Three.js 3D effects, custom particle fields, a sophisticated dark theme with glassmorphism effects, custom cursor, and canvas-based floating particle animations. An integrated AI chatbot powered by Google Gemini provides perfume consultation services. The backend uses Supabase for product data and Google Generative AI for conversational intelligence, with Upstash Redis rate limiting and Cloudflare Turnstile bot protection.
Key Features
Cinematic GSAP Animations
Professional-grade scroll-triggered animations with typewriter effects, blur-reveal transitions, clip-path reveals, and elastic animations. Custom cubic-bezier easings for dramatic, smooth motion.
3D Effects & Particle Systems
Three.js integration for 3D visual elements. Canvas-based floating particle fields with parallax effects. Noise texture overlay and chromatic aberration for cinematic atmosphere.
AI Perfume Consultant
Google Gemini-powered chatbot for personalized fragrance recommendations, perfume notes education, and product discovery. Streaming AI responses for real-time conversational experience.
Premium Dark Theme
Sophisticated black and red color scheme with glassmorphism effects. Fully responsive with mobile-first optimization and reduced motion support for accessibility.
Enterprise Security
Upstash Redis rate limiting (token bucket algorithm) for API protection. Cloudflare Turnstile for privacy-friendly bot protection on contact forms.
Architecture
React 19 + TypeScript frontend built with Vite. GSAP (ScrollTrigger) handles scroll-based animations. Three.js via @react-three/fiber provides 3D rendering. Google Generative AI (Gemini Pro) powers the AI chatbot with Vercel AI SDK for streaming responses. Supabase serves as the backend for product data and blog content. Upstash Redis provides rate limiting infrastructure.
How to Use
Visit the website to experience the cinematic landing page with GSAP scroll animations and 3D effects. Browse the perfume catalog with interactive product cards, detailed fragrance information, and pricing. Use the AI chatbot for personalized perfume recommendations based on preferences. The contact form is protected by Cloudflare Turnstile for spam prevention. Admin users manage the product catalog through Supabase database directly.
Impact & Results
Delivers a luxury brand experience that sets Nuxar Perfumery apart from standard e-commerce competitors. The GSAP animations and Three.js 3D effects create an emotional connection with visitors, increasing engagement and time-on-site. The Google Gemini AI chatbot provides 24/7 personalized perfume consultations, reducing customer support workload while improving conversion rates. Upstash Redis rate limiting prevents API abuse while maintaining responsive performance.