aura-glass/dist/hooks/extended/useZSpaceAnimation.d.ts

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

import React from 'react';
import { ZSpaceManager } from '../../core/mixins/zSpaceLayer';
import { SpringConfig } from '../../animations/hooks/useMultiSpringBasic';
export interface ZSpaceLayer {
    id: string;
    zIndex: number;
    elevation: number;
    opacity: number;
    scale: number;
    blur: number;
    transform: string;
}
export interface ZSpaceAnimationConfig {
    /** Enable z-space animations */
    enabled?: boolean;
    /** Spring configuration for z-space transitions */
    springConfig?: SpringConfig;
    /** Default transition duration */
    duration?: number;
    /** Enable layered animations */
    layered?: boolean;
    /** Layer stagger delay */
    staggerDelay?: number;
    /** Maximum concurrent animations */
    maxConcurrent?: number;
    /** Enable depth-based scaling */
    depthScaling?: boolean;
    /** Depth scaling factor */
    depthScaleFactor?: number;
    /** Enable blur effects based on depth */
    depthBlur?: boolean;
    /** Maximum blur amount */
    maxBlur?: number;
}
export type ZSpaceConfig = ZSpaceAnimationConfig;
export declare function useZSpaceAnimation(initialLayers?: ZSpaceLayer[], config?: ZSpaceAnimationConfig): {
    layers: ZSpaceLayer[];
    animatingLayers: Set<string>;
    addLayer: (layer: Omit<ZSpaceLayer, "zIndex">, options?: {
        animateIn?: boolean;
        initialElevation?: number;
        duration?: number;
    }) => void;
    removeLayer: (layerId: string, options?: {
        animateOut?: boolean;
        duration?: number;
        onComplete?: () => void;
    }) => void;
    updateLayer: (layerId: string, updates: Partial<ZSpaceLayer>, options?: {
        animate?: boolean;
        duration?: number;
    }) => void;
    getLayer: (layerId: string) => ZSpaceLayer | undefined;
    getAllLayers: () => ZSpaceLayer[];
    animateToZSpace: (layerId: string, targetElevation: number, options?: {
        duration?: number;
        easing?: string;
        onComplete?: () => void;
    }) => void;
    animateLayeredTransition: (layerUpdates: Array<{
        id: string;
        elevation: number;
        delay?: number;
    }>, globalOptions?: {
        staggerDelay?: number;
        duration?: number;
    }) => void;
    bringToFront: (layerId: string, options?: {
        duration?: number;
        onComplete?: () => void;
    }) => void;
    sendToBack: (layerId: string, options?: {
        duration?: number;
        onComplete?: () => void;
    }) => void;
    createDepthStack: (layerIds: string[], baseElevation?: number, elevationStep?: number) => void;
    animateFocusTransition: (focusedLayerId: string, backgroundLayers: string[], options?: {
        focusElevation?: number;
        backgroundElevation?: number;
        duration?: number;
    }) => void;
    getLayerStyles: (layerId: string) => {};
    isLayerAnimating: (layerId: string) => boolean;
    getAnimationProgress: (layerId: string) => number;
    config: {
        enabled: boolean;
        springConfig: SpringConfig;
        duration: number;
        layered: boolean;
        staggerDelay: number;
        maxConcurrent: number;
        depthScaling: boolean;
        depthScaleFactor: number;
        depthBlur: boolean;
        maxBlur: number;
    };
    zSpaceManager: ZSpaceManager;
};
export declare function useParallaxZSpace(layers: Array<{
    id: string;
    depth: number;
    content: React.ReactNode;
}>, config?: ZSpaceAnimationConfig & {
    mouseInfluence?: number;
    scrollInfluence?: number;
}): {
    mousePosition: {
        x: number;
        y: number;
    };
    scrollPosition: number;
    layers: ZSpaceLayer[];
    animatingLayers: Set<string>;
    addLayer: (layer: Omit<ZSpaceLayer, "zIndex">, options?: {
        animateIn?: boolean;
        initialElevation?: number;
        duration?: number;
    }) => void;
    removeLayer: (layerId: string, options?: {
        animateOut?: boolean;
        duration?: number;
        onComplete?: () => void;
    }) => void;
    updateLayer: (layerId: string, updates: Partial<ZSpaceLayer>, options?: {
        animate?: boolean;
        duration?: number;
    }) => void;
    getLayer: (layerId: string) => ZSpaceLayer | undefined;
    getAllLayers: () => ZSpaceLayer[];
    animateToZSpace: (layerId: string, targetElevation: number, options?: {
        duration?: number;
        easing?: string;
        onComplete?: () => void;
    }) => void;
    animateLayeredTransition: (layerUpdates: Array<{
        id: string;
        elevation: number;
        delay?: number;
    }>, globalOptions?: {
        staggerDelay?: number;
        duration?: number;
    }) => void;
    bringToFront: (layerId: string, options?: {
        duration?: number;
        onComplete?: () => void;
    }) => void;
    sendToBack: (layerId: string, options?: {
        duration?: number;
        onComplete?: () => void;
    }) => void;
    createDepthStack: (layerIds: string[], baseElevation?: number, elevationStep?: number) => void;
    animateFocusTransition: (focusedLayerId: string, backgroundLayers: string[], options?: {
        focusElevation?: number;
        backgroundElevation?: number;
        duration?: number;
    }) => void;
    getLayerStyles: (layerId: string) => {};
    isLayerAnimating: (layerId: string) => boolean;
    getAnimationProgress: (layerId: string) => number;
    config: {
        enabled: boolean;
        springConfig: SpringConfig;
        duration: number;
        layered: boolean;
        staggerDelay: number;
        maxConcurrent: number;
        depthScaling: boolean;
        depthScaleFactor: number;
        depthBlur: boolean;
        maxBlur: number;
    };
    zSpaceManager: ZSpaceManager;
};
export declare function useCardStackZSpace(cardCount: number, config?: ZSpaceAnimationConfig & {
    cardSpacing?: number;
    maxRotation?: number;
    interactionRadius?: number;
}): {
    hoveredCard: number | null;
    handleCardHover: (cardIndex: number) => void;
    handleCardLeave: () => void;
    cardCount: number;
    layers: ZSpaceLayer[];
    animatingLayers: Set<string>;
    addLayer: (layer: Omit<ZSpaceLayer, "zIndex">, options?: {
        animateIn?: boolean;
        initialElevation?: number;
        duration?: number;
    }) => void;
    removeLayer: (layerId: string, options?: {
        animateOut?: boolean;
        duration?: number;
        onComplete?: () => void;
    }) => void;
    updateLayer: (layerId: string, updates: Partial<ZSpaceLayer>, options?: {
        animate?: boolean;
        duration?: number;
    }) => void;
    getLayer: (layerId: string) => ZSpaceLayer | undefined;
    getAllLayers: () => ZSpaceLayer[];
    animateToZSpace: (layerId: string, targetElevation: number, options?: {
        duration?: number;
        easing?: string;
        onComplete?: () => void;
    }) => void;
    animateLayeredTransition: (layerUpdates: Array<{
        id: string;
        elevation: number;
        delay?: number;
    }>, globalOptions?: {
        staggerDelay?: number;
        duration?: number;
    }) => void;
    bringToFront: (layerId: string, options?: {
        duration?: number;
        onComplete?: () => void;
    }) => void;
    sendToBack: (layerId: string, options?: {
        duration?: number;
        onComplete?: () => void;
    }) => void;
    createDepthStack: (layerIds: string[], baseElevation?: number, elevationStep?: number) => void;
    animateFocusTransition: (focusedLayerId: string, backgroundLayers: string[], options?: {
        focusElevation?: number;
        backgroundElevation?: number;
        duration?: number;
    }) => void;
    getLayerStyles: (layerId: string) => {};
    isLayerAnimating: (layerId: string) => boolean;
    getAnimationProgress: (layerId: string) => number;
    config: {
        enabled: boolean;
        springConfig: SpringConfig;
        duration: number;
        layered: boolean;
        staggerDelay: number;
        maxConcurrent: number;
        depthScaling: boolean;
        depthScaleFactor: number;
        depthBlur: boolean;
        maxBlur: number;
    };
    zSpaceManager: ZSpaceManager;
};
export declare function useDepthNavigation(navigationItems: Array<{
    id: string;
    label: string;
    depth: number;
}>, config?: ZSpaceAnimationConfig): {
    activeItem: string | null;
    navigationPath: string[];
    navigateTo: (itemId: string) => void;
    goBack: () => void;
    goHome: () => void;
    canGoBack: boolean;
    layers: ZSpaceLayer[];
    animatingLayers: Set<string>;
    addLayer: (layer: Omit<ZSpaceLayer, "zIndex">, options?: {
        animateIn?: boolean;
        initialElevation?: number;
        duration?: number;
    }) => void;
    removeLayer: (layerId: string, options?: {
        animateOut?: boolean;
        duration?: number;
        onComplete?: () => void;
    }) => void;
    updateLayer: (layerId: string, updates: Partial<ZSpaceLayer>, options?: {
        animate?: boolean;
        duration?: number;
    }) => void;
    getLayer: (layerId: string) => ZSpaceLayer | undefined;
    getAllLayers: () => ZSpaceLayer[];
    animateToZSpace: (layerId: string, targetElevation: number, options?: {
        duration?: number;
        easing?: string;
        onComplete?: () => void;
    }) => void;
    animateLayeredTransition: (layerUpdates: Array<{
        id: string;
        elevation: number;
        delay?: number;
    }>, globalOptions?: {
        staggerDelay?: number;
        duration?: number;
    }) => void;
    bringToFront: (layerId: string, options?: {
        duration?: number;
        onComplete?: () => void;
    }) => void;
    sendToBack: (layerId: string, options?: {
        duration?: number;
        onComplete?: () => void;
    }) => void;
    createDepthStack: (layerIds: string[], baseElevation?: number, elevationStep?: number) => void;
    animateFocusTransition: (focusedLayerId: string, backgroundLayers: string[], options?: {
        focusElevation?: number;
        backgroundElevation?: number;
        duration?: number;
    }) => void;
    getLayerStyles: (layerId: string) => {};
    isLayerAnimating: (layerId: string) => boolean;
    getAnimationProgress: (layerId: string) => number;
    config: {
        enabled: boolean;
        springConfig: SpringConfig;
        duration: number;
        layered: boolean;
        staggerDelay: number;
        maxConcurrent: number;
        depthScaling: boolean;
        depthScaleFactor: number;
        depthBlur: boolean;
        maxBlur: number;
    };
    zSpaceManager: ZSpaceManager;
};
export type ZSpaceAnimationResult = ReturnType<typeof useZSpaceAnimation>;
//# sourceMappingURL=useZSpaceAnimation.d.ts.map