Scroll-video hero on canvas
182 JPG frames from two clips are drawn one by one on a canvas as you scroll, so the camera glides from the room down to the reception as one seamless shot.
in productionsereno-site-one.vercel.app2026
Sereno · Massage & Rest Studio
Sereno is a quiet luxury studio in Savassi, Belo Horizonte, selling massage and rest as a ritual, from single sessions to monthly and annual plans. The site opens on a scroll-video hero: the camera advances through the room and descends to the reception, drawn frame by frame on a canvas tied to the scroll, so two AI generated clips read…
HTML5CSS3JavaScript (vanilla)GSAPScrollTriggerLenisCanvas API
About the project
Sereno is a quiet luxury studio in Savassi, Belo Horizonte, selling massage and rest as a ritual, from single sessions to monthly and annual plans. The site opens on a scroll-video hero: the camera advances through the room and descends to the reception, drawn frame by frame on a canvas tied to the scroll, so two AI generated clips read as one continuous shot. It is hand coded in vanilla HTML, CSS and JavaScript, with GSAP, ScrollTrigger and Lenis driving the smooth scroll, the pinned horizontal gallery and the reveals, and a booking form that assembles the visitor's request into a ready to send WhatsApp message.
How it was built
Graceful three-level fallback
The hero engine reads a frames manifest and degrades on its own: real frames, then two images with crossfade, then a single Ken-Burns still, always respecting prefers-reduced-motion.
WhatsApp as the booking engine
The visit form collects name, WhatsApp, chosen ritual and best day, then assembles a prefilled WhatsApp message so the studio confirms in minutes with no backend to run.
Quiet luxury design system
A from-scratch brand and pt-BR copy on a cream, blush and gold palette, set in Cormorant Garamond and Jost, with a pinned horizontal gallery walking through a session minute by minute.
cat specs.txt
Designed, built and shipped live by Bernardo Iannini
Get in touch