Gan Maison — Beleza Regenerativa
O site da Gan Maison, estúdio de beleza: uma hélice de partículas vira folha enquanto a primeira dobra, presa à rolagem, se abre por um arco, e um montador escreve a mensagem de agendamento no WhatsApp.
- Projeto
- Gan Maison — Beleza Regenerativa
- Status
- Em produção
- Categoria
- Site de estúdio de beleza · Cena de partículas em WebGL
Ficha técnica
- Nossa participação
- Design e desenvolvimento do site.
- Competências
- Cena de partículas em WebGL (OGL)
- Sequência presa à rolagem
- Montador de mensagem do WhatsApp
- Versão estática (sem JS, movimento reduzido)
- Tecnologias
- Vite
- GSAP (ScrollTrigger, SplitText)
- Lenis
- OGL
- Fraunces (subset) e Jost
O desafio
Dar a um estúdio de beleza que vivia numa página de links um site próprio, com cada agendamento continuando no WhatsApp.
Decisões de projeto
A assinatura é uma cena de partículas em WebGL feita com OGL: milhares de pontos formam uma dupla hélice, viram folha e depois se dispersam. O canvas é decorativo, desenha menos pontos em aparelhos modestos, cai para a resolução padrão quando os quadros demoram, pausa fora da tela e em abas ocultas e fica num único quadro quando o movimento reduzido é ativado, mesmo no meio da visita.
A primeira dobra fica presa e avança com a rolagem: a hélice vira folha e um arco se abre até ocupar a tela. Isso só roda quando o movimento é permitido, e quem volta a ela pelo teclado é levado ao topo, para que o botão em foco fique à vista.
Um montador escreve a mensagem de agendamento do WhatsApp conforme o visitante escolhe as opções, com prévia ao vivo num celular e uma primeira linha que a resposta automática do estúdio já reconhece; nada é armazenado. Sem JavaScript, o montador fica oculto e os botões simples do WhatsApp continuam.
A experiência
Partículas passam de hélice a folha, a primeira dobra se abre como uma porta e o agendamento termina numa mensagem de WhatsApp já escrita.
Um bom começo
Tem uma ideia
que merece sair do papel?
Que tipo de projeto você tem em mente?
Escolha um e a mensagem já sai escrita.
Trabalho remoto · atuação nas Américas, Europa, África e Índia
hello@codejtech.dev