aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
102 lines • 2.88 kB
TypeScript
import React from 'react';
export type AtmosphereType = 'subtle' | 'nebula' | 'aurora' | 'particles' | 'waves' | 'gradient' | 'ambient' | 'custom';
export type InteractionMode = 'none' | 'mouse' | 'scroll' | 'audio' | 'time';
export interface DynamicAtmosphereProps {
/**
* The type of atmospheric effect
*/
type?: AtmosphereType;
/**
* Primary color for the atmosphere
*/
primaryColor?: string;
/**
* Secondary color for the atmosphere
*/
secondaryColor?: string;
/**
* Accent color for the atmosphere
*/
accentColor?: string;
/**
* The intensity of the effect (0-1)
*/
intensity?: number;
/**
* The speed of the animation (0-1)
*/
speed?: number;
/**
* The interaction mode for the atmosphere
*/
interactionMode?: InteractionMode;
/**
* The sensitivity of the interaction (0-1)
*/
interactionSensitivity?: number;
/**
* If true, the atmosphere will fill its container
*/
fullSize?: boolean;
/**
* Width of the atmosphere
*/
width?: string | number;
/**
* Height of the atmosphere
*/
height?: string | number;
/**
* Optional CSS class name
*/
className?: string;
/**
* Z-index for the atmosphere
*/
zIndex?: number;
/**
* The position of the atmosphere
*/
position?: 'absolute' | 'fixed' | 'relative';
/**
* If true, respect reduced motion preferences
*/
respectReducedMotion?: boolean;
/**
* The number of elements to create for particle-based effects
*/
particleCount?: number;
/**
* Optional custom element to use for particles
*/
particleElement?: React.ReactNode;
/**
* If true, the atmosphere will have a blur effect
*/
blur?: boolean;
/**
* The strength of the blur effect (px)
*/
blurStrength?: number;
/**
* If true, the atmosphere will have a noise texture
*/
noise?: boolean;
/** Glass surface intent */
intent?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
/** Glass surface elevation */
elevation?: 'level1' | 'level2' | 'level3' | 'level4';
/** Performance tier */
tier?: 'low' | 'medium' | 'high';
/** Optional inline styles applied to the container */
style?: React.CSSProperties;
}
/**
* DynamicAtmosphere Component
*
* A component that creates dynamic atmospheric background effects.
*/
export declare const DynamicAtmosphere: React.ForwardRefExoticComponent<DynamicAtmosphereProps & React.RefAttributes<HTMLDivElement>>;
export declare const GlassDynamicAtmosphere: React.ForwardRefExoticComponent<DynamicAtmosphereProps & React.RefAttributes<HTMLDivElement>>;
export default DynamicAtmosphere;
//# sourceMappingURL=GlassDynamicAtmosphere.d.ts.map