@arolariu/components/dist/components/ui/typewriter.js

🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utilities.js";
import { motion, stagger, useAnimate, useInView } from "motion/react";
import { useEffect } from "react";
const TypewriterText = ({ words, className, cursorClassName })=>{
    const wordsArray = words.map((word)=>({
            ...word,
            text: [
                ...word.text
            ]
        }));
    const [scope, animate] = useAnimate();
    const isInView = useInView(scope);
    useEffect(()=>{
        if (isInView) animate("span", {
            display: "inline-block",
            opacity: 1,
            width: "fit-content"
        }, {
            duration: 0.3,
            delay: stagger(0.1),
            ease: "easeInOut"
        });
    }, [
        isInView
    ]);
    const renderWords = ()=>/*#__PURE__*/ jsx(motion.div, {
            ref: scope,
            className: "inline",
            children: wordsArray.map((word, idx)=>/*#__PURE__*/ jsxs("div", {
                    className: "inline-block",
                    children: [
                        word.text.map((char, index)=>/*#__PURE__*/ jsx(motion.span, {
                                initial: {},
                                className: cn("hidden text-black opacity-0 dark:text-white", word.className),
                                children: char
                            }, `char-${index}`)),
                        "\xa0"
                    ]
                }, `word-${idx}`))
        });
    return /*#__PURE__*/ jsxs("div", {
        className: cn("text-center text-base font-bold sm:text-xl md:text-3xl lg:text-5xl", className),
        children: [
            renderWords(),
            /*#__PURE__*/ jsx(motion.span, {
                initial: {
                    opacity: 0
                },
                animate: {
                    opacity: 1
                },
                transition: {
                    duration: 0.8,
                    repeat: 1 / 0,
                    repeatType: "reverse"
                },
                className: cn("inline-block h-4 w-[4px] rounded-sm bg-blue-500 md:h-6 lg:h-10", cursorClassName)
            })
        ]
    });
};
const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
    const wordsArray = words.map((word)=>({
            ...word,
            text: [
                ...word.text
            ]
        }));
    const renderWords = ()=>/*#__PURE__*/ jsx("div", {
            children: wordsArray.map((word, idx)=>/*#__PURE__*/ jsxs("div", {
                    className: "inline-block",
                    children: [
                        word.text.map((char, index)=>/*#__PURE__*/ jsx("span", {
                                className: cn("text-black dark:text-white", word.className),
                                children: char
                            }, `char-${index}`)),
                        "\xa0"
                    ]
                }, `word-${idx}`))
        });
    return /*#__PURE__*/ jsxs("div", {
        className: cn("my-6 flex space-x-1", className),
        children: [
            /*#__PURE__*/ jsxs(motion.div, {
                className: "overflow-hidden pb-2",
                initial: {
                    width: "0%"
                },
                whileInView: {
                    width: "fit-content"
                },
                transition: {
                    duration: 2,
                    ease: "linear",
                    delay: 1
                },
                children: [
                    /*#__PURE__*/ jsxs("div", {
                        className: "lg:text:3xl text-xs font-bold sm:text-base md:text-xl xl:text-5xl",
                        style: {
                            whiteSpace: "nowrap"
                        },
                        children: [
                            renderWords(),
                            " "
                        ]
                    }),
                    " "
                ]
            }),
            /*#__PURE__*/ jsx(motion.span, {
                initial: {
                    opacity: 0
                },
                animate: {
                    opacity: 1
                },
                transition: {
                    duration: 0.8,
                    repeat: 1 / 0,
                    repeatType: "reverse"
                },
                className: cn("block h-4 w-[4px] rounded-sm bg-blue-500 sm:h-6 xl:h-12", cursorClassName)
            })
        ]
    });
};
export { TypewriterText, TypewriterTextSmooth };

//# sourceMappingURL=typewriter.js.map