# Liquid gooey

A React component in [Beamline](https://beamline.io/)'s [Motion & effects](https://beamline.io/components/effects) category. Live demo: https://beamline.io/components/liquid-gooey

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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Motion & effects

- [Glow](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/sound): Interface sounds named by interaction class (tap, select, toggle, open/close, tick, success, error) through one provider; off by default.