Mode
Theme
Language
PTEN
← LabExperiment 2 of 4

Lab

GOLE

Drag a drop to the can to change the flavor

Intent
A study in product site and interaction
Tools
GSAPScrollTriggerLenis
See it live ↗
GOLE

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
back to the lab
A study in product site and interaction

GOLE: Drag a drop to the can to change the flavor

GSAPScrollTriggerLenis
GOLE

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
open experiment →

Built by a design lead who still likes to code.

more about me →