Droplets bud off the pill on hover and stay attached through a liquid goo filter, while a blob bulges out on the side nearest the cursor. A click splashes them outward before they flow back.
Whiteboards that think in layers
3,412 builders are already waiting
npx shadcn@latest add https://hyperblur.dev/r/button-goo.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-goo.tsx.
import { ButtonGoo } from "@/components/hyperblur/button-goo"
<ButtonGoo accent="#7c5cff">Join the beta</ButtonGoo>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Join the beta" | Button label. |
| accent | string | "#7c5cff" | Color of the pill and of every droplet. |
| blobs | number | 7 | Number of droplets around the pill, from 0 to 14. |
| size | "sm" | "md" | "lg" | "md" | Font size preset; padding and every inner part scale with it. |