@gfazioli/mantine-text-animate/dist/types/TextAnimate.d.ts

The TextAnimate component allows you to animate text with various effects.

import React from 'react';
import { type BoxProps, type MantineSize, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
import { NumberTicker } from './NumberTicker/NumberTicker';
import { Spinner } from './Spinner/Spinner';
import { TextTicker } from './TextTicker/TextTicker';
import { Typewriter } from './Typewriter/Typewriter';
/**
 * Type defining how text should be split for animation
 * - text: Animate the entire text as one unit
 * - word: Animate each word separately
 * - character: Animate each character separately
 * - line: Animate each line separately (split by newlines)
 */
export type AnimationType = 'text' | 'word' | 'character' | 'line';
/**
 * Available animation variants
 */
export type AnimationVariant = 'fade' | 'blur' | 'scale' | 'slideUp' | 'slideDown' | 'slideUpElastic' | 'slideDownElastic' | 'slideLeft' | 'slideRight' | 'slideLeftElastic' | 'slideRightElastic' | 'blurUp' | 'blurDown';
/**
 * Animation direction
 */
type AnimationDirection = 'in' | 'out' | 'static' | 'none' | false | undefined;
interface AnimateProps {
    /**
     * Controls the distance for slide animations (in pixels)
     * @default 20
     */
    translateDistance?: MantineSize;
    /**
     * Controls the scale factor for scale animations
     * For scaleUp: initial scale = 1 - scaleAmount (e.g., 0.8 means start at 0.2)
     * For scaleDown: initial scale = 1 + scaleAmount (e.g., 0.8 means start at 1.8)
     * @default 0.8
     */
    scaleAmount?: number;
    /**
     * Controls the blur amount for blur animations (in pixels)
     * @default 10
     */
    blurAmount?: MantineSize;
}
export type TextAnimateStylesNames = 'root' | 'segment';
export type TextAnimateCssVariables = {
    root: '--text-animate-translation-distance' | '--text-animate-blur-amount' | '--text-animate-scale-amount';
};
export type TextAnimateDirection = 'horizontal' | 'vertical';
export type TextAnimateIn = 'positive' | 'negative';
export type TextAnimateOut = TextAnimateIn;
export interface TextAnimateBaseProps {
    /**
     * The text content to animate
     */
    children: string;
    /**
     * The class name to be applied to each segment
     */
    segmentClassName?: string;
    /**
     * The delay before the animation starts (in seconds)
     * @default 0
     */
    delay?: number;
    /**
     * The duration of the animation (in seconds)
     * @default 0.3
     */
    duration?: number;
    /**
     * How to split the text for animation
     * @default "word"
     */
    by?: AnimationType;
    /**
     * Controls the animation direction
     * - `in`: Animate elements in (appear)
     * - `out`: Animate elements out (disappear)
     * - `static`: Do not animate
     * - `none`: Do not animate
     * @default undefined (no animation)
     */
    animate?: AnimationDirection;
    /**
     * The animation preset to use
     * @default "fadeIn"
     */
    animation?: AnimationVariant;
    /**
     * The delay between each segment's animation (in seconds)
     * This controls the staggered timing between segments
     * @default Based on animation type (0.03-0.06)
     */
    segmentDelay?: number;
    /**
     * Animation properties to control intensity of animations
     * @default { translateDistance: 20, scaleAmount: 0.8, blurAmount: 10 }
     */
    animateProps?: AnimateProps;
    /**
     *  Callback function to be called when the animation starts
     * @param animate The direction of the animation
     */
    onAnimationStart?: (animate: 'in' | 'out') => void;
    /**
     * Callback function to be called when the animation ends
     * @param animate The direction of the animation
     */
    onAnimationEnd?: (animate: 'in' | 'out') => void;
}
export interface TextAnimateProps extends BoxProps, TextAnimateBaseProps, StylesApiProps<TextAnimateFactory> {
}
export type TextAnimateFactory = PolymorphicFactory<{
    props: TextAnimateProps;
    defaultComponent: 'div';
    defaultRef: HTMLDivElement;
    stylesNames: TextAnimateStylesNames;
    vars: TextAnimateCssVariables;
    staticComponents: {
        Typewriter: typeof Typewriter;
        Spinner: typeof Spinner;
        NumberTicker: typeof NumberTicker;
        TextTicker: typeof TextTicker;
    };
}>;
export declare const TextAnimate: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, TextAnimateProps>) => React.ReactElement) & Omit<React.FunctionComponent<(TextAnimateProps & {
    component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof TextAnimateProps> & {
    ref?: any;
    renderRoot?: (props: any) => any;
}) | (TextAnimateProps & {
    component: React.ElementType;
    renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
    props: TextAnimateProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: TextAnimateStylesNames;
    vars: TextAnimateCssVariables;
    staticComponents: {
        Typewriter: typeof Typewriter;
        Spinner: typeof Spinner;
        NumberTicker: typeof NumberTicker;
        TextTicker: typeof TextTicker;
    };
}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
    props: TextAnimateProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: TextAnimateStylesNames;
    vars: TextAnimateCssVariables;
    staticComponents: {
        Typewriter: typeof Typewriter;
        Spinner: typeof Spinner;
        NumberTicker: typeof NumberTicker;
        TextTicker: typeof TextTicker;
    };
}> & import("@mantine/core/lib/core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
    props: TextAnimateProps;
    defaultComponent: "div";
    defaultRef: HTMLDivElement;
    stylesNames: TextAnimateStylesNames;
    vars: TextAnimateCssVariables;
    staticComponents: {
        Typewriter: typeof Typewriter;
        Spinner: typeof Spinner;
        NumberTicker: typeof NumberTicker;
        TextTicker: typeof TextTicker;
    };
}> & {
    Typewriter: typeof Typewriter;
    Spinner: typeof Spinner;
    NumberTicker: typeof NumberTicker;
    TextTicker: typeof TextTicker;
};
export {};