Liquid & Organic · Behaves like water
Liquid indicator液态指示器
- connected
- viscous
- clever
The selected pill stretches as it travels, then settles, staying connected to where it came from — a drop of water being dragged. Beyond a smooth slide, it says this is one body of material moving.
When to use it
For switchers with three to five options: a tab bar, a segmented control, a toolbar. Avoid it with many options or with items of very different widths — the stretched moment covers the neighbouring label. It also needs a continuous surface; over a photo or a busy background the connection is lost and it just looks like a wobbling block of colour.
Parameters
width 62 → 96 → 62px · 320ms · spring-eased via goo filter · labels on an unfiltered layer
Recipe
Liquid indicator → width 62 → 96 @ 320ms
One sentence for your AI
Build a liquid indicator in three layers: the tab bar’s base at the bottom; a middle layer holding only the indicator pill, with an SVG goo filter over it (feGaussianBlur at standard deviation 9, then feColorMatrix multiplying alpha by 20 and subtracting 9); and the labels on top with no filter at all. Switching does not slide the pill across: it stretches and then settles, going 62px to 96px to 62px while travelling from the old position to the new one (320ms, cubic-bezier(0.32,0.72,0,1)), stretching in the direction of travel so the goo joins it into a liquid bridge that reads as being dragged. The labels must be a second, unfiltered layer or the goo blurs them too.