Dar El Bahr
Fine-dining seafood house on the marina at Port El Kantaoui. A scroll-driven hero reveal, an interactive SVG floor plan wired into the booking flow, and a pinned chef narrative, built on Next.js 16.
Visit live site
06
Routes
SVG
Floor plan
02
API routes
Dar El Bahr is a fine-dining seafood restaurant on the Môle des Jasmins, on the marina at Port El Kantaoui in the Sousse governorate of Tunisia. The house runs a short seasonal card built around wild fish from the Sousse auction, a seven-course tasting menu called L'Odyssée, and an all-Tunisian cellar, served across a dining room, a marina terrace and two private salons. The site is a French-language showcase and booking front door for that room.
The signature of the build is the opening sequence. The restaurant's ritual is a cloche lifted at the table, so the homepage turns that gesture into the page's first interaction: a 240vh sticky stage where a requestAnimationFrame-throttled scroll listener writes a single normalised progress value onto a CSS custom property, and the stylesheet drives everything else from it. A clip-path circle opens outward over a full-bleed photograph of the lobster couscous while the headline block fades up and out and the closing line fades in. Because the whole animation is expressed in CSS from one variable, it runs off the compositor rather than a render loop, and a prefers-reduced-motion query flattens it to a static plate.
Underneath that, the site is a full six-route restaurant front end rather than a single-page showpiece. The card, the cellar and the chef's history are driven by typed data modules, not hardcoded markup. GSAP ScrollTrigger and Lenis carry a shared vocabulary of scroll media across every page: clip-path mask reveals in three variants, parallax and Ken Burns frames, batched staggered entrances. Every one of those primitives checks reduced-motion before it animates, and the reservation flow is the part that got the most engineering attention.
The Challenge
A gastronomic restaurant sells a room and a ritual before it sells a dish, and neither survives a conventional template of stock hero, price grid and embedded booking widget. Dar El Bahr needed a site that carried the theatre of the house into the browser while still doing the unglamorous work of a restaurant front door: publishing a card and a cellar that change with the season, explaining three physically different seating areas well enough that a guest picks the right one, and taking a request for a table without the friction of a third-party reservation platform or a card imprint. It also had to hold up on a phone, on a hotel connection, for guests arriving from the marina, and stay fully legible when motion is switched off.
What We Built
We built the site on Next.js 16 with the App Router, React 19 and Tailwind CSS v4, with the palette and fluid display typography defined as design tokens in a single theme block. The homepage opens on the scroll-driven cloche reveal, then hands off to GSAP ScrollTrigger sequences: a pinned four-chapter chef narrative that cross-fades on scrub at desktop widths and degrades to a stacked list otherwise, a masonry gallery with a hand-built lightbox, and reusable mask-reveal and parallax image primitives used across the card and the cellar. The booking page replaces a generic form with a hand-drawn SVG plan of the môle, showing the dining room, the marina terrace, the private salon and the moored boats; clicking a zone selects it, and a parallel ARIA radiogroup of cards gives keyboard and screen-reader users the same choice. Service rules live in one place and are enforced twice, in the browser and again in the route handler: Monday closures, Sunday lunch-only service, the lunch and dinner slot tables, and a twelve-cover ceiling, with a booking reference minted on success. Every page carries the same accessibility floor of a skip link, visible focus rings, labelled landmarks and reduced-motion fallbacks, and the homepage ships Restaurant JSON-LD with address, coordinates and opening-hours specifications alongside a typed sitemap and robots route.
The Outcome
The site is live on Vercel as a six-route French-language front end for the restaurant. Guests get an opening sequence that reproduces the house's cloche ritual in pure CSS off a single scroll variable, a card and a tasting menu rendered from typed data modules that can be reseasoned without touching layout code, and a booking flow where the seating choice is made on a picture of the actual room rather than in a dropdown. Because the slot rules, closing days and cover limits are validated on the server as well as the client, a submitted request is already clean by the time the house sees it, and the guest leaves with a reference number and no card imprint taken. The motion layer is uniformly gated on prefers-reduced-motion, so the pinned narrative, the parallax frames and the hero reveal all resolve to static, readable pages when motion is disabled.
Scroll-driven cloche reveal
The homepage opens on a 240vh sticky stage where a requestAnimationFrame-throttled scroll listener writes one normalised progress value to a CSS custom property. The stylesheet drives the rest: a clip-path circle opens over a full-bleed dish photograph while the headline fades out and the closing line fades in. Flattens to a static plate under prefers-reduced-motion.
Interactive SVG floor plan booking
A hand-drawn plan of the Môle des Jasmins renders the dining room, the marina terrace, the private salon, the carving guéridon and the moored boats as clickable zones with selection badges. A parallel ARIA radiogroup of zone cards carries capacity and description, so keyboard and screen-reader users make the same choice without the decorative graphic.
Service-aware reservation validation
The lunch and dinner slot tables, the Monday closure, the Sunday lunch-only rule and the twelve-cover ceiling are enforced in the browser and again in the route handler. The time selector repopulates from the chosen date, invalid fields scroll into view, and a successful request returns a generated booking reference rendered in an animated confirmation panel.
Pinned chef narrative scroller
GSAP matchMedia pins a chapter panel at desktop widths and cross-fades four dated chapters of the chef's history on scrub, driving image opacity, text position and a progress dot row from one scrubbed timeline. Below the breakpoint, or with motion reduced, the same chapters render as a plain stacked list of figures.
Masonry gallery with custom lightbox
A CSS multi-column gallery reveals in staggered batches via ScrollTrigger.batch, and opens into a hand-built modal rather than a library: focus trap across the control buttons, Escape to close, left and right arrows to step, document scroll lock, and focus returned to the thumbnail that opened it.
Reusable scroll-media primitives
Three shared components carry the motion vocabulary across every page: mask reveals in diagonal, curtain and circle clip-path variants with an optional scrub mode, parallax frames with yPercent scrub and an opt-in Ken Burns zoom, and a generic reveal wrapper. All render through next/image with blur placeholders and check reduced-motion before animating.
Live in production
Dar El Bahr is running in production today. Open it, then tell us what you want built — BreakNRoot engineers systems like this one from first prototype to production.
BNR-CF-02Kahwa Lab
A French-language site for a Sousse specialty coffee roaster and coffee bar, built on Next.js 16 with a scroll-driven React Three Fiber hero, hand-drawn SVG roast data and a five-locale interface.
Open file
BNR-CF-04SKYLINE Rooftop Lounge
A seventh-floor cocktail lounge on the Port El Kantaoui marina, built as a scroll-driven Next.js site where the sky darkens from champagne to dusk as you descend and gold dust drifts away from the cursor.
Open file