voltar para o lab
[ Estudo de site de produto e interação ]

GOLE: puxe uma gota até a lata pra trocar o sabor

GSAPScrollTriggerLenis

[ 2026 ]

GOLE

Site de produto de uma água com gás fictícia, com quatro sabores. No hero, os seletores de sabor são gotas líquidas ao redor da lata: puxe uma até a lata e ela é absorvida — a lata pulsa e troca de sabor. Rolando, uma onda de textura líquida sobe da base e inunda a tela com a cor do próximo sabor, trocando lata e legenda por baixo antes de recuar. Bold, moderno, sem serifa.

O que explora

  • A gota como seletor — os blobs líquidos ao redor da lata são os sabores; arraste um até a lata e ele é absorvido (ela pulsa e troca); solte longe e ele volta.
  • Blobs de fundo que reagem de forma independente ao cursor, ao arrasto e à velocidade do scroll (falloff por distância), sem pan rígido do container.
  • Uma segunda seção onde rolar faz uma onda de textura líquida (SVG + turbulência) inundar a tela com a cor do próximo sabor e trocar lata e legenda por baixo.
  • Tipografia cinética gigante e RGB split na lata a cada troca de capítulo; cor e fundo em tom sobre tom por sabor. Sem WebGL.

Estados

[ Natural ] cinza — só a bolha, sem mais nada
[ Pera & Manjericão ] verde — o mais delicado
[ Tangerina & Sal Rosa ] coral — redondo e menos ácido
[ Framboesa & Hibisco ] rosé — o mais marcante
[ abrir experimento → ]