aura-glass/dist/esm/components/backgrounds/AtmosphericBackground.js

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

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useState, useRef, useEffect } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { useMotionPreferenceContext } from '../../contexts/MotionPreferenceContext.js';
import { useA11yId } from '../../utils/a11y.js';
import styles from './AtmosphericBackground.module.css.js';

// Default gradient colors
const defaultGradientColors = ['var(--glass-color-primary, 0.5)',
// Blue
'rgba(99, 102, 241, 0.5)',
// Indigo
'rgba(139, 92, 246, 0.5)',
// Purple
'rgba(244, 114, 182, 0.5)' // Pink
];
/**
 * AtmosphericBackground Component Implementation
 */
const AtmosphericBackgroundComponent = (props, ref) => {
  const {
    children,
    className,
    style,
    baseColor = 'rgba(10, 10, 20, 0.8)',
    gradientColors = defaultGradientColors,
    intensity = 0.7,
    animate = true,
    animationDuration = 15,
    interactive = false,
    blur = false,
    blurAmount = 5,
    intent = 'neutral',
    elevation = 'level2',
    tier = 'medium',
    respectMotionPreference = true,
    ...rest
  } = props;
  // Accessibility and motion preferences
  const componentId = useA11yId('atmospheric-bg');
  const prefersReducedMotion = useReducedMotion();
  const {
    prefersReducedMotion: motionPrefersReduced
  } = useMotionPreferenceContext();
  // Determine if motion should be reduced based on all preferences
  const shouldReduceMotion = respectMotionPreference && (prefersReducedMotion || motionPrefersReduced);
  // State for mouse position
  const [mousePosition, setMousePosition] = useState({
    x: 50,
    y: 50
  });
  // Ref for background container
  const containerRef = useRef(null);
  // Handle mouse movement for interactive mode
  useEffect(() => {
    if (!interactive || shouldReduceMotion) return;
    const handleMouseMove = e => {
      if (!containerRef.current) return;
      const rect = containerRef.current.getBoundingClientRect();
      // Calculate mouse position as percentage
      const x = (e.clientX - rect.left) / rect.width * 100;
      const y = (e.clientY - rect.top) / rect.height * 100;
      setMousePosition({
        x,
        y
      });
    };
    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, [interactive, shouldReduceMotion]);
  // Handle forwarded ref
  const setRefs = element => {
    if (containerRef.current !== element) {
      containerRef.current = element;
    }
    // Handle the forwarded ref
    if (typeof ref === 'function') {
      ref(element);
    } else if (ref) {
      ref.current = element;
    }
  };
  const gradientStyle = {
    backgroundColor: baseColor,
    backgroundImage: `linear-gradient(125deg, ${gradientColors.join(', ')})`,
    opacity: intensity
  };
  if (interactive && !shouldReduceMotion) {
    gradientStyle.backgroundPosition = `${50 + (mousePosition.x - 50) * 0.2}% ${50 + (mousePosition.y - 50) * 0.2}%`;
  }
  if (animate && !shouldReduceMotion && !interactive) {
    gradientStyle['--atmosphere-gradient-duration'] = `${animationDuration}s`;
  }
  const gradientClasses = cn(styles.gradientLayer, interactive && !shouldReduceMotion && styles.gradientInteractive, animate && !shouldReduceMotion && !interactive && styles.animateGradient, shouldReduceMotion && styles.reduceMotion);
  const effectClasses = cn(styles.atmosphericEffect, animate && !shouldReduceMotion && styles.animateClouds, shouldReduceMotion && styles.reduceMotion);
  const blurStyle = {
    backdropFilter: blur ? `blur(${blurAmount}px)` : 'none',
    WebkitBackdropFilter: blur ? `blur(${blurAmount}px)` : 'none'
  };
  return jsxs(OptimizedGlassCore, {
    ref: setRefs,
    intent: intent,
    elevation: elevation,
    tier: tier,
    className: cn('glass-atmospheric-background', styles.container, className),
    style: style,
    id: componentId,
    role: "img",
    "aria-label": `Atmospheric background with ${animate && !shouldReduceMotion ? 'animated' : 'static'} ${gradientColors.length} color gradient`,
    "aria-hidden": "true",
    tabIndex: interactive ? 0 : -1,
    ...rest,
    children: [jsx("div", {
      className: gradientClasses,
      style: gradientStyle
    }), jsx("div", {
      className: effectClasses
    }), jsx("div", {
      className: styles.blurLayer,
      style: blurStyle
    }), jsx("div", {
      className: styles.contentLayer,
      children: children
    })]
  });
};
/**
 * AtmosphericBackground Component
 *
 * A dynamic background component with atmospheric effects.
 */
const AtmosphericBackground = /*#__PURE__*/forwardRef(AtmosphericBackgroundComponent);
AtmosphericBackground.displayName = 'AtmosphericBackground';

export { AtmosphericBackground, AtmosphericBackground as default };
//# sourceMappingURL=AtmosphericBackground.js.map