Liquid gooey
A React component in Beamline's Motion & effects category.
Liquid surfaces that merge like goo when they touch — split plus-menus, gooey switches, file chips.
Use it for
- One playful control per screen where things detach and rejoin.
Not for
- Data, dense UI, or anything read repeatedly.
Anatomy
- LiquidGooey (filter surface)
- LiquidGooey.Item
Variants
- effect: morph, move, bend, melt
States
- merged
- split
Keyboard
- Items keep their own controls; hidden items get tabIndex -1.
Motion
Plain mirrored x/y/scale transitions respect scope speed and settle immediately under managed/OS reduction or offscreen. Explicit Item transition and delay remain tuning inputs. Advanced physics modes retain upstream timing and lifecycle limitations.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
style / ref | CSSProperties / native Ref | — | native group div; Item does not expose ref |
Dependencies
liquid-gooey
Import
import { LiquidGooey } from "@/components/liquid-gooey/liquid-gooey";Get it
Liquid gooey is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Motion & effects
- Glow: Ambient light around one element that says something is happening: an aurora under a working composer, or a ring of light round a live card.
- Halftone Dots: A picture rebuilt as a field of dots whose size follows brightness; a new picture morphs the dots, a click ripples through, the pointer pushes dots aside.
- Light band: A slow band of split light in the dark behind a section, blue at one end and amber at the other with a bright core: Prism's light at a chosen place, a…
- Sound: Interface sounds named by interaction class (tap, select, toggle, open/close, tick, success, error) through one provider; off by default.