HoverBloom

import type { ReactNode } from "react";

type HoverBloomProps = {
  children: ReactNode;
  className?: string;
  /** The two colours of the glow. */
  colors?: [string, string];
};

/* HoverBloom: a soft two-colour glow blooms out behind the card and the card lifts. */
export function HoverBloom({
  children,
  className = "rounded-2xl border border-white/10 bg-[#121020] p-6 text-white",
  colors = ["#a78bfa", "#38bdf8"],
}: HoverBloomProps) {
  return (
    <div className="group relative isolate">
      <span
        aria-hidden
        className="pointer-events-none absolute -inset-4 -z-10 scale-75 rounded-[2rem] opacity-0 blur-2xl transition duration-500 ease-out group-hover:scale-100 group-hover:opacity-70 group-focus-within:scale-100 group-focus-within:opacity-70 motion-reduce:transition-none"
        style={{
          background: `radial-gradient(circle at 25% 30%, ${colors[0]}, transparent 60%), radial-gradient(circle at 75% 70%, ${colors[1]}, transparent 60%)`,
        }}
      />
      <div
        className={`relative transition-transform duration-500 ease-out group-hover:-translate-y-1 group-focus-within:-translate-y-1 motion-reduce:transition-none ${className}`}
      >
        {children}
      </div>
    </div>
  );
}