@catalystsoftware/ui 1.0.5 → 1.0.6

package/components/catalyst-ui/x/animated-text-x.tsx

@@ -1,2242 +0,0 @@
-import React, { FC, useEffect, useRef, CSSProperties, useState, useId, useMemo, ComponentPropsWithoutRef, ReactNode, useCallback, } from "react"
-import { cn } from "~/components/catalyst-ui"
-import { HTMLMotionProps, motion, useAnimation, useInView, AnimatePresence, MotionProps, Transition, Variants, MotionValue, useScroll, useTransform, animate, useMotionValue, } from "motion/react"
-import { cva, type VariantProps } from 'class-variance-authority'
-
-type AnimationVariant = | "Rotate" | "ExpandableTypewriter" | "TypingAnimation" | "Typewriter" | "Rewind" | "Reveal" | "Morph" | "Swoosh" | "Sliced" | "Shimmer" | "Matrix" | "Hyper" | "Glitch" | "Encrypted" | "Comic" | "AnimatedGlitch" | "default";
-
-/**
- * type AnimationVariant = | "Rotate" | "ExpandableTypewriter" | "TypingAnimation" | "Typewriter" | "Rewind" | "Reveal" | "Morph" | "Swoosh" | "Sliced" | "Shimmer" | "Matrix" | "Hyper" | "Glitch" | "Encrypted" | "Comic" | "AnimatedGlitch" | "default";
- * ============================ DEFAULT (AnimateText) ============================
- * text: string (default: "Welcome to the Matrix, Neo.!") - any variant that uses text as a prop will default to this
- * type?: "fadeIn" | "fadeInUp" | "popIn" | "shiftInUp" | "rollIn" | "whipIn" | "whipInUp" | "calmInUp" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown"
- * className?: string
- * example: <AnimateText text="Roll In" type="rollIn" />
- * note: this being the default, theres no need to call the function with the variant prop in order to use, granting acces to 18 different text animations alone.
- * 
- * ============================ AnimatedGlitch ==================================
- * text: string
- * as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"
- * textClassName?: string
- * containerClassName?: string
- * colors?: { red: string, green: string, blue: string }
- * example: <AnimateText variant='AnimatedGlitch' text="GLITCH" colors={{ red: "#ff0000", green: "#00ff00", blue: "#0000ff" }} />
- * 
- * ============================ Rotate ==========================================
- * words: string[] - Array of words to rotate through
- * duration?: number (default: 2500) - Time in ms between word changes
- * motionProps?: MotionProps - Custom motion properties
- * className?: string
- * example: <AnimateText variant='Rotate' words={["First", "Second", "Third"]} duration={2000} />
- * 
- * ============================ ExpandableTypewriter ============================
- * delay: number - Initial delay before animation starts
- * texts: string[] - Array of texts to cycle through
- * baseText?: string - Initial base text to type out
- * example: <AnimateText variant='ExpandableTypewriter' delay={0.5} texts={["Hello", "World"]} baseText="Welcome: " />
- * 
- * ============================ TypingAnimation =================================
- * children?: string - Single text to type
- * words?: string[] - Multiple words to cycle through
- * className?: string
- * duration?: number (default: 100) - Speed per character
- * typeSpeed?: number - Override duration for typing
- * deleteSpeed?: number - Speed for deleting (default: typeSpeed/2)
- * delay?: number (default: 0)
- * pauseDelay?: number (default: 1000)
- * loop?: boolean (default: false)
- * as?: React.ElementType (default: "span")
- * startOnView?: boolean (default: true)
- * showCursor?: boolean (default: true)
- * blinkCursor?: boolean (default: true)
- * cursorStyle?: "line" | "block" | "underscore"
- * example: <AnimateText variant='TypingAnimation' words={["TypeScript", "React", "Next.js"]} loop showCursor />
- * 
- * ============================ Typewriter ======================================
- * sequences?: TypewriterSequence[] - Array of { text: string, deleteAfter?: boolean, pauseAfter?: number }
- * typingSpeed?: number (default: 50)
- * startDelay?: number (default: 500)
- * autoLoop?: boolean (default: true)
- * loopDelay?: number (default: 2000)
- * size?: "sm" | "md" | "lg"
- * className?: string
- * containerClassName?: string
- * example: <AnimateText variant='Typewriter' sequences={[{ text: "Hello", deleteAfter: true }]} size="md" />
- * 
- * ============================ Rewind ==========================================
- * text?: string
- * className?: string
- * shadowColors?: { first?: string, second?: string, third?: string, fourth?: string, glow?: string }
- * example: <AnimateText variant='Rewind' text="HOVER ME" shadowColors={{ first: "#07bccc", glow: "#f40468" }} />
- * 
- * ============================ Swoosh ==========================================
- * text?: string
- * shadowColors?: { first?: string, second?: string, third?: string, fourth?: string, glow?: string }
- * size?: "sm" | "md" | "lg" | "xl"
- * className?: string
- * disabled?: boolean
- * example: <AnimateText variant='Swoosh' text="SWOOSH" size="lg" />
- * 
- * ============================ Sliced ==========================================
- * text: string
- * splitSpacing?: number (default: 2)
- * size?: "sm" | "md" | "lg" | "xl"
- * className?: string
- * containerClassName?: string
- * disabled?: boolean
- * example: <AnimateText variant='Sliced' text="SLICE" splitSpacing={4} size="lg" />
- * 
- * ============================ Shimmer =========================================
- * text: string
- * duration?: number (default: 2.5)
- * variant?: "default" | "primary" | "secondary" | "accent"
- * size?: "sm" | "md" | "lg" | "xl"
- * className?: string
- * containerClassName?: string
- * disabled?: boolean
- * example: <AnimateText variant='Shimmer' text="Shimmer" duration={3} variant="primary" />
- * 
- * ============================ Matrix ==========================================
- * text?: string (default: "Welcome to the Matrix, Neo.!")
- * initialDelay?: number (default: 200)
- * letterAnimationDuration?: number (default: 500)
- * letterInterval?: number (default: 100)
- * matrixColor?: string (default: "#00ff00")
- * loop?: boolean (default: false)
- * size?: "sm" | "md" | "lg"
- * alignment?: "left" | "center" | "right"
- * className?: string
- * example: <AnimateText variant='Matrix' text="MATRIX" matrixColor="#00ff00" loop />
- * 
- * ============================ Glitch ==========================================
- * text: string
- * className?: string
- * intensity?: "low" | "medium" | "high"
- * duration?: number (default: 2000)
- * enabled?: boolean (default: true)
- * fontSize?: "sm" | "md" | "lg" | "xl" | "2xl"
- * example: <AnimateText variant='Glitch' text="GLITCH" intensity="high" fontSize="xl" />
- * 
- * ============================ Encrypted =======================================
- * text: string
- * className?: string
- * revealDelayMs?: number (default: 50) - Time between revealing each character
- * charset?: string - Custom character set for encryption
- * flipDelayMs?: number (default: 50) - Time between gibberish flips
- * encryptedClassName?: string
- * revealedClassName?: string
- * example: <AnimateText variant='Encrypted' text="SECRET" revealDelayMs={100} />
- * 
- * ============================ Hyper ===========================================
- * children: string
- * className?: string
- * duration?: number (default: 800)
- * delay?: number (default: 0)
- * as?: React.ElementType (default: "div")
- * startOnView?: boolean (default: false)
- * animateOnHover?: boolean (default: true)
- * characterSet?: string[] (default: A-Z)
- * example: <AnimateText variant='Hyper' duration={1000} animateOnHover>HYPERTEXT</AnimateText>
- * 
- * ============================ Comic ===========================================
- * children: string - The text to display in comic style
- * className?: string
- * style?: CSSProperties
- * fontSize?: number (default: 5)
- * example: <AnimateText variant='Comic' fontSize={4}>POW!</AnimateText>
- * 
- * ============================ Reveal ==========================================
- * children: string - Text to reveal on scroll
- * className?: string
- * example: <AnimateText variant='Reveal'>This text reveals as you scroll down the page</AnimateText>
- * 
- * ============================ Morph ===========================================
- * children: string - Text that morphs between changes
- * as?: React.ElementType (default: "p")
- * className?: string
- * style?: React.CSSProperties
- * variants?: Variants - Custom Framer Motion variants
- * transition?: Transition - Custom Framer Motion transition
- * example: <AnimateText variant='Morph'>Morphing Text</AnimateText>
- * 
- */
-
-function AnimatedTextX({
-    text = "Welcome to the Matrix, Neo.",
-    variant = 'default' | AnimationVariant,
-    useCustomVariants = false,
-    useBouncy = false,
-    children,
-    ...props }) {
-
-    switch (variant) {
-        case 'Rotate':
-            return <WordRotate {...props} />;
-        case 'ExpandableTypewriter':
-            return <ExpandableTypewriter {...props} />;
-        case 'TypingAnimation':
-            return <TypingAnimation {...props} />;
-        case 'Typewriter':
-            return <Typewriter {...props} />;
-        case 'Rewind':
-            return <TextRewind text={text} {...props} />;
-        case 'Swoosh':
-            return <SwooshText text={text} {...props} />;
-        case 'Sliced':
-            return <SlicedText text={text} {...props} />;
-        case 'Shimmer':
-            return <ShimmerText text={text} {...props} />;
-        case 'Matrix':
-            return <MatrixText text={text} {...props} />;
-        case 'AnimatedGlitch':
-            return <AnimatedGlitchText text={text} {...props} />;
-        case 'Glitch':
-            return <GlitchText text={text} {...props} />;
-        case 'Encrypted':
-            return <EncryptedText text={text} {...props} />;
-        case 'Reveal':
-            return <TextReveal {...props}>{children}</TextReveal>;
-        case 'Morph':
-            return <TextMorph {...props} variants={useCustomVariants ? customVariants : undefined} transition={useBouncy ? bouncyTransition : smoothTransition}>{children}</TextMorph>;
-        case 'Comic':
-            return <ComicText {...props}>{children}</ComicText>;
-        case 'Hyper':
-            return <HyperText {...props}>{children}</HyperText>;
-        case 'default':
-        default:
-            return <AnimateText text={text} {...props} />;
-    }
-}
-AnimatedTextX.displayName = "AnimatedTextX"
-
-interface WordRotateProps {
-    words: string[]
-    duration?: number
-    motionProps?: MotionProps
-    className?: string
-}
-
-function WordRotate({
-    words,
-    duration = 2500,
-    motionProps = {
-        initial: { opacity: 0, y: -50 },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: 50 },
-        transition: { duration: 0.25, ease: "easeOut" },
-    },
-    className,
-}: WordRotateProps) {
-    const [index, setIndex] = useState(0)
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setIndex((prevIndex) => (prevIndex + 1) % words.length)
-        }, duration)
-
-        return () => clearInterval(interval)
-    }, [words, duration])
-
-    return (
-        <div className="overflow-hidden py-2">
-            <AnimatePresence mode="wait">
-                <motion.h1
-                    key={words[index]}
-                    className={cn(className)}
-                    {...motionProps}
-                >
-                    {words[index]}
-                </motion.h1>
-            </AnimatePresence>
-        </div>
-    )
-}
-
-interface ITypewriterProps {
-    delay: number
-    texts: string[]
-    baseText?: string
-}
-
-function ExpandableTypewriter({ delay, texts, baseText = "" }: ITypewriterProps) {
-    const [animationComplete, setAnimationComplete] = useState(false)
-    const count = useMotionValue(0)
-    const rounded = useTransform(count, (latest) => Math.round(latest))
-    const displayText = useTransform(rounded, (latest) =>
-        baseText.slice(0, latest)
-    )
-
-    useEffect(() => {
-        const controls = animate(count, baseText.length, {
-            type: "tween",
-            delay,
-            duration: 1,
-            ease: [0.42, 0, 0.58, 1] as const,
-            onComplete: () => setAnimationComplete(true),
-        })
-        return () => {
-            controls.stop && controls.stop()
-        }
-    }, [count, baseText.length, delay])
-
-    return (
-        <span>
-            <motion.span>{displayText}</motion.span>
-            {animationComplete && (
-                <RepeatedTextAnimation texts={texts} delay={delay + 1} />
-            )}
-            <BlinkingCursor />
-        </span>
-    )
-}
-
-interface IRepeatedTextAnimationProps {
-    delay: number
-    texts: string[]
-}
-
-const defaultTexts = [
-    "quiz page with questions and answers",
-    "blog Article Details Page Layout",
-    "ecommerce dashboard with a sidebar",
-    "ui like platform.openai.com....",
-    "buttttton",
-    "aop that tracks non-standard split sleep cycles",
-    "transparent card to showcase achievements of a user",
-]
-function RepeatedTextAnimation({
-    delay,
-    texts = defaultTexts,
-}: IRepeatedTextAnimationProps) {
-    const textIndex = useMotionValue(0)
-
-    const baseText = useTransform(textIndex, (latest) => texts[latest] || "")
-    const count = useMotionValue(0)
-    const rounded = useTransform(count, (latest) => Math.round(latest))
-    const displayText = useTransform(rounded, (latest) =>
-        baseText.get().slice(0, latest)
-    )
-    const updatedThisRound = useMotionValue(true)
-
-    useEffect(() => {
-        const animation = animate(count, 60, {
-            type: "tween",
-            delay,
-            duration: 1,
-            ease: [0.42, 0, 1, 1] as const,
-            repeat: Infinity,
-            repeatType: "reverse",
-            repeatDelay: 1,
-            onUpdate(latest) {
-                if (updatedThisRound.get() && latest > 0) {
-                    updatedThisRound.set(false)
-                } else if (!updatedThisRound.get() && latest === 0) {
-                    textIndex.set((textIndex.get() + 1) % texts.length)
-                    updatedThisRound.set(true)
-                }
-            },
-        })
-        return () => {
-            animation.stop && animation.stop()
-        }
-    }, [count, delay, textIndex, texts, updatedThisRound])
-
-    return <motion.span className="inline">{displayText}</motion.span>
-}
-
-const cursorVariants = {
-    blinking: {
-        opacity: [0, 0, 1, 1],
-        transition: {
-            duration: 1,
-            repeat: Infinity,
-            repeatDelay: 0,
-            ease: [0, 0, 1, 1] as const,
-            times: [0, 0.5, 0.5, 1],
-        },
-    },
-}
-
-function BlinkingCursor() {
-    return (
-        <motion.div
-            variants={cursorVariants}
-            animate="blinking"
-            className="inline-block h-5 w-[1px] translate-y-1 bg-neutral-900"
-        />
-    )
-}
-
-interface TypingAnimationProps extends MotionProps {
-    children?: string
-    words?: string[]
-    className?: string
-    duration?: number
-    typeSpeed?: number
-    deleteSpeed?: number
-    delay?: number
-    pauseDelay?: number
-    loop?: boolean
-    as?: React.ElementType
-    startOnView?: boolean
-    showCursor?: boolean
-    blinkCursor?: boolean
-    cursorStyle?: "line" | "block" | "underscore"
-}
-
-function TypingAnimation({
-    children,
-    words,
-    className,
-    duration = 100,
-    typeSpeed,
-    deleteSpeed,
-    delay = 0,
-    pauseDelay = 1000,
-    loop = false,
-    as: Component = "span",
-    startOnView = true,
-    showCursor = true,
-    blinkCursor = true,
-    cursorStyle = "line",
-    ...props
-}: TypingAnimationProps) {
-    const MotionComponent = motion.create(Component, {
-        forwardMotionProps: true,
-    })
-
-    const [displayedText, setDisplayedText] = useState<string>("")
-    const [currentWordIndex, setCurrentWordIndex] = useState(0)
-    const [currentCharIndex, setCurrentCharIndex] = useState(0)
-    const [phase, setPhase] = useState<"typing" | "pause" | "deleting">("typing")
-    const elementRef = useRef<HTMLElement | null>(null)
-    const isInView = useInView(elementRef as React.RefObject<Element>, {
-        amount: 0.3,
-        once: true,
-    })
-
-    const wordsToAnimate = useMemo(
-        () => words || (children ? [children] : []),
-        [words, children]
-    )
-    const hasMultipleWords = wordsToAnimate.length > 1
-
-    const typingSpeed = typeSpeed || duration
-    const deletingSpeed = deleteSpeed || typingSpeed / 2
-
-    const shouldStart = startOnView ? isInView : true
-
-    useEffect(() => {
-        if (!shouldStart || wordsToAnimate.length === 0) return
-
-        const timeoutDelay =
-            delay > 0 && displayedText === ""
-                ? delay
-                : phase === "typing"
-                    ? typingSpeed
-                    : phase === "deleting"
-                        ? deletingSpeed
-                        : pauseDelay
-
-        const timeout = setTimeout(() => {
-            const currentWord = wordsToAnimate[currentWordIndex] || ""
-            const graphemes = Array.from(currentWord)
-
-            switch (phase) {
-                case "typing":
-                    if (currentCharIndex < graphemes.length) {
-                        setDisplayedText(graphemes.slice(0, currentCharIndex + 1).join(""))
-                        setCurrentCharIndex(currentCharIndex + 1)
-                    } else {
-                        if (hasMultipleWords || loop) {
-                            const isLastWord = currentWordIndex === wordsToAnimate.length - 1
-                            if (!isLastWord || loop) {
-                                setPhase("pause")
-                            }
-                        }
-                    }
-                    break
-
-                case "pause":
-                    setPhase("deleting")
-                    break
-
-                case "deleting":
-                    if (currentCharIndex > 0) {
-                        setDisplayedText(graphemes.slice(0, currentCharIndex - 1).join(""))
-                        setCurrentCharIndex(currentCharIndex - 1)
-                    } else {
-                        const nextIndex = (currentWordIndex + 1) % wordsToAnimate.length
-                        setCurrentWordIndex(nextIndex)
-                        setPhase("typing")
-                    }
-                    break
-            }
-        }, timeoutDelay)
-
-        return () => clearTimeout(timeout)
-    }, [
-        shouldStart,
-        phase,
-        currentCharIndex,
-        currentWordIndex,
-        displayedText,
-        wordsToAnimate,
-        hasMultipleWords,
-        loop,
-        typingSpeed,
-        deletingSpeed,
-        pauseDelay,
-        delay,
-    ])
-
-    const currentWordGraphemes = Array.from(
-        wordsToAnimate[currentWordIndex] || ""
-    )
-    const isComplete =
-        !loop &&
-        currentWordIndex === wordsToAnimate.length - 1 &&
-        currentCharIndex >= currentWordGraphemes.length &&
-        phase !== "deleting"
-
-    const shouldShowCursor =
-        showCursor &&
-        !isComplete &&
-        (hasMultipleWords || loop || currentCharIndex < currentWordGraphemes.length)
-
-    const getCursorChar = () => {
-        switch (cursorStyle) {
-            case "block":
-                return "▌"
-            case "underscore":
-                return "_"
-            case "line":
-            default:
-                return "|"
-        }
-    }
-
-    return (
-        <MotionComponent
-            ref={elementRef}
-            className={cn("leading-[5rem] tracking-[-0.02em]", className)}
-            {...props}
-        >
-            {displayedText}
-            {shouldShowCursor && (
-                <span
-                    className={cn("inline-block", blinkCursor && "animate-blink-cursor")}
-                >
-                    {getCursorChar()}
-                </span>
-            )}
-        </MotionComponent>
-    )
-}
-
-const typewriterVariants = cva(
-    "inline-block animate-cursor border-foreground border-r-2 pr-1 font-mono tracking-tight",
-    {
-        variants: {
-            size: {
-                sm: "text-2xl md:text-3xl",
-                md: "text-4xl md:text-6xl",
-                lg: "text-6xl md:text-8xl",
-            },
-        },
-        defaultVariants: {
-            size: "md",
-        },
-    }
-)
-
-interface TypewriterSequence {
-    text: string
-    deleteAfter?: boolean
-    pauseAfter?: number
-}
-
-interface TypewriterProps extends VariantProps<typeof typewriterVariants> {
-    sequences?: TypewriterSequence[]
-    typingSpeed?: number
-    startDelay?: number
-    autoLoop?: boolean
-    loopDelay?: number
-    className?: string
-    containerClassName?: string
-}
-
-function Typewriter({
-    sequences = [
-        { text: "Typewriter", deleteAfter: true },
-        { text: "Multiple Words", deleteAfter: true },
-        { text: "Auto Loop", deleteAfter: false },
-    ],
-    typingSpeed = 50,
-    startDelay = 500,
-    autoLoop = true,
-    loopDelay = 2000,
-    size,
-    className,
-    containerClassName,
-}: TypewriterProps) {
-    const textRef = useRef<HTMLSpanElement>(null)
-    const containerRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        let isActive = true
-
-        const typeText = async () => {
-            const titleElement = textRef.current
-            if (!titleElement) return
-
-            while (isActive) {
-                titleElement.textContent = ""
-
-                await new Promise((resolve) => setTimeout(resolve, startDelay))
-
-                for (const sequence of sequences) {
-                    if (!isActive) break
-
-                    for (let i = 0; i < sequence.text.length; i++) {
-                        if (!isActive) break
-                        titleElement.textContent = sequence.text.slice(0, i + 1)
-                        await new Promise((resolve) => setTimeout(resolve, typingSpeed))
-                    }
-
-                    if (sequence.pauseAfter) {
-                        await new Promise((resolve) =>
-                            setTimeout(resolve, sequence.pauseAfter)
-                        )
-                    }
-
-                    if (sequence.deleteAfter) {
-                        await new Promise((resolve) => setTimeout(resolve, 500))
-                        for (let i = sequence.text.length; i > 0; i--) {
-                            if (!isActive) break
-                            titleElement.textContent = sequence.text.slice(0, i)
-                            await new Promise((resolve) =>
-                                setTimeout(resolve, typingSpeed / 2)
-                            )
-                        }
-                    }
-                }
-
-                if (!(autoLoop && isActive)) break
-
-                await new Promise((resolve) => setTimeout(resolve, loopDelay))
-            }
-        }
-
-        typeText()
-
-        return () => {
-            isActive = false
-        }
-    }, [sequences, typingSpeed, startDelay, autoLoop, loopDelay])
-
-    return (
-        <div className={cn("relative mx-auto w-full max-w-4xl py-24", containerClassName)}>
-            <div
-                className="relative z-10 flex flex-col items-center justify-center text-center"
-                ref={containerRef}
-            >
-                <div className="flex items-center gap-2">
-                    <span
-                        ref={textRef}
-                        className={cn(typewriterVariants({ size }), "text-foreground", className)}
-                    >
-                        {sequences[0].text}
-                    </span>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-interface AnimatedTextProps {
-    text?: string;
-    className?: string;
-    shadowColors?: {
-        first?: string;
-        second?: string;
-        third?: string;
-        fourth?: string;
-        glow?: string;
-    };
-}
-
-function TextRewind({
-    text = "LINE",
-    className = "",
-    shadowColors = {
-        first: "#07bccc",
-        second: "#e601c0",
-        third: "#e9019a",
-        fourth: "#f40468",
-        glow: "#f40468",
-    },
-}: AnimatedTextProps) {
-    const textShadowStyle = {
-        textShadow: `10px 10px 0px ${shadowColors.first}, 
-                     15px 15px 0px ${shadowColors.second}, 
-                     20px 20px 0px ${shadowColors.third}, 
-                     25px 25px 0px ${shadowColors.fourth}, 
-                     45px 45px 10px ${shadowColors.glow}`,
-    };
-
-    const noShadowStyle = {
-        textShadow: "none",
-    };
-
-    return (
-        <div className="w-full text-center">
-            <motion.div
-                className={cn(
-                    "w-full text-center cursor-pointer text-3xl font-bold",
-                    "transition-all duration-200 ease-in-out tracking-widest",
-                    "text-black dark:text-white italic",
-                    "stroke-[#d6f4f4]",
-                    className
-                )}
-                style={textShadowStyle}
-                whileHover={noShadowStyle}
-            >
-                {text}
-            </motion.div>
-        </div>
-    );
-}
-
-interface TextRevealProps extends ComponentPropsWithoutRef<"div"> {
-    children: string
-}
-
-function TextReveal({ children, className }: TextRevealProps) {
-    const targetRef = useRef<HTMLDivElement | null>(null)
-    const { scrollYProgress } = useScroll({
-        target: targetRef,
-    })
-
-    if (typeof children !== "string") {
-        throw new Error("TextReveal: children must be a string")
-    }
-
-    const words = children.split(" ")
-
-    return (
-        <div ref={targetRef} className={cn("relative z-0 h-[200vh]", className)}>
-            <div
-                className={
-                    "sticky top-0 mx-auto flex h-[50%] max-w-4xl items-center bg-transparent px-[1rem] py-[5rem]"
-                }
-            >
-                <span
-                    ref={targetRef}
-                    className={
-                        "flex flex-wrap p-5 text-2xl font-bold text-black/20 md:p-8 md:text-3xl lg:p-10 lg:text-4xl xl:text-5xl dark:text-white/20"
-                    }
-                >
-                    {words.map((word, i) => {
-                        const start = i / words.length
-                        const end = start + 1 / words.length
-                        return (
-                            <Word key={i} progress={scrollYProgress} range={[start, end]}>
-                                {word}
-                            </Word>
-                        )
-                    })}
-                </span>
-            </div>
-        </div>
-    )
-}
-
-interface WordProps {
-    children: ReactNode
-    progress: MotionValue<number>
-    range: [number, number]
-}
-
-const Word: FC<WordProps> = ({ children, progress, range }) => {
-    const opacity = useTransform(progress, range, [0, 1])
-    return (
-        <span className="xl:lg-3 relative mx-1 lg:mx-1.5">
-            <span className="absolute opacity-30">{children}</span>
-            <motion.span
-                style={{ opacity: opacity }}
-                className={"text-black dark:text-white"}
-            >
-                {children}
-            </motion.span>
-        </span>
-    )
-}
-
-type TextMorphProps = {
-    children: string
-    as?: React.ElementType
-    className?: string
-    style?: React.CSSProperties
-    variants?: Variants
-    transition?: Transition
-}
-
-function TextMorph({
-    children,
-    as: Component = "p",
-    className,
-    style,
-    variants,
-    transition,
-}: TextMorphProps) {
-    const uniqueId = useId()
-
-    const characters = useMemo(() => {
-        const charCounts: Record<string, number> = {}
-
-        return children.split("").map((char, index) => {
-            const lowerChar = char.toLowerCase()
-            charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1
-
-            return {
-                id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,
-                label:
-                    char === " "
-                        ? "\u00A0"
-                        : index === 0
-                            ? char.toUpperCase()
-                            : lowerChar,
-            }
-        })
-    }, [children, uniqueId])
-
-    const defaultVariants: Variants = {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-    }
-
-    const defaultTransition: Transition = {
-        type: "spring",
-        stiffness: 280,
-        damping: 18,
-        mass: 0.3,
-    }
-
-    return (
-        <Component className={cn(className)} aria-label={children} style={style}>
-            <AnimatePresence mode="popLayout" initial={false}>
-                {characters.map((character) => (
-                    <motion.span
-                        key={character.id}
-                        layoutId={character.id}
-                        className="inline-block"
-                        aria-hidden="true"
-                        initial="initial"
-                        animate="animate"
-                        exit="exit"
-                        variants={variants || defaultVariants}
-                        transition={transition || defaultTransition}
-                    >
-                        {character.label}
-                    </motion.span>
-                ))}
-            </AnimatePresence>
-        </Component>
-    )
-}
-
-const swooshTextVariants = cva(
-    "w-full text-center cursor-pointer font-bold transition-all duration-200 ease-in-out tracking-widest text-foreground italic",
-    {
-        variants: {
-            size: {
-                sm: "text-xl",
-                md: "text-3xl",
-                lg: "text-5xl",
-                xl: "text-7xl",
-            },
-        },
-        defaultVariants: {
-            size: "md",
-        },
-    }
-)
-
-interface ShadowColors {
-    first?: string
-    second?: string
-    third?: string
-    fourth?: string
-    glow?: string
-}
-
-interface SwooshTextProps extends VariantProps<typeof swooshTextVariants> {
-    text?: string
-    shadowColors?: ShadowColors
-    className?: string
-    disabled?: boolean
-}
-
-function SwooshText({
-    text = "Hover Me",
-    shadowColors = {
-        first: "#07bccc",
-        second: "#e601c0",
-        third: "#e9019a",
-        fourth: "#f40468",
-        glow: "#f40468",
-    },
-    size,
-    className,
-    disabled = false,
-}: SwooshTextProps) {
-    const [isHovered, setIsHovered] = React.useState(false)
-
-    const textShadowStyle = {
-        textShadow: `10px 10px 0px ${shadowColors.first}, 
-                 15px 15px 0px ${shadowColors.second}, 
-                 20px 20px 0px ${shadowColors.third}, 
-                 25px 25px 0px ${shadowColors.fourth}, 
-                 45px 45px 10px ${shadowColors.glow}`,
-    }
-
-    const noShadowStyle = {
-        textShadow: "none",
-    }
-
-    return (
-        <div className="w-full text-center">
-            <div
-                className={cn(
-                    swooshTextVariants({ size }),
-                    disabled && "cursor-not-allowed opacity-50",
-                    className
-                )}
-                style={isHovered && !disabled ? noShadowStyle : textShadowStyle}
-                onMouseEnter={() => !disabled && setIsHovered(true)}
-                onMouseLeave={() => !disabled && setIsHovered(false)}
-            >
-                {text}
-            </div>
-        </div>
-    )
-}
-
-const slicedTextVariants = cva(
-    "text-foreground",
-    {
-        variants: {
-            size: {
-                sm: "text-2xl",
-                md: "text-4xl",
-                lg: "text-6xl",
-                xl: "text-8xl",
-            },
-        },
-        defaultVariants: {
-            size: "md",
-        },
-    }
-)
-
-interface SlicedTextProps extends VariantProps<typeof slicedTextVariants> {
-    text: string
-    splitSpacing?: number
-    className?: string
-    containerClassName?: string
-    disabled?: boolean
-}
-
-function SlicedText({
-    text = "Sliced Text",
-    splitSpacing = 2,
-    size,
-    className,
-    containerClassName,
-    disabled = false,
-}: SlicedTextProps) {
-    const [isHovered, setIsHovered] = useState(false)
-
-    const topVariants = {
-        default: {
-            clipPath: "inset(0 0 50% 0)",
-            transform: `translateY(${-splitSpacing / 2}px)`,
-            opacity: 1,
-        },
-        hover: {
-            clipPath: "inset(0 0 0 0)",
-            transform: "translateY(0px)",
-            opacity: 0,
-        },
-    }
-
-    const bottomVariants = {
-        default: {
-            clipPath: "inset(50% 0 0 0)",
-            transform: `translateY(${splitSpacing / 2}px)`,
-            opacity: 1,
-        },
-        hover: {
-            clipPath: "inset(0 0 0 0)",
-            transform: "translateY(0px)",
-            opacity: 1,
-        },
-    }
-
-    const currentTopStyle = isHovered && !disabled ? topVariants.hover : topVariants.default
-    const currentBottomStyle = isHovered && !disabled ? bottomVariants.hover : bottomVariants.default
-
-    return (
-        <div
-            className={cn("w-full text-center relative inline-block", containerClassName)}
-            onMouseEnter={() => !disabled && setIsHovered(true)}
-            onMouseLeave={() => !disabled && setIsHovered(false)}
-        >
-            <div
-                className={cn(
-                    "absolute w-full -ml-0.5 transition-all duration-100",
-                    slicedTextVariants({ size }),
-                    className
-                )}
-                style={{
-                    clipPath: currentTopStyle.clipPath,
-                    transform: currentTopStyle.transform,
-                    opacity: currentTopStyle.opacity,
-                }}
-            >
-                {text}
-            </div>
-            <div
-                className={cn(
-                    "absolute w-full transition-all duration-100",
-                    slicedTextVariants({ size }),
-                    className
-                )}
-                style={{
-                    clipPath: currentBottomStyle.clipPath,
-                    transform: currentBottomStyle.transform,
-                    opacity: currentBottomStyle.opacity,
-                }}
-            >
-                {text}
-            </div>
-            <div className={cn("invisible", slicedTextVariants({ size }), className)}>
-                {text}
-            </div>
-        </div>
-    )
-}
-
-const shimmerTextVariants = cva(
-    "font-bold bg-gradient-to-r bg-[length:200%_100%] bg-clip-text text-transparent",
-    {
-        variants: {
-            variant: {
-                default: "from-neutral-950 via-neutral-400 to-neutral-950 dark:from-white dark:via-neutral-600 dark:to-white",
-                primary: "from-primary via-primary/50 to-primary",
-                secondary: "from-secondary via-secondary/50 to-secondary",
-                accent: "from-accent via-accent/50 to-accent",
-            },
-            size: {
-                sm: "text-xl",
-                md: "text-3xl",
-                lg: "text-5xl",
-                xl: "text-7xl",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-            size: "md",
-        },
-    }
-)
-
-interface ShimmerTextProps extends VariantProps<typeof shimmerTextVariants> {
-    text: string
-    duration?: number
-    className?: string
-    containerClassName?: string
-    disabled?: boolean
-}
-
-function ShimmerText({
-    text = "Text Shimmer",
-    duration = 2.5,
-    variant,
-    size,
-    className,
-    containerClassName,
-    disabled = false,
-}: ShimmerTextProps) {
-    const [position, setPosition] = React.useState("200% center")
-
-    React.useEffect(() => {
-        if (disabled) return
-
-        const startTime = Date.now()
-        let animationFrame: number
-
-        const animate = () => {
-            const elapsed = Date.now() - startTime
-            const progress = (elapsed % (duration * 1000)) / (duration * 1000)
-            const xPosition = 200 - (progress * 400)
-            setPosition(`${xPosition}% center`)
-            animationFrame = requestAnimationFrame(animate)
-        }
-
-        animationFrame = requestAnimationFrame(animate)
-        return () => cancelAnimationFrame(animationFrame)
-    }, [duration, disabled])
-
-    return (
-        <div className={cn("flex items-center justify-center p-8", containerClassName)}>
-            <div className="relative px-4 py-2 overflow-hidden">
-                <h1
-                    className={cn(shimmerTextVariants({ variant, size }), className)}
-                    style={{
-                        backgroundPosition: disabled ? "200% center" : position,
-                    }}
-                >
-                    {text}
-                </h1>
-            </div>
-        </div>
-    )
-}
-
-const matrixTextVariants = cva(
-    "flex items-center justify-center text-foreground",
-    {
-        variants: {
-            size: {
-                sm: "text-2xl md:text-3xl",
-                md: "text-4xl md:text-6xl",
-                lg: "text-6xl md:text-8xl",
-            },
-            alignment: {
-                left: "justify-start",
-                center: "justify-center",
-                right: "justify-end",
-            },
-        },
-        defaultVariants: {
-            size: "md",
-            alignment: "center",
-        },
-    }
-)
-
-interface LetterState {
-    char: string
-    isMatrix: boolean
-    isSpace: boolean
-}
-
-interface MatrixTextProps extends VariantProps<typeof matrixTextVariants> {
-    text?: string
-    initialDelay?: number
-    letterAnimationDuration?: number
-    letterInterval?: number
-    matrixColor?: string
-    loop?: boolean
-    className?: string
-}
-
-function MatrixText({
-    text = "HelloWorld!",
-    initialDelay = 200,
-    letterAnimationDuration = 500,
-    letterInterval = 100,
-    matrixColor = "#00ff00",
-    loop = false,
-    size,
-    alignment,
-    className,
-}: MatrixTextProps) {
-    const [letters, setLetters] = useState<LetterState[]>(() =>
-        text.split("").map((char) => ({
-            char,
-            isMatrix: false,
-            isSpace: char === " ",
-        }))
-    )
-    const [isAnimating, setIsAnimating] = useState(false)
-  const [isHovering, setIsHovering] = useState(false)
-
-    const getRandomChar = useCallback(
-        () => (Math.random() > 0.5 ? "1" : "0"),
-        []
-    )
-
-    const animateLetter = useCallback(
-        (index: number) => {
-            if (index >= text.length) return
-
-            requestAnimationFrame(() => {
-                setLetters((prev) => {
-                    const newLetters = [...prev]
-                    if (!newLetters[index].isSpace) {
-                        newLetters[index] = {
-                            ...newLetters[index],
-                            char: getRandomChar(),
-                            isMatrix: true,
-                        }
-                    }
-                    return newLetters
-                })
-
-                setTimeout(() => {
-                    setLetters((prev) => {
-                        const newLetters = [...prev]
-                        newLetters[index] = {
-                            ...newLetters[index],
-                            char: text[index],
-                            isMatrix: false,
-                        }
-                        return newLetters
-                    })
-                }, letterAnimationDuration)
-            })
-        },
-        [getRandomChar, text, letterAnimationDuration]
-    )
-
-    const startAnimation = useCallback(() => {
-        if (isAnimating) return
-
-        setIsAnimating(true)
-        let currentIndex = 0
-
-        const animate = () => {
-            if (currentIndex >= text.length) {
-                setIsAnimating(false)
-                return
-            }
-
-            animateLetter(currentIndex)
-            currentIndex++
-            setTimeout(animate, letterInterval)
-        }
-
-        animate()
-    }, [animateLetter, text, isAnimating, letterInterval])
-
-    useEffect(() => {
-        const timer = setTimeout(startAnimation, initialDelay)
-        return () => clearTimeout(timer)
-    }, [])
-
-    useEffect(() => {
-        if (!loop || isAnimating) return
-
-        const loopTimer = setInterval(() => {
-            startAnimation()
-        }, text.length * letterInterval + letterAnimationDuration + 2000)
-
-        return () => clearInterval(loopTimer)
-    }, [loop, isAnimating, startAnimation, text.length, letterInterval, letterAnimationDuration])
-
-      const handleMouseEnter = () => {
-    setIsHovering(true)
-    startAnimation()
-  }
-
-  const handleMouseLeave = () => {
-    setIsHovering(false)
-  }
-
-    return (
-        <div
-            className={cn(matrixTextVariants({ size, alignment }), className)}
-            aria-label="Matrix text animation"
-             onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-        >
-            <div className="h-24 flex items-center justify-center">
-                <div className="flex flex-wrap items-center justify-center">
-                    {letters.map((letter, index) => (
-                        <div
-                            key={`${index}-${letter.char}`}
-                            className="font-mono w-[1ch] text-center overflow-hidden transition-all duration-100"
-                            style={{
-                                display: "inline-block",
-                                fontVariantNumeric: "tabular-nums",
-                                color: letter.isMatrix ? matrixColor : "currentColor",
-                                textShadow: letter.isMatrix ? `0 2px 4px ${matrixColor}80` : "none",
-                            }}
-                        >
-                            {letter.isSpace ? "\u00A0" : letter.char}
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-type CharacterSet = string[] | readonly string[]
-
-interface HyperTextProps extends MotionProps {
-    children: string
-    className?: string
-    duration?: number
-    delay?: number
-    as?: React.ElementType
-    startOnView?: boolean
-    animateOnHover?: boolean
-    characterSet?: CharacterSet
-}
-
-const DEFAULT_CHARACTER_SET = Object.freeze(
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
-) as readonly string[]
-
-const getRandomInt = (max: number): number => Math.floor(Math.random() * max)
-
-function HyperText({
-    children,
-    className,
-    duration = 800,
-    delay = 0,
-    as: Component = "div",
-    startOnView = false,
-    animateOnHover = true,
-    characterSet = DEFAULT_CHARACTER_SET,
-    ...props
-}: HyperTextProps) {
-    const MotionComponent = motion.create(Component, {
-        forwardMotionProps: true,
-    })
-
-    const [displayText, setDisplayText] = useState<string[]>(() =>
-        children.split("")
-    )
-    const [isAnimating, setIsAnimating] = useState(false)
-    const iterationCount = useRef(0)
-    const elementRef = useRef<HTMLElement>(null)
-
-    const handleAnimationTrigger = () => {
-        if (animateOnHover && !isAnimating) {
-            iterationCount.current = 0
-            setIsAnimating(true)
-        }
-    }
-
-    useEffect(() => {
-        if (!startOnView) {
-            const startTimeout = setTimeout(() => {
-                setIsAnimating(true)
-            }, delay)
-            return () => clearTimeout(startTimeout)
-        }
-
-        const observer = new IntersectionObserver(
-            ([entry]) => {
-                if (entry.isIntersecting) {
-                    setTimeout(() => {
-                        setIsAnimating(true)
-                    }, delay)
-                    observer.disconnect()
-                }
-            },
-            { threshold: 0.1, rootMargin: "-30% 0px -30% 0px" }
-        )
-
-        if (elementRef.current) {
-            observer.observe(elementRef.current)
-        }
-
-        return () => observer.disconnect()
-    }, [delay, startOnView])
-
-    useEffect(() => {
-        if (!isAnimating) return
-
-        const maxIterations = children.length
-        const startTime = performance.now()
-        let animationFrameId: number
-
-        const animate = (currentTime: number) => {
-            const elapsed = currentTime - startTime
-            const progress = Math.min(elapsed / duration, 1)
-
-            iterationCount.current = progress * maxIterations
-
-            setDisplayText((currentText) =>
-                currentText.map((letter, index) =>
-                    letter === " "
-                        ? letter
-                        : index <= iterationCount.current
-                            ? children[index]
-                            : characterSet[getRandomInt(characterSet.length)]
-                )
-            )
-
-            if (progress < 1) {
-                animationFrameId = requestAnimationFrame(animate)
-            } else {
-                setIsAnimating(false)
-            }
-        }
-
-        animationFrameId = requestAnimationFrame(animate)
-
-        return () => cancelAnimationFrame(animationFrameId)
-    }, [children, duration, isAnimating, characterSet])
-
-    return (
-        <MotionComponent
-            ref={elementRef}
-            className={cn("overflow-hidden py-2 text-4xl font-bold", className)}
-            onMouseEnter={handleAnimationTrigger}
-            {...props}
-        >
-            <AnimatePresence>
-                {displayText.map((letter, index) => (
-                    <motion.span
-                        key={index}
-                        className={cn("font-mono", letter === " " ? "w-3" : "")}
-                    >
-                        {letter.toUpperCase()}
-                    </motion.span>
-                ))}
-            </AnimatePresence>
-        </MotionComponent>
-    )
-}
-
-interface GlitchTextProps {
-    text: string;
-    className?: string;
-    intensity?: 'low' | 'medium' | 'high';
-    duration?: number;
-    enabled?: boolean;
-    fontSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-}
-
-function GlitchText({
-    text,
-    className,
-    intensity = 'medium',
-    duration = 2000,
-    enabled = true,
-    fontSize = 'md'
-}: GlitchTextProps) {
-    const [isGlitching, setIsGlitching] = useState(false);
-    const [glitchText, setGlitchText] = useState(text);
-
-    const fontSizeClasses = {
-        sm: 'text-sm',
-        md: 'text-base',
-        lg: 'text-lg',
-        xl: 'text-xl',
-        '2xl': 'text-2xl'
-    };
-
-    const intensityValues = {
-        low: { interval: 3000, glitchDuration: 300, changeCount: 3 },
-        medium: { interval: 2000, glitchDuration: 500, changeCount: 5 },
-        high: { interval: 1000, glitchDuration: 800, changeCount: 8 }
-    };
-
-    const characters = '!@#$%^&*()_+-=[]{}|;:,.<>?~';
-
-    const generateGlitchText = (originalText: string) => {
-        const textArray = originalText.split('');
-        const glitchCount = intensityValues[intensity].changeCount;
-
-        for (let i = 0; i < glitchCount; i++) {
-            const randomIndex = Math.floor(Math.random() * textArray.length);
-            if (textArray[randomIndex] !== ' ') {
-                textArray[randomIndex] = characters[Math.floor(Math.random() * characters.length)];
-            }
-        }
-
-        return textArray.join('');
-    };
-
-    useEffect(() => {
-        if (!enabled) return;
-
-        const glitchInterval = setInterval(() => {
-            setIsGlitching(true);
-            setGlitchText(generateGlitchText(text));
-
-            setTimeout(() => {
-                setIsGlitching(false);
-                setGlitchText(text);
-            }, intensityValues[intensity].glitchDuration);
-        }, intensityValues[intensity].interval);
-
-        return () => clearInterval(glitchInterval);
-    }, [text, intensity, enabled]);
-
-    return (
-        <span className={cn(
-            'inline-block relative',
-            fontSizeClasses[fontSize],
-            isGlitching && 'text-red-400',
-            className
-        )}>
-            {glitchText}
-            {isGlitching && (
-                <>
-                    <span className="absolute top-0 left-1 text-blue-400 opacity-70 mix-blend-screen">
-                        {glitchText}
-                    </span>
-                    <span className="absolute top-0 left-[-1px] text-green-400 opacity-50 mix-blend-screen">
-                        {glitchText}
-                    </span>
-                </>
-            )}
-        </span>
-    );
-}
-
-type EncryptedTextProps = {
-    text: string;
-    className?: string;
-    /**
-     * Time in milliseconds between revealing each subsequent real character.
-     * Lower is faster. Defaults to 50ms per character.
-     */
-    revealDelayMs?: number;
-    /** Optional custom character set to use for the gibberish effect. */
-    charset?: string;
-    /**
-     * Time in milliseconds between gibberish flips for unrevealed characters.
-     * Lower is more jittery. Defaults to 50ms.
-     */
-    flipDelayMs?: number;
-    /** CSS class for styling the encrypted/scrambled characters */
-    encryptedClassName?: string;
-    /** CSS class for styling the revealed characters */
-    revealedClassName?: string;
-};
-
-const DEFAULT_CHARSET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?";
-
-function generateRandomCharacter(charset: string): string {
-    const index = Math.floor(Math.random() * charset.length);
-    return charset.charAt(index);
-}
-
-function generateGibberishPreservingSpaces(
-    original: string,
-    charset: string,
-): string {
-    if (!original) return "";
-    let result = "";
-    for (let i = 0; i < original.length; i += 1) {
-        const ch = original[i];
-        result += ch === " " ? " " : generateRandomCharacter(charset);
-    }
-    return result;
-}
-
-const EncryptedText: React.FC<EncryptedTextProps> = ({
-    text,
-    className,
-    revealDelayMs = 50,
-    charset = DEFAULT_CHARSET,
-    flipDelayMs = 50,
-    encryptedClassName,
-    revealedClassName,
-}) => {
-    const ref = useRef<HTMLSpanElement>(null);
-    const isInView = useInView(ref, { once: true });
-
-    const [revealCount, setRevealCount] = useState<number>(0);
-    const animationFrameRef = useRef<number | null>(null);
-    const startTimeRef = useRef<number>(0);
-    const lastFlipTimeRef = useRef<number>(0);
-    const scrambleCharsRef = useRef<string[]>(
-        text ? generateGibberishPreservingSpaces(text, charset).split("") : [],
-    );
-
-    useEffect(() => {
-        if (!isInView) return;
-
-        // Reset state for a fresh animation whenever dependencies change
-        const initial = text
-            ? generateGibberishPreservingSpaces(text, charset)
-            : "";
-        scrambleCharsRef.current = initial.split("");
-        startTimeRef.current = performance.now();
-        lastFlipTimeRef.current = startTimeRef.current;
-        setRevealCount(0);
-
-        let isCancelled = false;
-
-        const update = (now: number) => {
-            if (isCancelled) return;
-
-            const elapsedMs = now - startTimeRef.current;
-            const totalLength = text.length;
-            const currentRevealCount = Math.min(
-                totalLength,
-                Math.floor(elapsedMs / Math.max(1, revealDelayMs)),
-            );
-
-            setRevealCount(currentRevealCount);
-
-            if (currentRevealCount >= totalLength) {
-                return;
-            }
-
-            // Re-randomize unrevealed scramble characters on an interval
-            const timeSinceLastFlip = now - lastFlipTimeRef.current;
-            if (timeSinceLastFlip >= Math.max(0, flipDelayMs)) {
-                for (let index = 0; index < totalLength; index += 1) {
-                    if (index >= currentRevealCount) {
-                        if (text[index] !== " ") {
-                            scrambleCharsRef.current[index] =
-                                generateRandomCharacter(charset);
-                        } else {
-                            scrambleCharsRef.current[index] = " ";
-                        }
-                    }
-                }
-                lastFlipTimeRef.current = now;
-            }
-
-            animationFrameRef.current = requestAnimationFrame(update);
-        };
-
-        animationFrameRef.current = requestAnimationFrame(update);
-
-        return () => {
-            isCancelled = true;
-            if (animationFrameRef.current !== null) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-        };
-    }, [isInView, text, revealDelayMs, charset, flipDelayMs]);
-
-    if (!text) return null;
-
-    return (
-        <motion.span
-            ref={ref}
-            className={cn(className)}
-            aria-label={text}
-            role="text"
-        >
-            {text.split("").map((char, index) => {
-                const isRevealed = index < revealCount;
-                const displayChar = isRevealed
-                    ? char
-                    : char === " "
-                        ? " "
-                        : (scrambleCharsRef.current[index] ??
-                            generateRandomCharacter(charset));
-
-                return (
-                    <span
-                        key={index}
-                        className={cn(isRevealed ? revealedClassName : encryptedClassName)}
-                    >
-                        {displayChar}
-                    </span>
-                );
-            })}
-        </motion.span>
-    );
-};
-
-
-type ComicTextProps = {
-    children: string
-    className?: string
-    style?: CSSProperties
-    fontSize?: number
-}
-
-function ComicText({
-    children,
-    className,
-    style,
-    fontSize = 5,
-}: ComicTextProps) {
-    if (typeof children !== "string") {
-        throw new Error("children must be a string")
-    }
-
-    const dotColor = "#EF4444"
-    const backgroundColor = "#FACC15"
-
-    return (
-        <motion.div
-            className={cn("text-center select-none", className)}
-            style={{
-                fontSize: `${fontSize}rem`,
-                fontFamily: "'Bangers', 'Comic Sans MS', 'Impact', sans-serif",
-                fontWeight: "900",
-                WebkitTextStroke: `${fontSize * 0.35}px #000000`, // Thick black outline
-                transform: "skewX(-10deg)",
-                textTransform: "uppercase",
-                filter: `
-          drop-shadow(5px 5px 0px #000000) 
-          drop-shadow(3px 3px 0px ${dotColor})
-        `,
-                backgroundColor: backgroundColor,
-                backgroundImage: `radial-gradient(circle at 1px 1px, ${dotColor} 1px, transparent 0)`,
-                backgroundSize: "8px 8px",
-                backgroundClip: "text",
-                WebkitBackgroundClip: "text",
-                WebkitTextFillColor: "transparent",
-                ...style,
-            }}
-            initial={{ opacity: 0, scale: 0.8, rotate: -2 }}
-            animate={{ opacity: 1, scale: 1, rotate: 0 }}
-            transition={{
-                duration: 0.6,
-                ease: [0.175, 0.885, 0.32, 1.275],
-                type: "spring",
-            }}
-        >
-            {children}
-        </motion.div>
-    )
-}
-
-type AnimationType = | "fadeIn" | "fadeInUp" | "popIn" | "shiftInUp" | "rollIn" | "whipIn" | "whipInUp" | "calmInUp" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown";
-
-interface Props extends HTMLMotionProps<"div"> {
-    text: string
-    type?: AnimationType
-    delay?: number
-    duration?: number
-}
-
-const animationVariants = {
-    fadeIn: {
-        container: {
-            hidden: { opacity: 0 },
-            visible: (i: number = 1) => ({
-                opacity: 1,
-                transition: { staggerChildren: 0.05, delayChildren: i * 0.3 },
-            }),
-        },
-        child: {
-            visible: {
-                opacity: 1,
-                y: 0,
-                transition: {
-                    type: "spring" as const,
-                    damping: 12,
-                    stiffness: 100,
-                },
-            },
-            hidden: { opacity: 0, y: 10 },
-        },
-    },
-    fadeInUp: {
-        container: {
-            hidden: { opacity: 0 },
-            visible: {
-                opacity: 1,
-                transition: { staggerChildren: 0.1, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
-            hidden: { opacity: 0, y: 20 },
-        },
-    },
-    popIn: {
-        container: {
-            hidden: { scale: 0 },
-            visible: {
-                scale: 1,
-                transition: { staggerChildren: 0.05, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: {
-                opacity: 1,
-                scale: 1.1,
-                transition: { type: "spring" as const, damping: 15, stiffness: 400 },
-            },
-            hidden: { opacity: 0, scale: 0 },
-        },
-    },
-    calmInUp: {
-        container: {
-            hidden: {},
-            visible: (i: number = 1) => ({
-                transition: { staggerChildren: 0.01, delayChildren: 0.2 * i },
-            }),
-        },
-        child: {
-            hidden: {
-                y: "200%",
-                transition: {
-                    ease: [0.455, 0.03, 0.515, 0.955] as const,
-                    duration: 0.85,
-                },
-            },
-            visible: {
-                y: 0,
-                transition: {
-                    ease: [0.125, 0.92, 0.69, 0.975] as const, //  Drawing attention to dynamic content or interactive elements, where the animation needs to be engaging but not abrupt
-                    duration: 0.75,
-                    //   ease: [0.455, 0.03, 0.515, 0.955], // smooth and gradual acceleration followed by a steady deceleration towards the end of the animation
-                    //   ease: [0.115, 0.955, 0.655, 0.939], // smooth and gradual acceleration followed by a steady deceleration towards the end of the animation
-                    //   ease: [0.09, 0.88, 0.68, 0.98], // Very Gentle Onset, Swift Mid-Section, Soft Landing
-                    //   ease: [0.11, 0.97, 0.64, 0.945], // Minimal Start, Energetic Acceleration, Smooth Closure
-                },
-            },
-        },
-    },
-    shiftInUp: {
-        container: {
-            hidden: {},
-            visible: (i: number = 1) => ({
-                transition: { staggerChildren: 0.01, delayChildren: 0.2 * i },
-            }),
-        },
-        child: {
-            hidden: {
-                y: "100%", // Starting from below but not too far to ensure a dramatic but manageable shift.
-                transition: {
-                    ease: [0.75, 0, 0.25, 1] as const, // Starting quickly
-                    duration: 0.6, // Shortened duration for a more dramatic start
-                },
-            },
-            visible: {
-                y: 0,
-                transition: {
-                    duration: 0.8, // Slightly longer to accommodate the slow middle and swift end
-                    ease: [0.22, 1, 0.36, 1] as const, // This easing function starts quickly (dramatic shift), slows down (slow middle), and ends quickly (clean swift end)
-                },
-            },
-        },
-    },
-    whipInUp: {
-        container: {
-            hidden: {},
-            visible: (i: number = 1) => ({
-                transition: { staggerChildren: 0.01, delayChildren: 0.2 * i },
-            }),
-        },
-        child: {
-            hidden: {
-                y: "200%",
-                transition: {
-                    ease: [0.455, 0.03, 0.515, 0.955] as const,
-                    duration: 0.45,
-                },
-            },
-            visible: {
-                y: 0,
-                transition: {
-                    ease: [0.5, -0.15, 0.25, 1.05] as const,
-                    duration: 0.75,
-                },
-            },
-        },
-    },
-    rollIn: {
-        container: {
-            hidden: {},
-            visible: {},
-        },
-        child: {
-            hidden: {
-                opacity: 0,
-                y: `0.25em`,
-            },
-            visible: {
-                opacity: 1,
-                y: `0em`,
-                transition: {
-                    duration: 0.65,
-                    ease: [0.65, 0, 0.75, 1] as const, // Great! Swift Beginning, Prolonged Ease, Quick Finish
-                    //   ease: [0.75, 0.05, 0.85, 1], // Quick Start, Smooth Middle, Sharp End
-                    //   ease: [0.7, -0.25, 0.9, 1.25], // Fast Acceleration, Gentle Slowdown, Sudden Snap
-                    //   ease: [0.7, -0.5, 0.85, 1.5], // Quick Leap, Soft Glide, Snappy Closure
-                },
-            },
-        },
-    },
-    whipIn: {
-        container: {
-            hidden: {},
-            visible: {},
-        },
-        child: {
-            hidden: {
-                opacity: 0,
-                y: `0.35em`,
-            },
-            visible: {
-                opacity: 1,
-                y: `0em`,
-                transition: {
-                    duration: 0.45,
-                    //   ease: [0.75, 0.05, 0.85, 1], // Quick Start, Smooth Middle, Sharp End
-                    //   ease: [0.7, -0.25, 0.9, 1.25], // Fast Acceleration, Gentle Slowdown, Sudden Snap
-                    //   ease: [0.65, 0, 0.75, 1], // Great! Swift Beginning, Prolonged Ease, Quick Finish
-                    ease: [0.85, 0.1, 0.9, 1.2] as const, // Rapid Initiation, Subtle Slow, Sharp Conclusion
-                },
-            },
-        },
-    },
-    blurIn: {
-        container: {
-            hidden: { opacity: 0 },
-            visible: {
-                opacity: 1,
-                transition: { staggerChildren: 0.03, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: {
-                opacity: 1,
-                filter: "blur(0px)",
-                transition: { duration: 0.6 },
-            },
-            hidden: { opacity: 0, filter: "blur(10px)" },
-        },
-    },
-    blurInUp: {
-        container: {
-            hidden: { opacity: 0 },
-            visible: {
-                opacity: 1,
-                transition: { staggerChildren: 0.04, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: {
-                opacity: 1,
-                y: 0,
-                filter: "blur(0px)",
-                transition: { duration: 0.7 },
-            },
-            hidden: { opacity: 0, y: 20, filter: "blur(8px)" },
-        },
-    },
-    blurInDown: {
-        container: {
-            hidden: { opacity: 0 },
-            visible: {
-                opacity: 1,
-                transition: { staggerChildren: 0.04, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: {
-                opacity: 1,
-                y: 0,
-                filter: "blur(0px)",
-                transition: { duration: 0.7 },
-            },
-            hidden: { opacity: 0, y: -20, filter: "blur(8px)" },
-        },
-    },
-    slideUp: {
-        container: {
-            hidden: {},
-            visible: {
-                transition: { staggerChildren: 0.03, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: {
-                y: 0,
-                transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] as const },
-            },
-            hidden: { y: 30 },
-        },
-    },
-    slideDown: {
-        container: {
-            hidden: {},
-            visible: {
-                transition: { staggerChildren: 0.03, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: {
-                y: 0,
-                transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] as const },
-            },
-            hidden: { y: -30 },
-        },
-    },
-    slideLeft: {
-        container: {
-            hidden: {},
-            visible: {
-                transition: { staggerChildren: 0.03, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: {
-                x: 0,
-                transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] as const },
-            },
-            hidden: { x: 30 },
-        },
-    },
-    slideRight: {
-        container: {
-            hidden: {},
-            visible: {
-                transition: { staggerChildren: 0.03, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: {
-                x: 0,
-                transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] as const },
-            },
-            hidden: { x: -30 },
-        },
-    },
-    scaleUp: {
-        container: {
-            hidden: {},
-            visible: {
-                transition: { staggerChildren: 0.04, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: {
-                scale: 1,
-                opacity: 1,
-                transition: {
-                    duration: 0.5,
-                    ease: [0.34, 1.56, 0.64, 1] as const,
-                },
-            },
-            hidden: { scale: 0.5, opacity: 0 },
-        },
-    },
-    scaleDown: {
-        container: {
-            hidden: {},
-            visible: {
-                transition: { staggerChildren: 0.04, delayChildren: 0.2 },
-            },
-        },
-        child: {
-            visible: {
-                scale: 1,
-                opacity: 1,
-                transition: {
-                    duration: 0.5,
-                    ease: [0.34, 1.56, 0.64, 1] as const,
-                },
-            },
-            hidden: { scale: 1.5, opacity: 0 },
-        },
-    },
-}
-
-const AnimateText: FC<Props> = ({
-    text,
-    type = "whipInUp",
-    variant = 'default',
-    ...props
-}: Props) => {
-    //   const { ref, inView } = useInView({
-    //     threshold: 0.5,
-    //     triggerOnce: true,
-    //   });
-
-    const ref = useRef(null)
-    const isInView = useInView(ref, { once: true })
-
-    const letters = Array.from(text)
-    const { container, child } = animationVariants[type]
-
-    const ctrls = useAnimation()
-
-    //   useEffect(() => {
-    //     if (isInView) {
-    //       ctrls.start("visible");
-    //     }
-    //     if (!isInView) {
-    //       ctrls.start("hidden");
-    //     }
-    //   }, [ctrls, isInView]);
-
-    if (type === "rollIn" || type === "whipIn") {
-        return (
-            <h2 className="mt-10 text-3xl font-black text-black dark:text-neutral-100 py-5 pb-8 px-8 md:text-5xl">
-                {text.split(" ").map((word, index) => {
-                    return (
-                        <motion.span
-                            ref={ref}
-                            className="inline-block mr-[0.25em] whitespace-nowrap"
-                            aria-hidden="true"
-                            key={index}
-                            initial="hidden"
-                            animate="visible"
-                            variants={container}
-                            transition={{
-                                delayChildren: index * 0.13,
-                                // delayChildren: index * 0.35,
-                                staggerChildren: 0.025,
-                                // staggerChildren: 0.05,
-                            }}
-                        >
-                            {word.split("").map((character, index) => {
-                                return (
-                                    <motion.span
-                                        aria-hidden="true"
-                                        key={index}
-                                        variants={child}
-                                        className="inline-block -mr-[0.01em]"
-                                    >
-                                        {character}
-                                    </motion.span>
-                                )
-                            })}
-                        </motion.span>
-                    )
-                })}
-            </h2>
-        )
-    }
-
-    return (
-        <motion.h2
-            style={{ display: "flex", overflow: "hidden" }}
-            role="heading"
-            variants={container}
-            initial="hidden"
-            animate="visible"
-            className="mt-10 text-4xl font-black text-black dark:text-neutral-100 py-5 pb-8 px-8 md:text-5xl"
-            {...props}
-        >
-            {letters.map((letter, index) => (
-                <motion.span key={index} variants={child}>
-                    {letter === " " ? "\u00A0" : letter}
-                </motion.span>
-            ))}
-        </motion.h2>
-    )
-}
-
-interface GlitchTextProps extends React.HTMLAttributes<HTMLDivElement> {
-    text: string
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"
-    textClassName?: string
-    containerClassName?: string
-    colors?: {
-        red: string
-        green: string
-        blue: string
-    }
-}
-
-const AnimatedGlitchText = React.forwardRef<HTMLDivElement, GlitchTextProps>(
-    ({
-        text,
-        as: Component = "h1",
-        className,
-        textClassName,
-        containerClassName,
-        colors = {
-            red: "#ff0000",
-            green: "#00ff00",
-            blue: "#0000ff"
-        },
-        ...props
-    }, ref) => {
-        return (
-            <div
-                ref={ref}
-                className={cn(
-                    "flex items-center justify-center p-4",
-                    "min-h-[200px]",
-                    className
-                )}
-                {...props}
-            >
-                <div className={cn(
-                    "relative",
-                    containerClassName
-                )}>
-                    <motion.div
-                        className={cn(
-                            "text-6xl font-bold absolute",
-                            "mix-blend-multiply dark:mix-blend-screen",
-                            textClassName
-                        )}
-                        animate={{
-                            x: [-2, 2, -2],
-                            y: [0, -1, 1],
-                            skew: [0, -2, 2],
-                            opacity: [1, 0.8, 0.9],
-                            color: [colors.red, colors.red, colors.red]
-                        }}
-                        transition={{
-                            duration: 0.15,
-                            repeat: Infinity,
-                            repeatType: "mirror",
-                            ease: "anticipate"
-                        }}
-                    >
-                        {text}
-                    </motion.div>
-                    <motion.div
-                        className={cn(
-                            "text-6xl font-bold absolute",
-                            "mix-blend-multiply dark:mix-blend-screen",
-                            textClassName
-                        )}
-                        animate={{
-                            x: [2, -2, 2],
-                            y: [1, -1, 0],
-                            skew: [-2, 2, 0],
-                            opacity: [0.9, 1, 0.8],
-                            color: [colors.green, colors.green, colors.green]
-                        }}
-                        transition={{
-                            duration: 0.13,
-                            repeat: Infinity,
-                            repeatType: "mirror",
-                            ease: "anticipate"
-                        }}
-                    >
-                        {text}
-                    </motion.div>
-                    <motion.div
-                        className={cn(
-                            "text-6xl font-bold",
-                            "mix-blend-multiply dark:mix-blend-screen",
-                            textClassName
-                        )}
-                        animate={{
-                            x: [-1, 1, -1],
-                            y: [-1, 1, 0],
-                            skew: [2, -2, 0],
-                            opacity: [0.8, 0.9, 1],
-                            color: [colors.blue, colors.blue, colors.blue]
-                        }}
-                        transition={{
-                            duration: 0.11,
-                            repeat: Infinity,
-                            repeatType: "mirror",
-                            ease: "anticipate"
-                        }}
-                    >
-                        {text}
-                    </motion.div>
-                </div>
-            </div>
-        )
-    }
-)
-AnimatedGlitchText.displayName = "AnimatedGlitchText"
-
-
-
-export {  AnimatedTextX }