Wavy Button

Interactive wavybutton with animated text and customizable styles for modern uis.

Installation

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

import WavyButton from "@/components/ui/wavy-button";

<WavyButton variant="outline">
  Button
 </WavyButton>

Interactive wavybutton with animated text and customizable styles for modern uis.

Property	Type	Default	Description
`variant`	string	`default`	Visual style of the button (default, destructive, outline, etc.)
`size`	string	`default`	Button size (sm, default, lg, xl, icon, icon-sm, icon-lg)
`radius`	string	`default`	Border radius (none, sm, default, lg)
`children`	ReactNode	`—`	Button content: text or icons
`animationDuration`	number	`0.8`	Duration of the wave animation in seconds
`strokeWidth`	number	`30`	Thickness of the wave stroke
`splitDelay`	number	`0.04`	Delay between each character animation
`disableTextAnimation`	boolean		Disables the wavy text effect if true
`className`	string	`—`	Custom CSS classes for styling
`...props`	button props	`—`	Supports standard button attributes and events