"use client";

import { motion } from "framer-motion";

const LABEL = "Hover me carefully";

export function LetterSwapButton() {
  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <motion.button
        type="button"
        whileHover="hover"
        className="px-6 py-3 border border-[#111111] bg-[#FAFAF8] text-[#111111] text-[14px] font-medium overflow-hidden rounded-md"
      >
        <span className="inline-flex">
          {LABEL.split("").map((c, i) => (
            <motion.span
              key={i}
              className="relative inline-block"
              style={{ overflow: "hidden", height: "1.2em" }}
            >
              <motion.span
                variants={{
                  hover: { y: "-100%" },
                }}
                initial={{ y: 0 }}
                transition={{ duration: 0.3, delay: i * 0.02, ease: "easeInOut" }}
                className="block"
              >
                {c === " " ? " " : c}
              </motion.span>
              <motion.span
                variants={{
                  hover: { y: "-100%" },
                }}
                initial={{ y: 0 }}
                transition={{ duration: 0.3, delay: i * 0.02, ease: "easeInOut" }}
                className="absolute left-0 top-full block"
              >
                {c === " " ? " " : c}
              </motion.span>
            </motion.span>
          ))}
        </span>
      </motion.button>
    </div>
  );
}
Letter Swap Button

Dependencies
