'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
EffectsAlea Pro
Gooey
Shapes that merge like liquid: a pill switcher whose selection flows to the next item, a button whose actions drip out of it, and the filter for your own shapes.
import { GooeyNav, GooeyMenu, Gooey } from '@alea/pro';
Examples
Gooey nav
The selection flows to the next item like a drop of liquid. A radio group underneath: arrows move it.
Gooey menu
Actions drip out of the button. Escape closes it and returns focus.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-chip-bg…--alea-chip-text…--alea-focus…--alea-surface-deep…--alea-text…--alea-text-muted…
Space
--alea-space-4…
Type
--alea-font-size-md…--alea-font-weight-medium…
Motion
--alea-motion-duration-fast…--alea-motion-duration-slow…--alea-motion-duration-slower…--alea-motion-ease-emphasized…--alea-motion-ease-out…
Props
Gooey props
Wraps shapes so they merge like liquid when they touch. Put only shapes inside; keep text in a layer above.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | |
className | string | - | |
strength | number | 10 | |
style | CSSProperties | - |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
GooeyNav
- States
- HoverSelectedKeyboard focus
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-gooey-nav.alea-gooey-nav-blobs.alea-gooey-nav-blob.alea-gooey-nav-items.alea-gooey-nav-item- Data attributes
data-trail
GooeyMenu
- Variants
directionleftrightupdown- States
- Open
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-gooey-menu.alea-gooey-menu-blobs.alea-gooey-menu-blob.alea-gooey-menu-actions.alea-gooey-menu-action.alea-gooey-menu-main- Data attributes
data-main
Gooey
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-gooey
Accessibility
- GooeyNav is a radio group: arrows move the selection, the blobs are decoration hidden from screen readers.
- GooeyMenu's button says whether it is expanded; each action has a name; Escape closes it and returns focus.
- Text stays outside the filter, so it is always sharp.
Keyboard
| Key | Does |
|---|---|
| Arrow keys | GooeyNav: move the selection |
| Enter or Space | GooeyMenu: open, close or run an action |
| Escape | GooeyMenu: close and return focus |
Do and don't
Do
- Use it where the merge explains something: a selection moving, actions coming out of one button.
Don't
- Don't put text or icons inside Gooey; the filter blurs them.