Liquid Button

Installation

pnpm dlx shadcn@latest add @clover-ui/liquid-button

Usage

import { LiquidButton } from "@/components/liquid-button";

<LiquidButton element="lava">Get started</LiquidButton>

A button filled with one of five elements, drawn live by a small WebGL shader:

• Lava: molten red lava that swirls in bright red, crimson and near-black.
• Ocean: shimmering underwater light that ripples across deep blue.
• Stone: slow layers of brown rock with a fine grain, drifting sideways.
• Sky: soft steel-blue wisps that sweep past like wind.
• Obsidian: glossy black glass with slow silver sheens rolling across it.

Hover or focus it and the element flows faster. Click it and it presses in. Each element sets its own text and focus ring color. A matching gradient shows right away and the live effect fades in on top, so nothing pops in while it loads. With reduced motion on, the effect is drawn once and stays still. If WebGL isn't available, the gradient stays.

Use asChild to render a link instead of a button:

<LiquidButton element="ocean" asChild>
  <a href="/docs">Read the docs</a>
</LiquidButton>

Pass three hex colors to colors, from brightest to darkest, to recolor an element while keeping its motion.

Props