GravityButton

"use client";

import { useState } from "react";
import { motion, useReducedMotion } from "motion/react";

type GravityButtonProps = {
  /** Button label. Plain text, because each letter moves on its own. */
  children: string;
  className?: string;
  onClick?: () => void;
  /** How high each letter jumps, in pixels. */
  height?: number;
  /** Seconds between one letter and the next. */
  stagger?: number;
};

/* GravityButton: on hover each letter jumps, falls back under gravity and lands with a small bounce, one after another. */
export function GravityButton({
  children,
  className = "rounded-full bg-[#a78bfa] px-9 py-4 text-[15px] font-medium text-[#1a1530]",
  onClick,
  height = 10,
  stagger = 0.03,
}: GravityButtonProps) {
  const reduce = useReducedMotion();
  const [hop, setHop] = useState(0);
  const jump = () => {
    if (!reduce) setHop((h) => h + 1);
  };

  return (
    <button type="button" onClick={onClick} onPointerEnter={jump} onFocus={jump} aria-label={children} className={className}>
      <span aria-hidden className="inline-flex">
        {[...children].map((ch, i) => (
          <motion.span
            // A new key per hop restarts the jump.
            key={`${hop}-${i}`}
            className="inline-block whitespace-pre"
            initial={false}
            animate={hop ? { y: [0, -height, 0, -height * 0.3, 0] } : undefined}
            transition={{ duration: 0.6, times: [0, 0.35, 0.65, 0.82, 1], ease: ["easeOut", "easeIn", "easeOut", "easeIn"], delay: i * stagger }}
          >
            {ch}
          </motion.span>
        ))}
      </span>
    </button>
  );
}