Client — a Moroccan luxury couture house with 5 ateliers and a Paris showroom — had no digital presence matching their craft-heritage positioning. Needed a site that felt as premium as hand-embroidered caftans taking 20–40 days to make, while serving both French and Arabic-reading clientele.
- 01Custom cursor + magnetic hover interactions on collection cards
- 02Curtain-reveal and mask-reveal page/section transitions (GSAP + Framer Motion)
- 03Lenis-powered smooth scroll with scroll-progress indicator
- 04Hand-built Moroccan ornament components (Zellige tilework, Arabesque, Moucharabieh lattice) — SVG/CSS motifs, not stock decoration
- 05Masonry lookbook grid with category filters (Hommes, Femmes, Détails, Coulisses)
- 06Multi-step inquiry modal for bespoke/consultation requests, separate from the standard contact form
- 07Centralized typed content layer (single content.ts) — no CMS, but structured for fast copy edits
- 08SEO: dynamic sitemap + robots routes, route-grouped layouts with page-transition template
- Coordinating three animation systems (Framer Motion, GSAP, Lenis) without scroll-jank or event conflicts
- Recreating authentic Moroccan geometric ornamentation (zellige tilework, arabesque, moucharabieh lattice) as scalable SVG components instead of raster images, for both performance and crispness at any size
- Building a masonry lookbook with variable image spans that stays performant and doesn't reflow/jump on load
- Custom cursor and magnetic-hover effects needed graceful fallback/disable on touch devices
Next.js 16 App Router, TypeScript, React 19. Styling in Tailwind CSS v4 with clsx/tailwind-merge for variant handling. Animation stack layers three tools deliberately: Framer Motion for component-level transitions, GSAP for scroll-triggered sequences, Lenis for smooth-scroll physics tying them together. No headless CMS — all copy lives in one typed lib/content.ts, giving the client fast text edits without a CMS subscription while keeping type safety. Custom SVG components recreate Moroccan geometric ornamentation (zellige, arabesque, moucharabieh) natively instead of using pattern images, keeping the page lightweight.