Café Sidra

Café Sidra is a salon de thé and coffee house at 14 avenue Hédi Chaker, on the Boujaafar corniche in Sousse, open from seven in the morning until late and serving a Sunday brunch. The brief was not a page of opening hours and a photo gallery. It was to make the site feel the way the room feels at different times of day, so we built the whole homepage around a single continuous idea: scrolling the page advances the clock.

A fixed sky sits behind the entire document and is interpolated across seven colour stops by one GSAP ScrollTrigger bound to the full body height. The sun climbs a parabolic arc and sinks past the horizon, a moon and forty-six seeded stars fade up in the last stretch, and a small glass clock reads out the time from 07h00 to 22h00 with the name of the current phase. Underneath the hero sits a hand-drawn SVG of the corniche itself, with the sea, feluccas, gulls, palms, street lamps, parasols and bistro tables split into depth layers that parallax at different rates. Between those anchors, pinned chapters carry the narrative: four cups crossfading through the day with a Ken Burns push, a pastry showcase that scrolls horizontally while each photograph parallaxes inside its own frame, and six polaroids that fly in from scattered positions and settle into a tidy row.

The content layer is deeper than the animation suggests. The menu, the eight signature pastries with their ingredients and allergens, and the four private-event formats are all authored as structured data in five locales — French as the source, plus English, Arabic, Russian and German — served through a bespoke i18n provider that flips the document direction for Arabic. Every motion path is gated behind gsap.matchMedia and a prefers-reduced-motion check, so the pinned chapters degrade to readable static collages and the smooth-scroll layer never initialises for visitors who ask for less movement.