Skip to main content

​
Overview

Liquid Button uses an SVG feColorMatrix 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

npx rareui@latest add liquid-button
Or copy the component source manually into components/rareui/LiquidButton.tsx.

​
Usage

import LiquidButton from '@/components/rareui/LiquidButton';

export default function App() {
  return (
    <LiquidButton text="Hover me" />
  );
}

​
Props

​
text
string
default:"Hover me"
The text displayed inside the button.
​
className
string
Additional Tailwind classes applied to the outer container div.
​
backgroundColor
string
default:"bg-black dark:bg-white"
Tailwind class controlling the background color of both the button and the liquid drops.
​
textColor
string
default:"text-white dark:text-black"
Tailwind class controlling the button label color.
​
isDripping
boolean
default:"false"
When true, liquid drops animate continuously without requiring a hover interaction.

​
Examples

​
Custom colors

<LiquidButton
  text="Click me"
  backgroundColor="bg-blue-600"
  textColor="text-white"
/>

​
Continuous dripping mode

<LiquidButton
  text="Always Dripping"
  isDripping={true}
/>

​
Custom container width

<LiquidButton
  text="Wide"
  className="w-64"
  backgroundColor="bg-violet-600"
  textColor="text-white"
/>

​
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us