Beef & Buns
A cinematic single-page site for a Sousse smash burger house, built around a scroll-driven 3D burger that opens layer by layer, with a WhatsApp order flow and phone-wallet loyalty passes.
// pre-launch · beefandbuns.tn not yet deployed02
Wallet platforms
02
GLB models
04
API routes
Beef & Buns is a smash burger restaurant on Avenue les Orangers in Sousse, open every evening from 17:00 to 01:00. The brief was a site that carries the same weight as the food itself: a dark, grain-textured stage where the product is the interface rather than a photo dropped into a template. The result is a Next.js 16 application whose entire first act is a real-time WebGL burger suspended in front of the wordmark, reacting to scroll and cursor.
The 3D work is not decorative. Two glTF assets, a burger and a separate greens model, are loaded through React Three Fiber, retextured mesh by mesh at runtime, then reassembled into named layers: bottom bun, patties, three cheese slices, a lettuce ring and tomato slices normalized to the patty diameter, and a crown lifted to make room for them. Those layers are registered into an explode map so that scrolling the Craft section pulls the burger apart in a staggered cascade while ingredient callouts fade in around it. GSAP ScrollTriggers write plain numbers into a shared mutable object that the three.js frame loop reads, so scroll progress never triggers a React re-render.
Around that centrepiece sits the commercial layer: a persistent cart, a slide-in order drawer with table booking, a drag-to-flip menu book on its own route, and an Apple Wallet and Google Wallet loyalty card issued straight from the site. The whole build ships on Vercel with a .tn domain queued behind it.
The Challenge
An independent burger restaurant in Sousse with a strong printed identity and an active Instagram presence, but no digital home and no way to take an order outside a phone call. The commercial reality is WhatsApp: that is where customers already order, so any checkout that asked people to create an account or enter card details would simply be abandoned. At the same time the client wanted the site to feel like the brand, not like a menu PDF, which meant carrying real-time 3D and heavy scroll choreography on mobile hardware without turning the first paint into a stall. The loyalty programme added a third constraint, since it had to work on both iOS and Android without a backend, a database, or a customer login.
What We Built
We built a Next.js 16 / React 19 application in TypeScript with Tailwind v4, where the hero is a fixed WebGL canvas rendered by React Three Fiber and dynamically imported client-side only. Two GLB models are merged, recoloured and re-stacked at load into an explode registry; scroll progress from GSAP ScrollTrigger is written into a plain mutable object that the render loop samples each frame, and Lenis drives smooth scrolling that respects prefers-reduced-motion. Ordering runs through a localStorage-backed cart context feeding a drawer that composes a formatted WhatsApp deep link, optionally carrying a table booking with day, time slot, guest count and notes. Loyalty is issued serverlessly: four Node route handlers mint a short-lived HMAC download token, then build and sign a .pkpass with passkit-generator or an RS256 save-to-wallet JWT for Google, deriving a stable member serial by HMAC from the customer's phone or email so no database is needed. A separate /menu route renders the printed menu as a real flip book with rotateY sheets, pointer-drag turning, touch swipe and arrow-key navigation.
The Outcome
The site is live on Vercel at beefnbuns.vercel.app with the .tn domain pending. Every dish in the printed menu is now orderable in two taps: add from the product row, the tenders grid, the extras list or the flip book, then send the composed order to the restaurant's WhatsApp, with a table reservation attached if wanted. The wallet endpoints are built and deployed, gated behind an availability check so the buttons stay disabled until the client's Apple Pass Type ID and Google issuer credentials are provisioned, at which point the loyalty card activates without a redeploy. The 3D pipeline degrades cleanly: the canvas is client-only, scales down on narrow viewports, fades out entirely once the menu takes the screen, and marquee and grain animations stop under reduced-motion. The restaurant now has an address, hours, an embedded map, phone and Instagram in one place, and a menu it can extend by editing a single typed data file.
Scroll-driven 3D burger
A fixed React Three Fiber canvas loads burger.glb and greens.glb, retextures every mesh at runtime and rebuilds them into named layers. ScrollBridge feeds hero, explode and exit progress plus normalized pointer position into a shared state object read by the frame loop, so the burger settles, spins, disassembles in a staggered cascade and drops away without a single React re-render.
Apple and Google Wallet loyalty card
Four Node route handlers issue the loyalty pass. A ten-minute HMAC download token is minted from the customer's phone or email, then passkit-generator signs a .pkpass with QR barcode and back fields, or a jsonwebtoken RS256 save-to-wallet JWT redirects to Google Pay. The member serial is derived by HMAC from the contact, so there is no database, and an availability endpoint keeps the buttons disabled until credentials are set.
Cart with WhatsApp order and table booking
A cart context persists lines to localStorage and survives reloads. The slide-in drawer handles quantities, removal and totals in Tunisian dinar, and folds in an optional reservation with fourteen day options, half-hour slots covering the 17:00 to 01:00 service, guest count and free-text notes, then composes the whole thing into a prefilled wa.me deep link.
Drag-to-flip menu book
The /menu route renders the printed menu as a physical book: CSS 3D sheets with front and back faces, per-sheet turn shading driven by a --turn custom property, pointer-drag turning with commit thresholds, touch swipe on coarse pointers, page-edge hit zones and arrow-key navigation. Pages are padded to an even count and every burger page can add straight to the order.
Cinematic entry and motion system
A preloader fills the bun logo with brand red from the bottom, then wipes upward and hands off to a GSAP tween that eases the 3D entry, with a hard timeout so no visitor can ever be trapped behind it. Lenis provides smooth scrolling wired into the GSAP ticker, an animated SVG grain overlay sits above the page, and both the grain and the marquee stop under prefers-reduced-motion.
Brand-native menu and content sections
Burgers, tenders, fries, extras and drinks live in one typed data module alongside the brand block, so pricing and copy change in a single file. The original menu artwork ships as SVG badges and section headers, parallaxed outline numbers echo the printed layout, a twelve-tile Instagram wall drifts in two opposing rows on scroll, and the footer embeds a filtered Google map of the Avenue les Orangers address.
Site in deployment
Beef & Buns is being engineered against beefandbuns.tn and will be published there. Tell us what you are building — BreakNRoot ships production software for startups and enterprises worldwide.
BNR-CF-07Clinique El Yasmine
A multidisciplinary clinic in Sahloul, Sousse, built on Next.js 16: a four-step booking flow validated against each doctor's schedule, trilingual FR/EN/AR content, and accessibility engineered throughout.
Open fileBabke
A kebab and plates restaurant in Sousse. The site is in build: a menu the kitchen edits itself, a plate flow that matches how orders are actually assembled, and a direct path from browsing to ordering.
Open file