Cosmic Background

1'use client';
2import React, { useRef, useEffect, useState } from 'react';
3import * as THREE from 'three';
4 
5interface CosmicBackgroundProps {
6  variant?: 'aurora' | 'cosmic' | 'neon';
7  intensity?: number;
8  speed?: number;
9  interactive?: boolean;
10  quality?: 'low' | 'medium' | 'high' | 'ultra';
11  overlay?: boolean;
12  className?: string;
13  children?: React.ReactNode;
14}
15 
16const checkWebGLSupport = (): boolean => {
17  try {
18    const canvas = document.createElement('canvas');
19    const gl =
20      canvas.getContext('webgl2') ||
21      canvas.getContext('webgl') ||
22      canvas.getContext('experimental-webgl');
23    return !!gl;
24  } catch (e) {
25    return false;
26  }
27};
28 
29const CosmicBackground: React.FC<CosmicBackgroundProps> = ({
30  variant = 'aurora',
31  intensity = 1.0,
32  speed = 1.0,
33  interactive = true,
34  quality = 'high',
35  overlay = false,
36  className = '',
37  children,
38}) => {
39  const containerRef = useRef<HTMLDivElement>(null);
40  const rafRef = useRef<number | null>(null);
41  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
42  const materialRef = useRef<THREE.ShaderMaterial | null>(null);
43  const sceneRef = useRef<THREE.Scene | null>(null);
44  const cameraRef = useRef<THREE.OrthographicCamera | null>(null);
45  const mouseRef = useRef<THREE.Vector2>(new THREE.Vector2(0.5, 0.5));
46  const targetMouseRef = useRef<THREE.Vector2>(new THREE.Vector2(0.5, 0.5));
47  const timeRef = useRef<number>(0);
48  const [webGLSupported] = useState<boolean>(() =>
49    typeof window !== 'undefined' ? checkWebGLSupport() : true,
50  );
51 
52  const variantConfigs = {
53    aurora: {
54      colors: ['#0a1628', '#1a3a52', '#2d5f7e', '#45a29e', '#66fcf1'],
55      flowSpeed: 0.15,
56      complexity: 3.5,
57      waveCount: 4,
58      glowIntensity: 1.8,
59    },
60    cosmic: {
61      colors: ['#0d0221', '#240046', '#3c096c', '#5a189a', '#9d4edd'],
62      flowSpeed: 0.08,
63      complexity: 5.0,
64      waveCount: 6,
65      glowIntensity: 2.2,
66    },
67    neon: {
68      colors: ['#000000', '#ff006e', '#fb5607', '#ffbe0b', '#8338ec'],
69      flowSpeed: 0.2,
70      complexity: 4.2,
71      waveCount: 5,
72      glowIntensity: 2.5,
73    },
74  };
75 
76  const config = variantConfigs[variant];
77 
78  useEffect(() => {
79    if (!containerRef.current || !webGLSupported) return;
80 
81    const container = containerRef.current;
82    const width = container.clientWidth;
83    const height = container.clientHeight;
84 
85    const isMobile =
86      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
87// … truncated