GOLE: drag a drop to the can to change the flavor
GSAPScrollTriggerLenis
[ 2026 ]

A product site for a fictional sparkling water, with four flavors. In the hero, the flavor selectors are liquid drops around the can: drag one onto the can and it gets absorbed — the can pulses and the flavor changes. As you scroll, a wave of liquid texture rises from the base and floods the screen with the next flavor's color, swapping the can and caption underneath before it recedes. Bold, modern, no serifs.
What it explores
- The drop as a selector — the liquid blobs around the can are the flavors; drag one onto the can and it gets absorbed (it pulses and switches); drop it far away and it returns.
- Background blobs that react independently to the cursor, the drag and the scroll velocity (distance falloff), instead of a rigid container pan.
- A second section where scrolling makes a wave of liquid texture (SVG + turbulence) flood the screen with the next flavor's color and swap the can and caption underneath.
- Giant kinetic type and an RGB split on the can at each chapter change; color and background tone-on-tone per flavor. No WebGL.
States
[ Natural ] gray — just the bubble, nothing else
[ Pear & Basil ] green — the most delicate
[ Tangerine & Pink Salt ] coral — round and less acidic
[ Raspberry & Hibiscus ] rosé — the boldest