Gooey Toggle
A switch whose knob is liquid: it stretches, drips and merges like mercury.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Three blobs move with different easings and delays; an SVG goo filter (blur + alpha threshold) fuses them into one liquid shape while they travel.
Installation
$ npx shadcn@latest add https://guetix.com/r/gooey-toggle.json
Uses the shadcn CLI. It creates components/guetix/gooey-toggle.tsx and installs nothing else.
Usage
example.tsx
import { GooeyToggle } from "@/components/guetix/gooey-toggle";
export default function Example() {
return <GooeyToggle />;
}
SettingsTheme switchFeature flags
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01The goo filter is feGaussianBlur + an feColorMatrix alpha threshold.
- 02Staggered easings on three blobs create the stretch-and-split.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked / defaultChecked | boolean | — | State. |
| onChange | (checked) => void | — | Change handler. |
| label | string | "Liquid mode" | Visible + accessible label. |
| color | string | "#4ade80" | On color. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- role=switch with aria-checked; keyboard via native button.