An immersive, high-performance experiential landing page for a fictional century-old perfume house from Grasse. Since fragrance exists beyond the visual, this digital experience transforms the intangible into an engaging visual journey through advanced WebGL simulations, fluid typography, and motion-driven storytelling.
Built with a strong focus on modern web performance and Core Web Vitals, balancing immersive visual experiences with efficient frontend engineering and technical optimization.
Desktop Experience Overview: Custom GLSL golden vapor simulation with mouse parallax.
📱 Click to view Mobile Responsive layout
- Custom WebGL Particle Simulation: Driven by a custom GLSL shader utilizing layered simplex noise to drift 26,000 GPU particles behind a serif wordmark, mimicking golden vapor. Includes lerped mouse parallax.
- Scroll-Driven Storytelling: Powered by GSAP
ScrollSmoother, featuring a pinned notes pyramid revealing along a growing amber rail, line-by-line masked textual reveals, and micro-interactions. - Vector Fidelity: Flacons rendered as pure SVGs with precision curved shoulders and per-scent liquid gradients for infinite scaling and minimal asset payloads.
Built with close adherence to Google Chrome's modern-web-guidance framework to ensure high-end visuals never compromise the user experience:
- Paint-Optimized LCP: All primary textual content is server-rendered for an instantaneous Largest Contentful Paint. The heavy Three.js context is dynamically imported asynchronously and never blocks the initial paint.
- Hardware-Accelerated Motion: Animations are strictly limited to composite-only properties (
transformandopacity) to maintain a fluid 60fps scrolling experience without triggering layout shifts. - Resource Conservation: The WebGL canvas automatically pauses calculation loops when scrolled offscreen or when the browser tab is hidden/minimized.
- A11y & Motion Control: Fully compliant with
prefers-reduced-motion. Users with reduced-motion enabled bypass heavy scroll triggers entirely, receiving a graceful fallback of a static golden vapor frame alongside fully accessible content.
- Framework: Next.js (App Router), TypeScript, Tailwind CSS
- Graphics & Motion: Three.js, Custom GLSL, GSAP (ScrollSmoother, SplitText)
- Standards & Quality:
modern-web-guidance(Google Chrome / Provenance-Attested)
Ensure you have Node.js installed on your machine.
- Clone the repository:
git clone [https://github.com/your-username/ether-parfumerie.git](https://github.com/your-username/ether-parfumerie.git) cd ether-parfumerie