Wavy Button

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

Installation

npx shadcn@latest add @scrollxui/wavy-button

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