Hero de scroll-vídeo no canvas
182 frames JPG de dois clipes desenhados um a um no canvas conforme a rolagem, com a câmera indo da sala até a recepção numa emenda invisível.
em produçãosereno-site-one.vercel.app2026
Sereno · Estúdio de Massagem & Repouso
Sereno é um estúdio de quiet luxury na Savassi, em Belo Horizonte, que vende massagem e repouso como ritual, do avulso aos planos mensal e anual. O site abre num hero de scroll-vídeo: a câmera avança pela sala e desce até a recepção, desenhada quadro a quadro num canvas amarrado à rolagem, fazendo dois clipes gerados por IA parecerem uma…
HTML5CSS3JavaScript (vanilla)GSAPScrollTriggerLenisCanvas API
Sobre o projeto
Sereno é um estúdio de quiet luxury na Savassi, em Belo Horizonte, que vende massagem e repouso como ritual, do avulso aos planos mensal e anual. O site abre num hero de scroll-vídeo: a câmera avança pela sala e desce até a recepção, desenhada quadro a quadro num canvas amarrado à rolagem, fazendo dois clipes gerados por IA parecerem uma tomada só, contínua. Tudo feito à mão em HTML, CSS e JavaScript puro, com GSAP, ScrollTrigger e Lenis cuidando da rolagem suave, da galeria horizontal com pin e dos reveals, e um formulário que monta o pedido do visitante numa mensagem de WhatsApp pronta para enviar.
Como foi construído
Fallback em três níveis
O motor do hero lê um manifesto de frames e degrada sozinho: frames reais, depois duas imagens com crossfade, depois uma imagem só com Ken-Burns, sempre respeitando prefers-reduced-motion.
WhatsApp como motor de agendamento
O formulário de visita coleta nome, WhatsApp, ritual desejado e melhor dia e monta uma mensagem de WhatsApp pronta, para a casa confirmar em minutos sem nenhum backend.
Design system quiet luxury
Marca e copy em pt-BR criadas do zero, paleta creme, blush e dourado, tipografia Cormorant Garamond e Jost, e uma galeria horizontal com pin que percorre uma sessão minuto a minuto.
cat specs.txt
Projetado, construído e colocado no ar por Bernardo Iannini
Entrar em contato