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

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, 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 { motion, stagger, useAnimate, useInView } from "motion/react";
import { cn } from "../../lib/utilities.js";
import typewriter_module from "./typewriter.module.js";
import * as __rspack_external_react from "react";
const TypewriterText = /*#__PURE__*/ __rspack_external_react.forwardRef(({ words, className, cursorClassName }, ref)=>{
    const wordsArray = words.map((word)=>({
            ...word,
            text: [
                ...word.text
            ]
        }));
    const [scope, animate] = useAnimate();
    const isInView = useInView(scope);
    __rspack_external_react.useEffect(()=>{
        if (!isInView) return;
        animate("span", {
            display: "inline-block",
            opacity: 1,
            width: "fit-content"
        }, {
            duration: 0.3,
            delay: stagger(0.1),
            ease: "easeInOut"
        });
    }, [
        animate,
        isInView
    ]);
    return /*#__PURE__*/ jsxs("div", {
        ref: ref,
        className: cn(typewriter_module.root, className),
        children: [
            /*#__PURE__*/ jsx(motion.div, {
                ref: scope,
                className: typewriter_module.inline,
                children: wordsArray.map((word, wordIndex)=>/*#__PURE__*/ jsxs("div", {
                        className: typewriter_module.word,
                        children: [
                            word.text.map((character, characterIndex)=>/*#__PURE__*/ jsx(motion.span, {
                                    initial: {},
                                    className: cn(typewriter_module.hiddenCharacter, word.className),
                                    children: character
                                }, `char-${characterIndex}`)),
                            "\xa0"
                        ]
                    }, `word-${wordIndex}`))
            }),
            /*#__PURE__*/ jsx(motion.span, {
                initial: {
                    opacity: 0
                },
                animate: {
                    opacity: 1
                },
                transition: {
                    duration: 0.8,
                    repeat: 1 / 0,
                    repeatType: "reverse"
                },
                className: cn(typewriter_module.cursor, cursorClassName)
            })
        ]
    });
});
TypewriterText.displayName = "TypewriterText";
const TypewriterTextSmooth = /*#__PURE__*/ __rspack_external_react.forwardRef(({ words, className, cursorClassName }, ref)=>{
    const wordsArray = words.map((word)=>({
            ...word,
            text: [
                ...word.text
            ]
        }));
    const renderWords = ()=>/*#__PURE__*/ jsx("div", {
            children: wordsArray.map((word, wordIndex)=>/*#__PURE__*/ jsxs("div", {
                    className: typewriter_module.word,
                    children: [
                        word.text.map((character, characterIndex)=>/*#__PURE__*/ jsx("span", {
                                className: cn(typewriter_module.visibleCharacter, word.className),
                                children: character
                            }, `char-${characterIndex}`)),
                        "\xa0"
                    ]
                }, `word-${wordIndex}`))
        });
    return /*#__PURE__*/ jsxs("div", {
        ref: ref,
        className: cn(typewriter_module.smoothRoot, className),
        children: [
            /*#__PURE__*/ jsx(motion.div, {
                className: typewriter_module.smoothViewport,
                initial: {
                    width: "0%"
                },
                whileInView: {
                    width: "fit-content"
                },
                transition: {
                    duration: 2,
                    ease: "linear",
                    delay: 1
                },
                children: /*#__PURE__*/ jsx("div", {
                    className: typewriter_module.smoothText,
                    children: renderWords()
                })
            }),
            /*#__PURE__*/ jsx(motion.span, {
                initial: {
                    opacity: 0
                },
                animate: {
                    opacity: 1
                },
                transition: {
                    duration: 0.8,
                    repeat: 1 / 0,
                    repeatType: "reverse"
                },
                className: cn(typewriter_module.smoothCursor, cursorClassName)
            })
        ]
    });
});
TypewriterTextSmooth.displayName = "TypewriterTextSmooth";
export { TypewriterText, TypewriterTextSmooth };

//# sourceMappingURL=typewriter.js.map