@gfazioli/mantine-text-animate/dist/types/SplitFlap/use-split-flap.d.ts

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

/**
 * Represents the state of a single character in the split-flap display
 */
export interface SplitFlapCharacter {
    /** The character currently displayed */
    current: string;
    /** The next character to flip to */
    next: string;
    /** Whether this character is currently mid-flip */
    isFlipping: boolean;
    /** Whether this character has reached its target */
    settled: boolean;
    /** Key that changes on every flip step — used to force-remount flap elements so CSS animations restart */
    flipKey: number;
}
/**
 * Base props shared between SplitFlap component and useSplitFlap hook
 */
export interface SplitFlapBaseProps {
    /**
     * The target text to display (will be uppercased)
     */
    value: string;
    /**
     * Whether the animation should be active
     * @default true
     */
    animate?: boolean;
    /**
     * Speed multiplier (higher = faster)
     * @default 1
     */
    speed?: number;
    /**
     * Character set to cycle through
     * @default 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 '
     */
    characterSet?: string;
    /**
     * Duration of each flip in milliseconds
     * @default 300
     */
    flipDuration?: number;
    /**
     * Delay between each character starting its animation in milliseconds
     * @default 80
     */
    staggerDelay?: number;
    /**
     * Delay before the animation starts in seconds
     * @default 0
     */
    delay?: number;
    /**
     * Callback fired when all characters have settled
     */
    onCompleted?: () => void;
}
/**
 * Hook props interface extending the base props
 */
export interface UseSplitFlapProps extends SplitFlapBaseProps {
}
/**
 * Return value interface for the useSplitFlap hook
 */
export interface UseSplitFlapResult {
    /** Current state of each character */
    characters: SplitFlapCharacter[];
    /** Start or restart the animation */
    start: () => void;
    /** Stop the animation, keeping current state */
    stop: () => void;
    /** Reset all characters to space */
    reset: () => void;
    /** Whether the animation is currently running */
    isAnimating: boolean;
}
/**
 * Hook that provides split-flap (airport departure board) animation functionality.
 *
 * Each character cycles through the characterSet in order until reaching
 * the target character, with staggered start times for a realistic effect.
 */
export declare function useSplitFlap({ value, animate, speed: _speed, characterSet, flipDuration, staggerDelay, delay, onCompleted, }: UseSplitFlapProps): UseSplitFlapResult;