SKYLINE 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.
Visit live site
05
Locales
03
Motion systems
08
Routes
SKYLINE Rooftop Lounge sits on the seventh floor of the Résidence La Goélette, facing the marina at Port El Kantaoui. The brief was a venue whose entire product is a time of day: the golden hour over the Gulf of Hammamet, cocktails poured against it, and the slow turn into night. A conventional brochure site would have flattened that into a photo grid, so the build treats the scroll position itself as the clock.
The site is a Next.js 16 App Router application on React 19 and Tailwind CSS v4. A fixed multi-layer gradient backdrop sits behind every page and is scrubbed by GSAP ScrollTrigger across the full document height, moving from a champagne dawn to a rose-and-gold dusk while a blurred sun halo drifts down the viewport. Over that, a lightweight 2D canvas seeds gold, champagne and blush particles that rise like fireflies, twinkle on a sine phase and push gently away from the pointer. Lenis carries the smooth scroll, GSAP handles the pinned narrative sections and clip-path reveals, and Motion drives the form states, header drawer and magnetic call-to-action buttons.
Content is modelled per locale rather than per page. Every menu item, experience, event and interface string carries French, English, Arabic, Russian and German variants through a typed Localized helper, with a runtime language provider that persists the choice, falls back to French for any missing key and flips the document to dir="rtl" for Arabic. French remains the default and the served language, which matches the venue's local and resort-tourist mix. The venue, its bar programme, its four events and its Sousse coastline map are all authored in that same multilingual data layer.
The Challenge
A rooftop lounge sells an atmosphere that only exists for about ninety minutes a day, and static photography does not carry it. The site had to reproduce the arc of an evening rather than describe it, while remaining a working commercial tool: a bookable menu, a live events calendar, and a reservation path that separates a two-top from a VIP sofa from a full privatisation. It also had to serve a mixed audience of Tunisian locals and European and Russian resort visitors from a single French-first build, and every piece of ambient motion had to be fully disableable for visitors who ask for reduced motion.
What We Built
The build layers three independent motion systems that share one palette. A fixed SkyBackdrop scrubs two stacked gradient layers and a descending sun halo against total document scroll; a canvas particle field spawns a density-derived count of drifting gold motes with pointer repulsion, device pixel ratio capping and automatic pause on tab visibility change; and a pinned full-height sequence cross-fades three timestamped photographs, 18h30 to 23h30, across a GSAP timeline as the visitor scrolls. Around that sit a spotlight card component that tracks the pointer through CSS custom variables without re-rendering per frame, a masonry gallery with a hand-built lightbox, and a bespoke SVG night map of the Sousse coastline that links straight to Google Maps directions. Reservation and contact submissions run through Next route handlers that mirror the client-side validation and return per-field 422 errors and a generated booking reference. Every animated system checks prefers-reduced-motion and either falls back to a static layout or does not initialise at all.
The Outcome
The site ships as a six-route French-language application with statically generated event pages, an XML sitemap, a robots policy and Schema.org structured data covering the venue as a BarOrPub with opening hours, geo coordinates, menu and reservation endpoints, plus per-event Event markup carrying performer and place. The venue can publish an evening, a new signature cocktail or a private-hire package by editing a single typed data file, and the change propagates to the page, the sitemap and the structured data at once. The five-locale dictionary gives the lounge a path to its Russian and German resort audience without a second build, and the reservation route handler is written as a validated boundary ready to be wired to a CRM or mail transport.
Pointer-reactive gold particle canvas
A 2D canvas seeds gold, champagne and blush motes that drift upward on a sinusoidal path, twinkle on individual phase offsets and are pushed aside by a radial force field around the cursor. Particle count derives from viewport area and is capped, device pixel ratio is clamped at 1.75, a ResizeObserver respawns the field on layout change, and the animation frame loop halts entirely on tab visibility change. It never initialises under reduced-motion.
Scroll-scrubbed sky, dawn to dusk
A fixed backdrop behind the whole application stacks a champagne day gradient, a blurred radial sun halo and a rose-to-slate dusk layer. GSAP ScrollTrigger scrubs the dusk layer's opacity and the halo's vertical position against the full height of the document, so the sky darkens continuously as the visitor descends any page.
Pinned three-act evening sequence
The Une soirée au SKYLINE section pins a full-viewport stage and cross-fades three timestamped photographs, sunset at 18h30 through the city at night at 23h30, along a GSAP timeline scrubbed over roughly 2200 pixels of scroll, with captions swapping and progress markers filling in gold. Reduced-motion visitors receive three static captioned cards and no pinning.
Masonry gallery with a hand-built lightbox
A CSS columns masonry grid reveals in staggered batches via ScrollTrigger.batch, and each frame opens a bespoke full-screen viewer with a focus trap, Escape to close, arrow-key navigation, document scroll lock, Lenis suppression, GSAP open and close transitions and focus returned to the triggering element.
Five-locale runtime internationalisation
A React context provider serves French, English, Arabic, Russian and German from a dictionary of roughly 1700 lines, resolving dot-path keys with automatic fallback to French. The choice persists to localStorage and sets both the document language and text direction, switching to dir="rtl" for Arabic. Menu, experience and event records carry a per-locale string for every field through a typed Localized helper.
Three-track reservation flow
A radiogroup lets the visitor pick a table, a VIP sofa or a private event before filling in date, time slot, party size and message. Client-side validation is mirrored exactly in the Next route handler, which rejects past dates and out-of-range party sizes with per-field 422 responses and returns a generated SKY- booking reference rendered in an animated confirmation state.
Live in production
SKYLINE Rooftop Lounge 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-03Dar 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.
Open file
BNR-CF-05Zitouna
A French-language site for a contemporary Tunisian restaurant in the medina of Sousse, built on Next.js 16 and GSAP, with a pinned horizontal signature gallery and a five-language switcher including Arabic RTL.
Open file