Ripple

"use client";

import {
  AnimatePresence,
  motion,
  type SpringOptions,
  useSpring,
} from "motion/react";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

const easePower4Out = (t: number) => 1 - (1 - t) ** 4;
const easeExpoOut = (t: number) => (t === 1 ? 1 : 1 - 2 ** (-10 * t));

interface RippleProps {
  className?: string;
  /** React ref or CSS selector string pointing to the parent element. */
  parent: React.RefObject<HTMLElement | null> | string;
  /**
   * Custom Spring configuration for the ripple animation.
   * @default { duration: 0.2, bounce: 0 }
   */
  springConfig?: SpringOptions;
}

const defaultSpringConfig: SpringOptions = { bounce: 0, duration: 0.2 };
const exitOvershoot = 0.2;

const isRef = (
  value: RippleProps["parent"]
): value is React.RefObject<HTMLElement | null> => typeof value !== "string";

const getExitTarget = ({
  cursorPosition,
  minEdge,
  maxEdge,
  axisSize,
  axisOffset,
  currentPosition,
}: {
  cursorPosition: number;
  minEdge: number;
  maxEdge: number;
  axisSize: number;
  axisOffset: number;
  currentPosition: number;
}) => {
  const extra = axisOffset * exitOvershoot;
  if (cursorPosition < minEdge) {
    return -axisOffset - extra;
  }
  if (cursorPosition > maxEdge) {
    return axisSize - axisOffset + extra;
  }
  return currentPosition;
};

function Ripple({
  parent,
  className,
  springConfig = defaultSpringConfig,
}: RippleProps) {
  const rippleRef = useRef<HTMLDivElement>(null);
  const [isHovered, setIsHovered] = useState(false);
  const x = useSpring(0, springConfig);
  const y = useSpring(0, springConfig);

  useEffect(() => {
    const element = isRef(parent)
      ? parent.current
      : document.querySelector<HTMLElement>(parent);
    if (!element) {
      return;
    }

    const handleMouseEnter = () => setIsHovered(true);
    const handleMouseLeave = (e: MouseEvent) => {
      const rect = element.getBoundingClientRect();
      if (!rippleRef.current) {
        return;
      }
      const offsetX = rippleRef.current.offsetWidth / 2;
      const offsetY = rippleRef.current.offsetHeight / 2;

      const xNew = e.clientX - rect.left - offsetX;
      const yNew = e.clientY - rect.top - offsetY;

      x.set(
        getExitTarget({
          axisOffset: offsetX,
          axisSize: rect.width,
          currentPosition: xNew,
          cursorPosition: e.clientX,
          maxEdge: rect.right,
          minEdge: rect.left,
        })
      );
      y.set(
        getExitTarget({
          axisOffset: offsetY,
          axisSize: rect.height,
          currentPosition: yNew,
          cursorPosition: e.clientY,
          maxEdge: rect.bottom,
          minEdge: rect.top,
        })
      );

      const unsub = x.on("animationComplete", () => {
        unsub();
        setIsHovered(false);
      });
    };

    const handleMouseMove = (event: MouseEvent) => {
      const rect = element.getBoundingClientRect();
      if (!rippleRef.current) {
        return;
      }
      const offsetX = rippleRef.current.offsetWidth / 2;
      const offsetY = rippleRef.current.offsetHeight / 2;

      x.set(event.clientX - rect.left - offsetX);
      y.set(event.clientY - rect.top - offsetY);
    };

    element.addEventListener("mouseenter", handleMouseEnter);
    element.addEventListener("mouseleave", handleMouseLeave);
    element.addEventListener("mousemove", handleMouseMove);

    return () => {
      element.removeEventListener("mouseenter", handleMouseEnter);
      element.removeEventListener("mouseleave", handleMouseLeave);
      element.removeEventListener("mousemove", handleMouseMove);
    };
  }, [parent, y.set, x.set, x.on]);
  return (
    <AnimatePresence>
      {isHovered ? (
        <motion.div
          animate={{
            scale: 1,
            transition: { delay: 0.01, duration: 0.4, ease: easePower4Out },
          }}
          aria-hidden="false"
          className={cn(
            "pointer-events-none absolute top-0 left-0 z-1 size-42 rounded-full",
            className
          )}
          exit={{ scale: 0, transition: { duration: 0.4, ease: easeExpoOut } }}
          initial={{ scale: 0 }}
          key="ripple"
          ref={rippleRef}
          style={{ x, y }}
        />
      ) : null}
    </AnimatePresence>
  );
}

export { Ripple };

import { Ripple } from "@/components/ripple";

<button id="myButton" className="relative overflow-hidden">
    <Ripple parent="#myButton" className="bg-white" />
    <span className="z-10">Click me</span>
</button>

const buttonRef = useRef<HTMLButtonElement>(null);

<button ref={buttonRef} className="relative overflow-hidden">
    <Ripple parent={buttonRef} className="bg-white" />
    <span className="z-10">Click me</span>
</button>

<Ripple parent={ref} className="bg-white" springConfig={{ damping: 30, stiffness: 200, mass: 0.2 }} />

<Ripple parent={ref} className="bg-white size-10 sm:size-20 md:size-32 lg:size-46" />

import { Button } from "@/components/ui/button";
import { Ripple } from "@/components/ripple";

const buttonRef = useRef<HTMLButtonElement>(null);

<Button ref={buttonRef} className="relative overflow-hidden group">
    <div className="z-20">
        Design System Button
    </div>
    <Ripple parent={buttonRef} className="bg-primary" />
</Button>