Morphy Button

Morphing button with dynamic dot motion, reversible animation.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/morphy-button.json

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.