animate-text

import * as motion from "motion/react-client";
import { Variants, Variant } from "motion/react";
import { cn } from "@/lib/tailwind";

interface AnimateTextVariantsProps {
    text: string[];
    className?: string;
    childClassName?: string;
    initial: Variant;
    animate: Variant;
}

export function AnimateTextVariants({
                                        text,
                                        className,
                                        childClassName,
                                        initial,
                                        animate
                                    }: AnimateTextVariantsProps) {

    const container: Variants = {
        invisible: {
            opacity: 0,
        },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.02
            }
        }
    }

    const item: Variants = {
        invisible: {
            opacity: 0,
            ...initial,
        },
        visible: {
            opacity: 1,
            ...animate,
        }
    }

    return (
        <motion.ul className={ cn(className) }
                   variants={ container }
                   initial="invisible"
                   animate="visible">
            {
                text.map((text, index) => (
                    <motion.li key={ index }
                               variants={ item }>
                        <span className={ cn(childClassName) }>{ text }</span>
                    </motion.li>
                ))
            }
        </motion.ul>
    )
}

import { AnimateTextVariants } from "@/examples/animate-text/animate-text-variants";
import { React } from "@/components/ui/router/page/logo/react";

export default function Page() {
    return (
        <div className="space-y-10">

            <div className="bg-black py-10">
                <AnimateTextVariants text={ [ "e", "x", "a", "m", "p", "l", "e" ] }
                                     initial={ { y: -20 } }
                                     animate={ { y: 0 } }
                                     className="flex justify-center items-center gap-x-2"
                                     childClassName="text-4xl md:text-6xl lg:text-8xl duration-300 text-white"/>
            </div>

            <div className="bg-black py-10">
                <AnimateTextVariants text={ [ "e", "x", "a", "m", "p", "l", "e" ] }
                                     initial={ { filter: "blur(6px)" } }
                                     animate={ { filter: "blur(0px)" } }
                                     className="flex justify-center items-center gap-x-2"
                                     childClassName="text-4xl md:text-6xl lg:text-8xl duration-300 text-white"/>
            </div>

            <div className="bg-black py-10">
                <AnimateTextVariants text={ [ "e", "x", "a", "m", "p", "l", "e" ] }
                                     initial={ { rotate: -30 } }
                                     animate={ { rotate: 0 } }
                                     className="flex justify-center items-center gap-x-2"
                                     childClassName="text-4xl md:text-6xl lg:text-8xl duration-300 text-white"/>
            </div>

        </div>
    )
}