L’OISEAU DÉ

Highlights

• Interactive hero sections with a custom WebGL liquid distortion effect applied to full-bleed imagery
• Animated Truchet arc pattern overlays used as decorative section backgrounds
• Three product category pages: Skincare, Cosmetics, and Face Health, each with a sticky scroll layout
• Featured products fetched live from a Canopy CMS backend with loading state handling
• Partner brand showcase (Dior, Estée Lauder, Clinique, Kiehl's, L'Oréal, Lancôme, MAC Cosmetics) with auto-scrolling logo tickers
• FAQ accordion and contact form with real-time validation on the Contact page
• Custom design system using brand color tokens (accent, pistachio, caledon, dusty, beige, etc.) and dual typeface pairing (Clash Display + Inter)
• Fully responsive across mobile, tablet, and desktop breakpoints

Challenge

Build a high-end beauty e-commerce storefront that communicates luxury and editorial quality at every touchpoint — while remaining fast, scalable, and straightforward to update through a content management system.

Approach

Used the Next.js 16 App Router for a modern, performance-friendly architecture. Designed a custom WebGL liquid distortion shader for the hero sections to create an immersive first impression unique to the brand. Scroll-triggered and hover-driven animations were implemented with Framer Motion to maintain a fluid, editorial feel throughout. Products and inventory are managed via Canopy (headless CMS), decoupling content updates from the codebase entirely. A bespoke Tailwind CSS v4 design system with named color tokens and custom typography ensured visual consistency across all pages and states.

Outcome

A polished, fully responsive e-commerce storefront with dynamic product loading, animated category browsing, a brand partnership gallery, and a working contact form — all unified under a distinctive high-fashion visual identity that positions L'OISEAU DÉ as a premium beauty destination.