# Liquid divider (goodtabs UI)

A boundary between two sections, drawn as a slow liquid edge on a theme token.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/liquid-divider.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/liquid-divider`

## Usage

```tsx
import { LiquidDivider } from "@/components/ui/liquid-divider"

<LiquidDivider fill="card" height={128} />
<section className="bg-card">...</section>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| fill | `"card" | "muted"` | `"card"` | The token under the edge. Give the next section the same background. |
| height | `number` | `96` | Height of the band the edge moves in, in CSS pixels. |
| speed | `number` | `1` | Multiplies the speed of the swell. |

## When to use

- Between a hero and the section under it, when a straight line feels too hard
- Once or twice on a marketing page, as a change of surface
- When the next section already sits on the card or muted token

## When not to use

- Inside app chrome or between list groups: use a hairline
- Between every section, because the effect only works as an exception
- On a coloured or image section, since the fill has to match a token

## Notes for agents

- The next section must use bg-card or bg-muted to match the fill prop, or a seam shows at the bottom of the band
- Above the edge the band shows bg-background. Pass a className such as bg-muted when the section above sits on another token
- It is a server component and decorative, so the whole band is aria-hidden. It installs components/ui/shader-canvas.tsx, which pauses off screen and follows the theme
- Under reduced motion it draws one still curve, and without WebGL an SVG curve in the same token shows. No GSAP is involved here

## The maths

- The edge stays inside the band: 0.5 + 0.21 + 0.12 + 0.04 = 0.87 at most and 0.13 at least, so the fill always reaches the bottom.
- The hairline keeps a 1px width on any slope because vertical distance is divided by sqrt(1 + slope²), the length of the gradient.
- The three sine rates 1.9, 3.1 and 5.3 share no small common factor, so crests do not line up in any window a reader will watch.

Docs: https://ui.goodtabs.co/components/liquid-divider