@szum-tech/design-system/dist/components/word-rotate/index.d.cts

Szum-Tech design system with tailwindcss support

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

type WordRotateAnimationStyle = "fade" | "slide-up" | "slide-down" | "scale" | "flip";

type WordRotateProps = Omit<MotionProps, "children"> & {
    words: string[];
    /** Duration in ms each word is visible */
    duration?: number;
    /** Animation style for word transitions */
    animationStyle?: WordRotateAnimationStyle;
    /** Whether to loop through words */
    loop?: boolean;
    /** Duration in ms between word transitions */
    pauseDuration?: number;
    /** Custom className for the word */
    className?: string;
    /** Custom className for the container */
    containerClassName?: string;
    /** Whether to start animation when component enters viewport */
    startOnView?: boolean;
    /** Whether to animate only once */
    once?: boolean;
    /** Margin for in-view detection (rootMargin) */
    inViewMargin?: UseInViewOptions["margin"];
};
declare function WordRotate({ words, duration, animationStyle, loop, className, containerClassName, pauseDuration, startOnView, once, inViewMargin, ...props }: WordRotateProps): React.JSX.Element;

export { WordRotate, type WordRotateAnimationStyle, type WordRotateProps };