50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T1e40,'use client'; import * as React from 'react'; import { motion } from 'motion/react'; import { Slot } from '@radix-ui/react-slot'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const buttonVariants = cva( 'relative inline-flex items-center justify-center gap-2 font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 overflow-hidden [&_svg]:pointer-events-none', { variants: { variant: { default: 'bg-primary text-white hover:bg-primary/90', destructive: 'bg-red-600 text-white hover:bg-red-500', outline: 'border-2 border-gray-500 bg-transparent text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800', secondary: 'bg-gray-500 text-white hover:bg-gray-400', success: 'bg-green-600 text-white hover:bg-green-500', warning: 'bg-yellow-400 text-black hover:bg-yellow-300', info: 'bg-blue-600 text-white hover:bg-blue-500', gradient: 'bg-linear-to-r from-purple-600 to-pink-500 text-white', link: 'text-primary underline-offset-4 hover:underline bg-transparent shadow-none', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:gap-2', sm: 'h-8 rounded-md px-3 text-xs has-[>svg]:gap-1.5', lg: 'h-10 rounded-md px-8 has-[>svg]:gap-2.5', xl: 'h-24 px-20 text-2xl has-[>svg]:gap-3', icon: 'h-9 w-9', 'icon-sm': 'h-12 w-12', 'icon-lg': 'h-20 w-20', }, radius: { default: 'rounded-full', sm: 'rounded-lg', lg: 'rounded-4xl', none: 'rounded-none', }, }, defaultVariants: { variant: 'default', size: 'default', radius: 'default', }, }, ); interface VariantColorsType { fromBg: string; toBg: string; stroke?: string; } const variantColors: Record< NonNullable['variant']>, VariantColorsType > = { default: { fromBg: '#4a6b3f', toBg: '#d5e798', stroke: '#d5e798' }, destructive: { fromBg: '#dc2626', toBg: '#fca5a5', stroke: '#fca5a5' }, outline: { fromBg: 'transparent', toBg: 'transparent', stroke: 'currentColor', }, secondary: { fromBg: '#64748b', toBg: '#cbd5e1', stroke: '#cbd5e1' }, success: { fromBg: '#16a34a', toBg: '#86efac', stroke: '#86efac' }, warning: { fromBg: '#eab308', toBg: '#fde047', stroke: '#fde047' }, info: { fromBg: '#3b82f6', toBg: '#93c5fd', stroke: '#93c5fd' }, gradient: { fromBg: '#8b5cf6', toBg: '#ec4899', stroke: '#ec4899' }, link: { fromBg: 'transparent', toBg: 'transparent', stroke: 'currentColor' }, }; interface WavyTextProps { text: string; isHovered: boolean; className?: string; duration: number; delay: number; } const WavyText: React.FC = ({ text, isHovered, className = '', duration, delay, }) => { const chars = text.split(''); return ( {chars.map((char, index) => ( {char === ' ' ? '\u00A0' : char} ))} ); }; interface WavyButtonProps extends React.ButtonHTMLAttributes, VariantProps { children: React.ReactNode; animationDuration?: number; strokeWidth?: number; splitDelay?: number; asChild?: boolean; disableTextAnimation?: boolean; } const WavyButton = React.forwardRef( ( { className, variant = 'default', size, radius, children, animationDuration = 0.8, strokeWidth = 30, splitDelay = 0.04, asChild = false, disableTextAnimation = false, ...props }, ref, ) => { const [isHovered, setIsHovered] = React.useState(false); const timeoutRef = React.useRef | null>(null); const colors = variantColors[variant ?? 'default']; const Component: React.ElementType = asChild ? Slot : motion.button; const handleTouchStart = () => { setIsHovered(true); if (timeoutRef.current) { clearTimeout(timeoutRef.current); } timeoutRef.current = setTimeout(() => { setIsHovered(false); }, 2000); }; React.useEffect(() => { return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; }, []); return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onTouchStart={handleTouchStart} animate={ !asChild ? { backgroundColor: isHovered ? colors.toBg : colors.fromBg } : undefined } transition={ !asChild ? { duration: animationDuration, ease: [0.4, 0, 0.2, 1] } : undefined } {...props} >

{typeof children === 'string' && !disableTextAnimation ? ( ) : ( children )}

); }, ); WavyButton.displayName = 'WavyButton'; export default WavyButton; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","@radix-ui/react-slot",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}],["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","clsx",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://www.scrollxui.dev/registry/wavy-button.json","proxyUrl":"https://shadcnregistry.com/r/scrollxui/wavy-button","itemId":"@scrollxui/wavy-button"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"components/ui/wavy-button.tsx","content":"$53","type":"registry:ui"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","type":"registry:lib"}]}]]}],"$L54"]}]

Wavy Button

Installation

Files

components

lib

Styles