vanish-effect/dist/index.d.ts

A lightweight JavaScript library that creates a Thanos-inspired disintegration effect for HTML elements in vanilla JS, React, and Next.js

import * as motion from 'motion';

/**
 * thanos.snap
 *
 * A lightweight library that creates a Thanos snap disintegration effect
 * for HTML elements, turning them into particles that float away.
 *
 * Usage:
 * ```
 * import { Thanos } from 'thanos.snap';
 *
 * // Basic usage
 * Thanos.snap(element);
 *
 * // With options
 * Thanos.snap(element, {
 *   direction: 'up',
 *   duration: 1.0,
 *   particleDensity: 1.5,
 *   randomness: 0.7
 * });
 *
 * // With vector direction (more flexible)
 * Thanos.snap(element, {
 *   vectorX: 0.7,  // Right-upward diagonal
 *   vectorY: -0.7, // Right-upward diagonal
 *   duration: 1.0,
 *   particleDensity: 1.5
 * });
 *
 * // In browser environments (via CDN or script tag)
 * // The Thanos class is available globally
 * Thanos.snap(element, options);
 * ```
 */
type Direction = 'up' | 'down' | 'left' | 'right';
/**
 * Options for the Thanos snap effect
 */
interface ThanosSnapOptions {
    /** Duration of the animation in seconds. Default: 0.8 */
    duration?: number;
    /** Direction in which particles will move. Default: 'up' */
    direction?: Direction;
    /** X-axis vector for particle movement (-1.0 to 1.0). Negative is left, positive is right. Default: 0 */
    vectorX?: number;
    /** Y-axis vector for particle movement (-1.0 to 1.0). Negative is up, positive is down. Default: -1 (up) */
    vectorY?: number;
    /** Callback function to execute when animation completes */
    onComplete?: () => void;
    /** Callback function to execute when animation starts */
    onStart?: () => void;
    /** Controls the density of particles (1.0 is normal, higher values create more particles). Default: 1.0 */
    particleDensity?: number;
    /** Controls the randomness of angles within a direction (0-1). Default: 0.5 */
    angleVariation?: number;
    /** Whether to remove the element from DOM or just hide it. Default: false */
    removeFromDOM?: boolean;
    /** Controls the randomness of particle movement (0-1). At 0, particles follow exact direction. At 1, particles go completely random/ballistic. Default: 0.5 */
    randomness?: number;
    /** Whether to animate the element's height collapsing. Particle animations will ALWAYS run regardless of this setting. Default: true */
    animated?: boolean;
}
declare global {
    interface Window {
        Motion: {
            animate: typeof motion.animate;
        };
        Thanos: {
            snap: (element: HTMLElement, options?: ThanosSnapOptions) => Promise<void>;
        };
        thanossnap: {
            snap: (element: HTMLElement, options?: ThanosSnapOptions) => Promise<void>;
        };
    }
}
declare class Thanos {
    private static defaultOptions;
    private static defaultInternalFadeInOptions;
    private static getVectorAngle;
    private static directionToVector;
    private static easeOutQuad;
    static snap(element: HTMLElement, options?: ThanosSnapOptions): Promise<void>;
    /**
     * Internal method to fade in an element
     * @param element The HTML element to animate
     * @param options Animation options
     * @returns Promise that resolves when animation completes
     * @private
     */
    private static _fadeIn;
}

export { Thanos };