@gfazioli/mantine-text-animate/dist/types/TextTicker/use-text-ticker.d.ts

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

/**
 * Available easing functions for the animation
 */
export type TextTickerEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
/**
 * Character sets for random characters
 */
export type TextTickerCharacterSet = 'alphanumeric' | 'alphabetic' | 'numeric' | 'symbols' | 'custom';
/**
 * Direction for revealing the target text
 */
export type TextTickerRevealDirection = 'left-to-right' | 'right-to-left' | 'center-out' | 'random';
/**
 * Initial text display options
 */
export type TextTickerInitialDisplay = 'none' | 'random' | 'target';
/**
 * Base props shared between TextTicker component and useTextTicker hook
 */
export interface TextTickerBaseProps {
    /**
     * The target text to animate to
     */
    value: string;
    /**
     * Initial text display option
     * - `none`: Display nothing until animation starts
     * - `random`: Display random characters until animation starts
     * - `target`: Display the target text immediately
     * @default "random"
     */
    initialText?: TextTickerInitialDisplay;
    /**
     * Whether the animation should be active
     * @default true
     */
    animate?: boolean;
    /**
     * Character set to use for random characters
     * @default "alphanumeric"
     */
    characterSet?: TextTickerCharacterSet;
    /**
     * Custom characters to use when characterSet is `custom`
     * @default ""
     */
    customCharacters?: string;
    /**
     * Delay before starting the animation in seconds
     * @default 0
     */
    delay?: number;
    /**
     * Animation speed multiplier (higher = faster)
     * @default 1
     */
    speed?: number;
    /**
     * Easing function for the animation
     * @default "ease-out"
     */
    easing?: TextTickerEasing;
    /**
     * Speed multiplier for random character changes (higher = more frequent changes)
     * @default 1
     */
    randomChangeSpeed?: number;
    /**
     * Direction for revealing the target text
     * @default "left-to-right"
     */
    revealDirection?: TextTickerRevealDirection;
    /**
     * When set, enables "scramble" mode: each character cycles through random characters
     * for exactly this duration (in ms) before settling on the target.
     * This replaces the default probabilistic reveal with a deterministic per-character timer.
     * @example 800
     */
    scrambleDuration?: number;
    /**
     * Delay in milliseconds between each character starting its scramble animation.
     * Only used when `scrambleDuration` is set.
     * Creates a wave-like "decryption" effect from the reveal direction.
     * @default 50
     */
    staggerDelay?: number;
    /**
     * Callback function called when animation completes
     */
    onCompleted?: () => void;
}
/**
 * Hook props interface extending the base props
 */
export interface UseTextTickerProps extends TextTickerBaseProps {
}
/**
 * Return value interface for the useTextTicker hook
 */
export interface UseTextTickerResult {
    /**
     * The current text being displayed
     */
    text: string;
    /**
     * Function to start the animation
     */
    start: () => void;
    /**
     * Function to stop the animation while keeping the current text
     */
    stop: () => void;
    /**
     * Function to reset the animation to the initial text
     */
    reset: () => void;
    /**
     * Whether the animation is currently running
     */
    isAnimating: boolean;
}
/**
 * Hook that provides text ticker animation functionality
 *
 * This hook powers the TextTicker component and can be used independently
 * for more advanced use cases.
 */
export declare function useTextTicker({ value, initialText, animate, characterSet, customCharacters, delay, speed, easing, randomChangeSpeed, revealDirection, scrambleDuration, staggerDelay, onCompleted, }: UseTextTickerProps): UseTextTickerResult;