Buttons

Four independent animated buttons: letter lift, flowing liquid fill, magnetic cursor pull, and cursor-driven dent deformation — all using the same fixed geometry with no layout resizing.

Preview

Staggered Letter Lift

Single Liquid Bubble

Magnetic

Cursor Compression

Installation

Install the component using the CLI.

npx shadcn@latest add https://shreyashtech.me/r/buttons.json

Usage

Import the component:

import ButtonsShowcase, { AnimatedButton } from "@/components/buttons"

Use it in your code:

<AnimatedButton variant="magnetic" />

Props

Property	Type	Default	Description
variant	"letters" \| "liquid" \| "magnetic" \| "compression"	-	Which single interaction to render.
label	string	"Book a call"	Button text.
onClick	function	-	Called on click/activation.
theme	"light" \| "dark" \| "system"	system	Color theme for the button surface, text, and effects.
className	string	-	Extra classes applied to the outermost element.