Overview

Where Maison Cacao was one page and no libraries, this was the harder brief: a multi-route site with a shared layout, a work index that filters by category and switches between grid and list, individual case-study pages, and a language toggle, all with scroll-driven motion. The design is Karin Nasrallah’s. My job was to turn it into a React application that moves the way her mockups imply: Lenis for the scroll, GSAP for the headline reveals and the marquee of partner names, and routing that keeps the transitions between pages smooth rather than abrupt.

Services

Design-to-code implementation
React routing & shared layout
GSAP scroll choreography
Filterable index (grid / list)
EN / FR language switch

Stack

React · Vite · GSAP · Lenis · React Router

Karin

Design by

4 + 4

Routes

EN / FR

Languages

2026

Delivered

Type that sits on the image, not over it

The hero sets TENNIS INTO CULTURE in three staggered lines across a full-bleed still, with a thin diagonal that cuts the frame. Getting the line breaks, the overlap with the athlete and the reveal timing to match the mockup at every width was most of the hero’s work.

An index that behaves like a tool

The Work page is a giant wordmark, a category list with plus/minus toggles, and a grid/list switch. Filters are URL parameters, so a filtered view can be shared and the back button behaves; small things that separate a demo from a site.

Motion with a real stack this time

Lenis smooths the scroll, GSAP drives the headline masks, the partner marquee and the numbered service panels that slide in as you reach them. The exercise was in restraint: one easing family, motion tied to scroll position, nothing that plays without being asked.