{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"wavy-button","type":"registry:ui","title":"Wavy Button","description":"Liquid sloshes at the bottom and rises in a rolling SVG wave to fill the button on hover.","dependencies":[],"registryDependencies":[],"files":[{"path":"registry/ui/wavy-button.tsx","type":"registry:ui","content":"\"use client\";\n\nimport type { ButtonHTMLAttributes, CSSProperties } from \"react\";\n\nexport interface WavyButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Seconds per wave cycle. */\n  speed?: number;\n  /** Liquid level at rest, % of the button height. */\n  restLevel?: number;\n}\n\nconst css = `@keyframes wavy-button-flow{to{transform:translateX(-50%)}}`;\n// Two full wave periods across a 100-wide box, so shifting by half loops seamlessly.\nconst wave = \"M0 6Q12.5 0 25 6T50 6T75 6T100 6V12H0Z\";\nconst waveCls = \"absolute bottom-[calc(100%-1px)] left-0 w-[200%] motion-reduce:[animation:none]\";\n\nexport function WavyButton({ speed = 2.4, restLevel = 14, className, style, children, ...props }: WavyButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={`group relative isolate inline-flex h-12 items-center justify-center overflow-hidden rounded-full border border-primary/50 bg-card px-8 text-sm font-semibold text-foreground transition-[color,scale,border-color] duration-500 focus-visible:text-primary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring enabled:hover:border-primary enabled:hover:text-primary-foreground enabled:hover:delay-150 enabled:active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-50 ${className ?? \"\"}`}\n      style={{ \"--wb-rest\": `${100 - restLevel}%`, ...style } as CSSProperties}\n    >\n      <style href=\"wavy-button\" precedence=\"default\">\n        {css}\n      </style>\n      <span\n        aria-hidden\n        className=\"absolute inset-0 -z-10 translate-y-(--wb-rest) transition-[translate] duration-900 ease-[cubic-bezier(.25,.9,.3,1)] group-focus-visible:translate-y-0 group-enabled:group-hover:translate-y-0 motion-reduce:transition-none\"\n      >\n        <svg\n          viewBox=\"0 0 100 12\"\n          preserveAspectRatio=\"none\"\n          className={`${waveCls} h-3.5 text-primary/40 [animation:wavy-button-flow_1s_linear_infinite_reverse]`}\n          style={{ animationDuration: `${speed * 1.6}s` }}\n        >\n          <path d={wave} fill=\"currentColor\" />\n        </svg>\n        <svg\n          viewBox=\"0 0 100 12\"\n          preserveAspectRatio=\"none\"\n          className={`${waveCls} h-2.5 text-primary [animation:wavy-button-flow_1s_linear_infinite]`}\n          style={{ animationDuration: `${speed}s` }}\n        >\n          <path d={wave} fill=\"currentColor\" />\n        </svg>\n        <span className=\"absolute inset-0 bg-primary\" />\n      </span>\n      {children}\n    </button>\n  );\n}\n"}]}