glitch-text-effect/dist/react.d.ts

A lightweight, customizable glitch text effect library with zero dependencies. Framework-agnostic core with React wrapper.

import React from 'react';

/**
 * Character sets for glitch effect randomization
 */
type CharacterSet = 'letters' | 'numbers' | 'symbols' | 'alphanumeric' | 'all';
/**
 * Animation trigger types
 */
type TriggerType = 'hover' | 'click' | 'intersection' | 'manual';
/**
 * Intensity levels for glitch effect
 */
type IntensityLevel = 'low' | 'medium' | 'high';
/**
 * Timing function types
 */
type TimingFunction = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | ((_progress: number) => number);
/**
 * Color shift configuration
 */
interface ColorShiftConfig {
    /** Enable color shifting */
    enabled: boolean;
    /** Array of hex colors to cycle through */
    colors?: string[];
    /** Animation speed multiplier */
    speed?: number;
}
/**
 * Visual effects that can be applied during glitch
 */
interface VisualEffects {
    shake?: boolean;
    flicker?: boolean;
    colorShift?: boolean | ColorShiftConfig;
    scalePulse?: boolean;
}
/**
 * Core configuration options for glitch effect
 */
interface GlitchOptions {
    /** Source text to transform from */
    from: string;
    /** Target text to transform to */
    to: string;
    /** Animation duration in milliseconds (100-5000) */
    duration?: number;
    /** How the animation is triggered */
    trigger?: TriggerType;
    /** Intensity of the glitch effect */
    intensity?: IntensityLevel;
    /** Character sets to use for randomization */
    characters?: CharacterSet | string;
    /** Animation timing function */
    timing?: TimingFunction;
    /** Rate at which characters are revealed (0-1) */
    revealRate?: number;
    /** Frequency of character randomization (0-1) */
    glitchRate?: number;
    /** Visual effects to apply */
    effects?: VisualEffects;
    /** Respect user's reduced motion preference */
    respectReducedMotion?: boolean;
    /** Custom CSS classes to apply */
    className?: string;
}
/**
 * Animation lifecycle callbacks
 */
interface GlitchCallbacks {
    onStart?: () => void;
    onProgress?: (_progressValue: number) => void;
    onComplete?: () => void;
}
/**
 * Complete glitch configuration
 */
interface GlitchConfig extends GlitchOptions, GlitchCallbacks {
}
/**
 * Glitch instance interface
 */
interface GlitchInstance {
    start: () => void;
    stop: () => void;
    reset: () => void;
    isRunning: () => boolean;
    destroy: () => void;
}
/**
 * React component props
 */
interface GlitchTextProps extends Omit<GlitchConfig, 'trigger'> {
    /** HTML element type to render */
    as?: keyof JSX.IntrinsicElements;
    /** How the animation is triggered */
    trigger?: TriggerType;
    /** CSS class name */
    className?: string;
    /** Children content */
    children?: React.ReactNode;
}

/**
 * React component wrapper for the glitch text effect
 */
declare const GlitchText: React.ForwardRefExoticComponent<GlitchTextProps & React.RefAttributes<HTMLElement>>;
/**
 * Hook for manual control of glitch effect
 */
declare function useGlitchText(config: Omit<GlitchTextProps, 'trigger'> & {
    from: string;
    to: string;
}): {
    ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
    start: () => void;
    stop: () => void;
    reset: () => void;
    isRunning: () => boolean;
};

/**
 * Factory function to create glitch instance
 */
declare function createGlitch(element: HTMLElement, config: GlitchConfig): GlitchInstance;
/**
 * Convenience function for quick glitch effect
 */
declare function glitch(element: HTMLElement, config: GlitchConfig): Promise<void>;

export { GlitchText, createGlitch, glitch, useGlitchText };
export type { CharacterSet, GlitchConfig, GlitchInstance, GlitchOptions, GlitchTextProps, IntensityLevel, TimingFunction, TriggerType, VisualEffects };