@szum-tech/design-system/dist/components/typing-text/index.d.cts

Szum-Tech design system with tailwindcss support

import * as React from 'react';
import { MotionProps, UseInViewOptions } from 'motion/react';

type TypingTextAnimationVariant = "fadeIn" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown";

type TypingTextProps = Omit<MotionProps, "children"> & {
    /** Text to animate */
    text?: string;
    /** Array of texts to cycle through */
    texts?: string[];
    /** Typing speed in milliseconds */
    speed?: number;
    /** Delay before starting animation */
    delay?: number;
    /** Whether to show cursor */
    showCursor?: boolean;
    /** Cursor character */
    cursor?: string;
    /** Cursor className */
    cursorClassName?: string;
    /** Whether to loop through texts */
    loop?: boolean;
    /** Pause duration between loops */
    pauseDuration?: number;
    /** Custom className */
    className?: string;
    /** Callback when typing completes */
    onComplete?: () => void;
    /** Whether to start animation when component enters viewport */
    startOnView?: boolean;
    /** Whether to animate only once */
    once?: boolean;
    /** The animation preset to use */
    animation?: TypingTextAnimationVariant;
    /** Margin for in-view detection (rootMargin) */
    inViewMargin?: UseInViewOptions["margin"];
};
declare function TypingText({ text, texts, speed, delay, showCursor, cursorClassName, cursor, loop, pauseDuration, className, onComplete, startOnView, once, animation, inViewMargin, ...props }: TypingTextProps): React.JSX.Element;

export { TypingText, type TypingTextAnimationVariant, type TypingTextProps };