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

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

/**
 * 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 {
}
/**
 * Intensity preset configuration
 */
type IntensityPreset = Partial<Pick<GlitchOptions, 'duration' | 'revealRate' | 'glitchRate' | 'effects'>>;
/**
 * Internal animation state
 */
interface AnimationState {
    isRunning: boolean;
    startTime: number;
    currentText: string;
    revealedIndices: Set<number>;
    animationId?: number;
}
/**
 * Glitch instance interface
 */
interface GlitchInstance {
    start: () => void;
    stop: () => void;
    reset: () => void;
    isRunning: () => boolean;
    destroy: () => void;
}

/**
 * Core glitch engine - framework agnostic
 */
declare class GlitchEngine {
    private element;
    private config;
    private state;
    private originalText;
    private targetText;
    private characterSet;
    private timingFunction;
    private colorShiftConfig;
    private currentColorIndex;
    constructor(element: HTMLElement, config: GlitchConfig);
    /**
     * Start the glitch animation
     */
    start(): void;
    /**
     * Stop the animation
     */
    stop(): void;
    /**
     * Reset to original state
     */
    reset(): void;
    /**
     * Check if animation is running
     */
    isRunning(): boolean;
    /**
     * Destroy the instance and clean up
     */
    destroy(): void;
    /**
     * Main animation loop
     */
    private animate;
    /**
     * Generate text for current animation frame
     */
    private generateFrameText;
    /**
     * Get random character for specific position (maintains some consistency)
     */
    private getRandomCharacterForPosition;
    /**
     * Update element text content
     */
    private updateElementText;
    /**
     * Update color shifting effect
     */
    private updateColorShift;
    /**
     * Apply or remove visual effects
     */
    private applyVisualEffects;
}
/**
 * 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>;

/**
 * Predefined character sets for glitch effect
 */
declare const CHARACTER_SETS: {
    readonly letters: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    readonly numbers: "0123456789";
    readonly symbols: "!@#$%^&*()_+-=[]{}|;':\",./<>?`~";
    readonly alphanumeric: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    readonly all: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;':\",./<>?`~";
};
/**
 * Timing functions for animation easing
 */
declare const TIMING_FUNCTIONS: {
    readonly linear: (t: number) => number;
    readonly easeIn: (t: number) => number;
    readonly easeOut: (t: number) => number;
    readonly easeInOut: (t: number) => number;
};
/**
 * Default configuration values based on intensity
 */
declare const INTENSITY_PRESETS: {
    readonly low: {
        readonly duration: 800;
        readonly revealRate: 0.7;
        readonly glitchRate: 0.3;
        readonly effects: {
            readonly shake: false;
            readonly flicker: false;
        };
    };
    readonly medium: {
        readonly duration: 1200;
        readonly revealRate: 0.5;
        readonly glitchRate: 0.6;
        readonly effects: {
            readonly shake: true;
            readonly flicker: false;
        };
    };
    readonly high: {
        readonly duration: 1800;
        readonly revealRate: 0.3;
        readonly glitchRate: 0.9;
        readonly effects: {
            readonly shake: true;
            readonly flicker: true;
            readonly colorShift: true;
        };
    };
};
/**
 * Get character set string from CharacterSet type or custom string
 */
declare function getCharacterSet(characters: CharacterSet | string): string;
/**
 * Get timing function from TimingFunction type or custom function
 */
declare function getTimingFunction(timing: TimingFunction): (_progress: number) => number;
/**
 * Check if user prefers reduced motion
 */
declare function prefersReducedMotion(): boolean;
/**
 * Get intensity preset configuration
 */
declare function getIntensityPreset(intensity: IntensityLevel): IntensityPreset;

export { CHARACTER_SETS, GlitchEngine, INTENSITY_PRESETS, TIMING_FUNCTIONS, createGlitch, getCharacterSet, getIntensityPreset, getTimingFunction, glitch, prefersReducedMotion };
export type { AnimationState, CharacterSet, GlitchCallbacks, GlitchConfig, GlitchInstance, GlitchOptions, IntensityLevel, TimingFunction, TriggerType, VisualEffects };