Slosh Button

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type SloshButtonProps = {  waterColor?: string  fill?: number  waterOpacity?: number  tint?: string  frost?: number  blur?: number  borderColor?: string  borderWidth?: number  shadow?: string  pressScale?: number  splash?: number  spray?: number  viscosity?: number  meniscus?: number  ref?: Ref<HTMLButtonElement>  className?: string}export function SloshButton({  waterColor = 'var(--primary)',  fill = 0.3,  waterOpacity = 0.85,  tint = 'color-mix(in oklab, currentColor 6%, transparent)',  frost = 0.5,  blur = 10,  borderColor = 'color-mix(in oklab, currentColor 18%, transparent)',  borderWidth = 1,  shadow = '0 10px 30px -12px color-mix(in oklab, currentColor 35%, transparent)',  pressScale = 0.97,  splash = 1,  spray = 1,  viscosity = 0.4,  meniscus = 3,  ref,  className,}: SloshButtonProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}