Text Roll Link

"use client";
 
import React from "react";
import { motion } from "framer-motion";
 
type Props = {
  children: string;
  duration?: number;
  stagger?: number;
};
 
/**
 * TextRoll component.
 *
 * A component that renders a text roll effect.
 *
 * @param {string} props.children - The text content to display.
 * @param {number} [props.duration=0.25] - The duration of the animation in seconds.
 * @param {number} [props.stagger=0.025] - The delay between each character's animation in seconds.
 */
export const TextRoll = ({
  children,
  duration = 0.3,
  stagger = 0.03,
}: Props) => {
  return (
    <motion.div
      initial="initial"
      whileHover="hovered"
      className="relative overflow-hidden text-2xl font-black uppercase sm:text-3xl md:text-4xl lg:text-5xl"
    >
      <div>
        {children.split("").map((l, i) => (
          <motion.span
            variants={{
              initial: {
                y: 0,
              },
              hovered: {
                y: "-100%",
              },
            }}
            transition={{
              duration,
              ease: "easeInOut",
              delay: stagger * i,
            }}
            className="inline-block"
            key={i}
          >
            {l}
          </motion.span>
        ))}
      </div>
      <div className="absolute inset-0">
        {children.split("").map((l, i) => (
          <motion.span
            variants={{
              initial: {
                y: "100%",
              },
              hovered: {
                y: 0,
              },
            }}
            transition={{
              duration,
              ease: "easeInOut",
              delay: stagger * i,
            }}
            className="inline-block"
            key={i}
          >
            {l}
          </motion.span>
        ))}
      </div>
    </motion.div>
  );
};