Morphy Button

Morphing button with dynamic dot motion, reversible animation.

Installation

npx shadcn@latest add @scrollxui/morphy-button

import { MorphyButton } from '@/components/ui/morphy-button';

<MorphyButton size='lg'>Get Started</MorphyButton>

Morphing button with dynamic dot motion, reversible animation.

Property	Type	Default	Description
`size`	"sm" \| "default" \| "lg"	`"default"`	Controls button size and padding layout.
`asChild`	boolean	`false`	Renders as a child element using Radix Slot if true.
`dotClassName`	string	`—`	Adds custom styling to the animated dot element.
`animate`	"normal" \| "reverse"	`"normal"`	Reverses morph animation direction when set to 'reverse'.
`className`	string	`—`	Custom Tailwind or CSS classes for additional styling.
`children`	ReactNode	`—`	Button label or nested elements.
`...props`	button props	`—`	Inherits all native HTML button attributes and events.