BRASA is a fine-dining fire kitchen in São Paulo: long-aged cuts cooked over live wood embers, a twelve-seat chef's counter and a six-course experience. The site sells that room before you walk in, opening on a cinematic hero where a 241-frame JPEG sequence paints on a canvas driven by the scroll, then flowing through the house story, the à la…
HTML5CSS3JavaScript (vanilla)GSAPScrollTriggerLenisCanvas API
BRASA is a fine-dining fire kitchen in São Paulo: long-aged cuts cooked over live wood embers, a twelve-seat chef's counter and a six-course experience. The site sells that room before you walk in, opening on a cinematic hero where a 241-frame JPEG sequence paints on a canvas driven by the scroll, then flowing through the house story, the à la carte menu, an embedded sommelier and a reservation form. It is a hand-built no-build static site in HTML, CSS and vanilla JavaScript, using GSAP ScrollTrigger and Lenis for the scroll cinematics and a full PT and EN dictionary, with a static poster fallback on mobile and reduced motion.
brasa-restaurante-ten.vercel.app
Video coming soon
How it was built
Scroll-driven fire hero
The hero is not a video. A 241-frame JPEG sequence paints on a canvas, where the scroll only sets a target frame and a requestAnimationFrame loop eases toward it, so a slow decode never stalls the page and the push-in stays smooth.
Menu, sommelier and reservations
The à la carte menu carries an embedded sommelier that suggests a pairing per dish, plus a reservation form that lets guests pick the dining room or the twelve-seat chef's counter.
Bilingual PT and EN
Full localization in Portuguese and English driven by a data-i18n dictionary, with a PT and EN toggle that switches every section, the menu and the sommelier in place.
Static, fast, accessible
A no-build static site with Fraunces and Hanken typography, a skip link and reduced-motion support: below 861px the hero stays a static poster and no frames are downloaded.
$cat specs.txt
Designed, built and shipped live by Bernardo Iannini