aura-glass/dist/components/surfaces/GlassDepthLayer.d.ts

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

import { HTMLMotionProps } from "framer-motion";
import React from "react";
export type DepthLayer = "background" | "far" | "mid-far" | "mid" | "mid-near" | "near" | "foreground" | "overlay";
export interface GlassDepthConfig {
    layer: DepthLayer;
    opacity: number;
    blur: number;
    brightness: number;
    zIndex: number;
    transform: string;
    shadow: string;
}
interface DepthLayerProps extends Omit<HTMLMotionProps<"div">, "style"> {
    layer: DepthLayer;
    customConfig?: Partial<GlassDepthConfig>;
    children: React.ReactNode;
    enableParallax?: boolean;
    parallaxStrength?: number;
    enableHover?: boolean;
    hoverLift?: number;
    className?: string;
}
declare const DEFAULT_DEPTH_CONFIGS: Record<DepthLayer, GlassDepthConfig>;
export declare const GlassDepthLayer: React.ForwardRefExoticComponent<Omit<DepthLayerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
interface DepthSceneProps {
    children: React.ReactNode;
    perspective?: number;
    className?: string;
}
export declare const GlassDepthScene: React.FC<DepthSceneProps>;
interface LayeredGlassStackProps {
    layers: {
        content: React.ReactNode;
        layer: DepthLayer;
        config?: Partial<GlassDepthConfig>;
    }[];
    enableParallax?: boolean;
    enableHover?: boolean;
    className?: string;
}
export declare const LayeredGlassStack: React.FC<LayeredGlassStackProps>;
export declare const useDepthAnimation: (layer: DepthLayer) => {
    initial: {
        opacity: number;
        z: number;
        scale: number;
    };
    animate: {
        opacity: number;
        z: number;
        scale: number;
        transition: {
            duration: number;
            ease: number[];
            delay: number;
        };
    };
    exit: {
        opacity: number;
        z: number;
        scale: number;
        transition: {
            duration: number;
            ease: string;
        };
    };
};
export { DEFAULT_DEPTH_CONFIGS };
//# sourceMappingURL=GlassDepthLayer.d.ts.map