01 / 07RESTAURANT · DUITSLANDLive
Bravo Grill
Een website met karakter voor Bravo Grill in Kloster Lehnin (Duitsland): het volledige menu met allergenen, telefonisch bestellen, WebGL-vuureffecten en een beheeromgeving waarin de eigenaar zelf het menu bijwerkt.
Webontwikkeling
- Wat we deden
- Webdesign & merkbeleving
- Digitaal menu met allergenen
- WebGL- & GSAP-animaties
- Beheeromgeving met Firebase
- Technologieën
- React 19VinextTailwind CSSGSAPThree.jsFirebaseCloudinaryVercel
- Type
- Website · Klantproject
01Over het project
De vraag
Bravo Grill wilde een website die voelt als een keuken die uit vuur geboren is. Het menu moest volledig zijn, correct gelabeld volgens de Duitse regels voor allergenen en additieven, en de eigenaar moest het zelf kunnen bijwerken, zonder hulp van buitenaf.
Onze aanpak
We bouwden het ontwerp rond vuur: de titel stijgt op uit WebGL-vlammen en de scènes bewegen mee met het scrollen. Het menu wordt live gelezen uit de bestaande menudatabase van het restaurant; een wijziging in het beheer staat binnen een minuut online. Zware effecten laden pas wanneer ze nodig zijn en maken op mobiel plaats voor een rustigere weergave.
02Belangrijkste functies
- 01
Volledig menu met allergenen
Bij elk gerecht staan allergenen en additieven in gewone woorden, niet alleen als code. De menupagina heeft een vaste categorienavigatie, zoeken en gerechtdetails.
- 02
Eigen beheeromgeving
Het restaurant logt in met zijn eigen Google-account en voegt gerechten toe, past ze aan, verbergt of verwijdert ze, kiest allergenen en uploadt foto's. Gerechten met ontbrekende gegevens worden apart getoond.
- 03
Bestellijst voor telefonisch bestellen
Bezoekers noteren gerechten met aantallen en zien het totaal, en bellen daarna het restaurant. De lijst blijft op hun eigen toestel en wordt nergens naartoe gestuurd.
- 04
Een opening uit vuur
BRAVO GRILL LEHNIN rijst letter voor letter op uit een WebGL-vuur dat reageert op de muis en oplaait bij een klik.
- 05
Scènes die meescrollen
De burger valt tijdens het scrollen uiteen in lagen en komt weer samen; het snijden van de döner speelt beeld voor beeld af met het scrollen.
- 06
Voor iedereen, op elk toestel
Of het restaurant nu open is, wordt live getoond volgens de tijd in Berlijn. Met beperkte beweging of zonder WebGL werkt de site met stilstaande beelden.
03Schermen
04Technologie
Interface
- React 19
- Componentstructuur van de site
- Vinext
- Next.js-achtige routing op Vite
- Tailwind CSS
- Designsysteem en layout
- GSAP & Lenis
- Scrollanimaties en vloeiend scrollen
- Three.js
- WebGL-vuur en de burgerscène
Server & data
- Firebase
- Menudata en beheerlogin met Google
- Cloudinary
- Opslag van de gerechtfoto's
Infrastructuur
- Vercel
- Hosting en CDN-cache voor de foto's
05Status
