Product switcher
A liquid switcher, content-agnostic. The sheet is not a panel next to the trigger — it is the same body of fluid: a bead swells out of the trigger's bottom edge, falls, necks, pinches off, and only then blooms into the sheet. The rows arrive last, at 78% expanded. You can also press and drag the pill off its rest — it stretches on the pulled axis and stays welded to the resting bead by a neck that thins as you go.
The material is Liquid Glass, after SwiftUI's glassEffect(): a lens, a tint and a specular rim, all clipped to one merged silhouette — so the pill and the sheet are literally one piece of glass rather than two that overlap. That merge is what GlassEffectContainer(spacing:) does natively.
Ported from bakai.me/lab "Gooey dropdown". Each case below is the same component — only props differ. The real header instance is pinned at the top of this page.
Light — the header configuration
theme='light', the Bilt product set from productLinks.
Dark band
theme='dark' — backdrop, tint and specular all flip; the merged silhouette is unchanged, so it is the same material reading against a dark band.
Over a photo
Where the material earns its keep — the photo is blurred and saturated THROUGH the sheet, and the pill is welded into the same piece of glass. Note the legibility cost on a busy image (see the caveat below).
Arbitrary content, long label, wider panel
The bead starts at the trigger's measured box, so a longer label buds a wider bead. panelWidth=360.
No tags, right-aligned
tag is optional per item; align='right' pins the sheet to the trigger's right edge — for a switcher living at the end of a bar.
Drag opted out
draggable={false} — the pill can't be pulled, but the bead drop still runs. Under prefers-reduced-motion the goo filter is dropped entirely and the sheet just appears.