Gooey Button

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<GooeyButton />

Installation

npx shadcn@latest add https://webberui.com/r/gooey-button.json

Usage

import { GooeyButton } from "@/components/ui/gooey-button";

<GooeyButton onClick={() => save()}>Hover to see the liquid</GooeyButton>

<GooeyButton variant="danger">Delete project</GooeyButton>

Props

All other <button> attributes (onClick, disabled, aria-*, and so on) are forwarded directly.

How it works

• The goo filter: the liquid layer gets an SVG feGaussianBlur + feColorMatrix filter — blur first, then push up the alpha contrast, which fuses neighbouring circular droplets into one organic gooey shape. The filter id is generated with useId, so multiple buttons on the same page never contaminate each other
• Rest and welling up: at rest the droplets sink to the bottom of the button, showing only a sliver of an arc; on hover or keyboard focus-visible the liquid "wakes up" and wells up to cover the whole button, each droplet rising and falling on its own period to form a staggered surface
• Click splash: a cluster of droplets bursts out at the pressed coordinates, spreading and fading quickly, connected to the liquid surface through the same goo filter; when triggered from the keyboard (Enter / space bar) the splash comes from the button's center
• Press feedback: the whole button scales slightly on whileTap

Accessibility

• The liquid layer and the filter are both marked aria-hidden — decorative only, so they do not interfere with assistive technology; the text content sits on its own layer above, unaffected by the filter blur and staying crisply readable
• Full keyboard support: focus-visible wakes the liquid the same way, and Enter / space bar trigger a centered splash
• When the user has "reduce motion" enabled at the system level: the droplets' looping motion and the click splash are removed, and hovering only lifts the liquid surface statically with a single transition, with no back-and-forth animation
• The trigger is a <button> itself, so disabled, the focus-visible outline, keyboard operation, and other native semantics are all preserved