bounce text | Notion

{characters.map((char, index) => ( {char === " " ? "\u00A0" : char} ))} ); } "> {characters.map((char, index) => ( {char === " " ? "\u00A0" : char} ))} ); } "> {characters.map((char, index) => ( {char === " " ? "\u00A0" : char} ))} ); } ">

import { motion } from "motion/react";

interface BounceTextProps {
  text: string;
  className?: string;
}

export default function BounceText({ text, className = "" }: BounceTextProps) {
  const characters = text.split("");

  return (
    <span className={`inline-block ${className}`}>
      {characters.map((char, index) => (
        <motion.span
          key={index}
          className="inline-block"
          whileHover={{ y: -3 }}
          transition={{
            type: "spring",
            stiffness: 400,
            damping: 10,
          }}
          style={{ display: "inline-block" }}
        >
          {char === " " ? "\\u00A0" : char}
        </motion.span>
      ))}
    </span>
  );
}