Overview
Liquid Button uses an SVGfeColorMatrix goo filter combined with Framer Motion springs to produce drops that physically follow the cursor. An optional continuous dripping mode keeps the animation running without hover interaction.
Installation
components/rareui/LiquidButton.tsx.
Usage
Props
string
default:"Hover me"
The text displayed inside the button.
string
Additional Tailwind classes applied to the outer container
div.string
default:"bg-black dark:bg-white"
Tailwind class controlling the background color of both the button and the liquid drops.
string
default:"text-white dark:text-black"
Tailwind class controlling the button label color.
boolean
default:"false"
When
true, liquid drops animate continuously without requiring a hover interaction.Examples
Custom colors
Continuous dripping mode
Custom container width
Features
Liquid physics
Realistic dripping effect using an SVG
feColorMatrix goo filter and Framer Motion.Cursor-reactive drops
Each drop independently follows the mouse position via spring-based motion values.
Customizable colors
Button background and text color are fully configurable via Tailwind class props.
Continuous dripping mode
The
isDripping prop enables attention-grabbing perpetual drip animations.Responsive sizing
Drop sizes scale between mobile and desktop breakpoints using Tailwind responsive prefixes.
Dark mode support
Default colors adapt automatically with
dark: Tailwind variants.