Flip Text

"use client";

import { useEffect, useRef } from "react";
import { motion, useInView, useAnimation, type Variants } from "framer-motion";

interface FlipTextProps {
    text: string;
    className?: string;
    /** Delay per character in seconds. Default: 0.05 */
    charDelay?: number;
    /** Duration per character flip in seconds. Default: 0.5 */
    duration?: number;
}

const charVariants: Variants = {
    hidden: { rotateX: -90, opacity: 0 },
    visible: { rotateX: 0, opacity: 1 },
};

export function FlipText({
    text,
    className = "",
    charDelay = 0.05,
    duration = 0.5,
}: FlipTextProps) {
    const ref = useRef<HTMLHeadingElement>(null);
    const inView = useInView(ref, { once: true });
    const controls = useAnimation();

    useEffect(() => {
        if (inView) controls.start("visible");
    }, [inView, controls]);

    return (
        <h2
            ref={ref}
            className={`inline-flex perspective-[400px] ${className}`}
            aria-label={text}
        >
            {text.split("").map((char, i) => (
                <motion.span
                    key={i}
                    variants={charVariants}
                    initial="hidden"
                    animate={controls}
                    transition={{
                        delay: i * charDelay,
                        duration,
                        ease: [0.16, 1, 0.3, 1],
                    }}
                    className="inline-block origin-top [transform-style:preserve-3d]"
                    style={{ transformOrigin: "top center" }}
                >
                    {char === " " ? "\u00A0" : char}
                </motion.span>
            ))}
        </h2>
    );
}