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