01 / 07RESTAURANT · GERMANYLive
Bravo Grill
A website with real character for Bravo Grill in Kloster Lehnin, Germany: the full menu with allergen labels, phone ordering, WebGL fire effects and an admin panel where the restaurant keeps its own menu up to date.
Web development
- What we did
- Web design & brand feel
- Digital menu with allergens
- WebGL & GSAP animation
- Firebase admin panel
- Technologies
- React 19VinextTailwind CSSGSAPThree.jsFirebaseCloudinaryVercel
- Type
- Website · Client project
01About the project
The brief
Bravo Grill wanted a website that feels like a kitchen born from fire. The menu had to be complete, labelled correctly under German allergen and additive rules, and the restaurant needed to keep it up to date on its own, without outside help.
Our approach
We built the design around fire: the title rises out of WebGL flames and the scenes move with the scroll. The menu is read live from the restaurant's existing menu database, so a change made in the admin panel is on the site within a minute. Heavy effects only load when they are needed and give way to a calmer view on mobile.
02Key features
- 01
Full menu with allergens
Every dish lists its allergens and additives in plain words, not just as codes. The menu page has sticky category navigation, search and dish details.
- 02
The restaurant's own admin panel
The restaurant signs in with its own Google account to add, edit, hide and delete dishes, pick allergens and upload photos. Dishes with missing details are listed separately.
- 03
A list for phone orders
Visitors note dishes with quantities and see the running total, then call the restaurant. The list stays on their own device and is never sent anywhere.
- 04
An opening made of fire
BRAVO GRILL LEHNIN rises letter by letter out of a WebGL fire that reacts to the pointer and flares up on a click.
- 05
Scenes that follow the scroll
The burger splits into its layers and comes back together as you scroll; the doner being carved plays frame by frame with the scroll.
- 06
Open to everyone, on any device
A live open/closed status follows Berlin time. With reduced motion or without WebGL, the site works with still images.
03Screens
04Technology
Interface
- React 19
- Component structure of the site
- Vinext
- Next.js-style routing on top of Vite
- Tailwind CSS
- Design system and layout
- GSAP & Lenis
- Scroll animation and smooth scrolling
- Three.js
- WebGL fire and the burger scene
Server & data
- Firebase
- Menu data and Google sign-in for the admin
- Cloudinary
- Storage for the dish photos
Infrastructure
- Vercel
- Hosting and CDN caching for the photos
05Status
