Ascii Swell

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type AsciiSwellProps = {  ramp?: string  invert?: boolean  direction?: SwellDirection  cellSize?: number  fontWeight?: number  fontFamily?: string  color?: string  speed?: number  tension?: number  scale?: number  intensity?: number  rippleForce?: number  rippleRadius?: number  interactive?: boolean  opacity?: number  label?: string  children?: ReactNode  className?: string}export function AsciiSwell({  ramp = ' .:-=+*#%@',  invert = false,  direction = 'right',  cellSize = 13,  fontWeight = 500,  fontFamily = 'ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',  color = 'currentColor',  speed = 1,  tension = 1,  scale = 1,  intensity = 1,  rippleForce = 1,  rippleRadius = 150,  interactive = true,  opacity = 1,  label,  children,  className,}: AsciiSwellProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}