Skip to main content
Back to discovery

Live preview recorded from Bakai Lab; experiment and demo by Bakai Tolondu uulu. Preview: platform recorded · rights authorized.

ComponentDemo Only

Gooey dropdown

A fluid plan selector whose dropdown stretches, merges, and settles with a gooey animated effect.

LSource LandLab - Bakai Tolondu uulu

Why it stands out

A fluid plan selector whose dropdown stretches, merges, and settles with a gooey animated effect.

Prompt

Build a dropdown whose menu opens like a drop of liquid falling out of its own trigger. The trigger is a 200px wide, 40px tall, radius-11 rectangle; the panel is 200px wide and 146px tall. Put the trigger's BODY and the menu panel inside ONE SVG goo filter (Gaussian blur stdDeviation 4.5, then a hard alpha threshold via a colour matrix) so the two read as a single body of water: the panel is torn off the trigger through a neck that thins and pinches, never slid out from behind it. Derive the grey outline (about #DFE2E8) from the MERGED silhouette by eroding the thresholded shape 1px and flooding the difference, so one continuous ring wraps the trigger, stretches down the neck, and closes around the panel, never drawn on either element. The trigger's visible fill and text sit opaque on top; the shadow rides a TWIN element OUTSIDE the filter, because a box-shadow fed through the goo would threshold into a hard black slab. Drive everything off ONE linear progress value p (0 closed, 1 open) and describe the panel by its two falling edges, not as a box that grows: the top edge peels from y 20 to 48 fast (an ease-out-quad over p/0.45) and stops, while the height fills from 12 to 146 (an ease-out-cubic over p) through the detach and past it, so at the moment the neck snaps the panel is already most of its body and still filling. Define height DIRECTLY, never as bottom-minus-top (two independent edges can cross and clamp the sheet to a thin line). No springs anywhere. Open in 190ms on cubic-bezier(0.23, 1, 0.32, 1); close about 20% faster (150ms) on a different, shorter curve (cubic-bezier(0.25, 0.46, 0.45, 0.94)), never the open reversed and never an ease-in. Fade each menu item in keyed to the panel's own growth, not the raw clock, so an item can never appear before the panel has grown to hold it.

Discovery vocabulary

Related by governed terms

Continue comparing

More from Lab - Bakai Tolondu uulu