Design AtlasThe same SVG gooey filter (feGaussianBlur + feColorMatrix) from liquid button applies to the whole menu. The difference is that instead of one circle, the filter group holds the main button plus one circle per sub-item — while closed, every sub-item sits at the same position as the main button (distance 0), so the filter melds them into one blob; the moment the menu opens, each item translates out to its own target angle and distance, and as that distance grows the gooey "bridge" effect fades away, reading as droplets pinching off naturally.
Each item's target position comes from a semicircular or full-circle layout — item i's angle is (total spread angle / (item count − 1)) × i, and its position is translate(cos(angle) × radius, sin(angle) × radius). Shrinking scale slightly (around 0.9) as it moves away from the main button reinforces the sense of "a droplet that just formed."
Text can render blurry inside a gooey-filtered region, so icons and labels usually sit on a separate layer outside the filter group, stacked on top of the filtered background shapes with z-index.
When to use
Use it for short menus — three to five items — on a mobile FAB, when you want a branded opening flourish. Not a fit for menus with many items (six or more) or long text labels — the gooey filter's blur hurts readability.