Wave Text

import { cn } from "@/lib/utils";

export interface WaveTextProps {
  text?: string;
  /** Wave constantly, or only on hover/focus of the element or a parent .group. */
  trigger?: "always" | "hover";
  as?: "h1" | "h2" | "h3" | "p" | "span";
  className?: string;
}

/** Bouncy text: letters hop one after another in a wave, constantly or on hover. Screen readers read the word normally. Pure CSS. */
export function WaveText({ text = "Hooray!", trigger = "hover", as: Tag = "span", className }: WaveTextProps) {
  return (
    <Tag className={cn("sf-wave-text inline-block font-da-display font-extrabold", trigger === "always" && "is-always", className)} aria-label={text}>
      {Array.from(text).map((ch, i) => (
        <span key={i} aria-hidden className="sf-wave-letter inline-block" style={{ animationDelay: `${i * 60}ms` }}>
          {ch === " " ? " " : ch}
        </span>
      ))}
      <style href="sf-wave-text" precedence="default">{`
        @keyframes sf-wave-letter { 0%, 60%, 100% { translate: 0 0 } 30% { translate: 0 -0.3em } }
        .sf-wave-text.is-always .sf-wave-letter,
        .sf-wave-text:hover .sf-wave-letter,
        .group:hover .sf-wave-text .sf-wave-letter,
        .group:focus-visible .sf-wave-text .sf-wave-letter { animation: sf-wave-letter 1s ease-in-out infinite }
        @media (prefers-reduced-motion: reduce) { .sf-wave-letter { animation: none !important } }
      `}</style>
    </Tag>
  );
}

export default WaveText;