feat(ui): add WebGL fallback with gradient background

Implement graceful degradation for devices without WebGL support:
- Add WebGL detection utility (isWebGLSupported, getWebGLVersion)
- Create GradientTechBackground component as CSS-based fallback
- Enhance AmbientLightBg with error handling and fallback events
- Update ChromeBrowserBackground with auto-fallback logic

When WebGL is unavailable or initialization fails, the system
automatically switches to CSS gradient background, maintaining
visual consistency and user experience.

Author: lsustc

electron-builder.yml

@@ -41,6 +41,7 @@ win:
   icon: assets/icons/logo.png
   target:
     - nsis
+    - zip
   signDlls: false
   artifactName: ${name}-${version}-${os}-${arch}.${ext}
 

src/components/fellou/AmbientLightBg.tsx

@@ -48,25 +48,35 @@ export function AnimatedBackground({
     const handleLoaded = () => {
       if (isDestroyed || !containerRef.current || !window.AmbientLightBg) return;
 
-      // 创建 AmbientLightBg 实例
-      colorBgRef.current = new window.AmbientLightBg({
-        dom: containerRef.current.id,
-        colors: ["#004880", "#CDCFCF", "#3390C0", "#2B71A1", "#005A92", "#004880"],
-        //["#007FFE","#3099FE","#60B2FE","#90CCFE","#a8d3f0","#b7e1df"],
-        loop: true,
-        speed: speed,
-      });
-
-      // 应用自定义参数
-      if (colorBgRef.current && colorBgRef.current.update) {
-        // Scale 参数对应 pattern scale
-        colorBgRef.current.update("pattern scale", scale);
-
-        // Blur 参数对应 edge blur
-        colorBgRef.current.update("edge blur", blur);
-
-        // Noise 参数
-        colorBgRef.current.update("noise", noise);
+      try {
+        // 创建 AmbientLightBg 实例
+        colorBgRef.current = new window.AmbientLightBg({
+          dom: containerRef.current.id,
+          colors: ["#004880", "#CDCFCF", "#3390C0", "#2B71A1", "#005A92", "#004880"],
+          //["#007FFE","#3099FE","#60B2FE","#90CCFE","#a8d3f0","#b7e1df"],
+          loop: true,
+          speed: speed,
+        });
+
+        // 应用自定义参数
+        if (colorBgRef.current && colorBgRef.current.update) {
+          // Scale 参数对应 pattern scale
+          colorBgRef.current.update("pattern scale", scale);
+
+          // Blur 参数对应 edge blur
+          colorBgRef.current.update("edge blur", blur);
+
+          // Noise 参数
+          colorBgRef.current.update("noise", noise);
+        }
+      } catch (error) {
+        // Handle initialization error (likely WebGL not supported)
+        console.error('AmbientLightBg initialization failed:', error);
+
+        // Trigger fallback event to notify parent component
+        window.dispatchEvent(new CustomEvent('ambientBgError', {
+          detail: { error }
+        }));
       }
     };
 

src/components/fellou/ChromeBrowserBackground.tsx

@@ -3,21 +3,46 @@
 import { motion } from "framer-motion";
 import { useState, useEffect } from "react";
 import { AnimatedBackground } from "./AmbientLightBg";
+import { GradientTechBackground } from "./GradientTechBackground";
+import { isWebGLSupported } from "@/utils/webglDetect";
 
 export function ChromeBrowserBackground() {
   const [backgroundReady, setBackgroundReady] = useState(false);
+  const [webglSupported, setWebglSupported] = useState<boolean | null>(null);
+  const [useFallback, setUseFallback] = useState(false);
+
+  // Detect WebGL support on mount
+  useEffect(() => {
+    const supported = isWebGLSupported();
+    setWebglSupported(supported);
+
+    if (!supported) {
+      console.warn('WebGL not supported, using fallback gradient background');
+      setUseFallback(true);
+      setBackgroundReady(true);
+    }
+  }, []);
 
   // Listen for background animation ready state
   useEffect(() => {
     const handleBackgroundReady = () => {
       setBackgroundReady(true);
     };
 
+    const handleBackgroundError = (event: Event) => {
+      const customEvent = event as CustomEvent;
+      console.error('AnimatedBackground failed, falling back to gradient:', customEvent.detail?.error);
+      setUseFallback(true);
+      setBackgroundReady(true);
+    };
+
     // Listen for ambient background loaded event
     window.addEventListener("ambientBgLoaded", handleBackgroundReady);
+    window.addEventListener("ambientBgError", handleBackgroundError);
 
     return () => {
       window.removeEventListener("ambientBgLoaded", handleBackgroundReady);
+      window.removeEventListener("ambientBgError", handleBackgroundError);
     };
   }, []);
 
@@ -26,34 +51,49 @@ export function ChromeBrowserBackground() {
       {/* Black background - always visible as fallback */}
       <div className="fixed inset-0 bg-black z-0" />
 
-      {/* AnimatedBackground with loading-based opacity control */}
-      <motion.div
-        className="fixed inset-0 z-0 overflow-hidden"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: backgroundReady ? 1 : 0 }}
-        transition={{ duration: 0.8, ease: "easeInOut" }}
-        style={{
-          opacity: backgroundReady ? 1 : 0,
-        }}
-      >
-        {/* Animated background - render at desktop size for mobile consistency */}
-        <div 
-          className="absolute"
+      {/* Render background based on WebGL support and fallback state */}
+      {useFallback ? (
+        /* Fallback: Gradient Tech Background (no WebGL required) */
+        <motion.div
+          className="fixed inset-0 z-0 overflow-hidden"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, ease: "easeInOut" }}
+        >
+          <GradientTechBackground />
+          {/* Black overlay with 40% opacity */}
+          <div className="absolute inset-0 bg-black/40" />
+        </motion.div>
+      ) : webglSupported !== false ? (
+        /* WebGL supported: AnimatedBackground with loading-based opacity control */
+        <motion.div
+          className="fixed inset-0 z-0 overflow-hidden"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: backgroundReady ? 1 : 0 }}
+          transition={{ duration: 0.8, ease: "easeInOut" }}
           style={{
-            width: "100vw",
-            height: "100vh",
-            minWidth: "1440px", // Desktop width for consistent appearance
-            minHeight: "900px",  // Desktop height for consistent appearance
-            left: "50%",
-            top: "50%",
-            transform: "translate(-50%, -50%)"
+            opacity: backgroundReady ? 1 : 0,
           }}
         >
-          <AnimatedBackground speed={0.25} />
-        </div>
-        {/* Black overlay with 40% opacity */}
-        <div className="absolute inset-0 bg-black/40" />
-      </motion.div>
+          {/* Animated background - render at desktop size for mobile consistency */}
+          <div
+            className="absolute"
+            style={{
+              width: "100vw",
+              height: "100vh",
+              minWidth: "1440px", // Desktop width for consistent appearance
+              minHeight: "900px",  // Desktop height for consistent appearance
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)"
+            }}
+          >
+            <AnimatedBackground speed={0.25} />
+          </div>
+          {/* Black overlay with 40% opacity */}
+          <div className="absolute inset-0 bg-black/40" />
+        </motion.div>
+      ) : null}
     </>
   );
 }

src/components/fellou/GradientTechBackground.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React from "react";
+import { cn } from "./utils";
+
+interface GradientTechBackgroundProps {
+  className?: string;
+}
+
+/**
+ * Gradient Tech Background Component
+ * A fallback background for devices without WebGL support
+ * Uses CSS gradients and animations for a tech-inspired look
+ */
+export function GradientTechBackground({ className }: GradientTechBackgroundProps) {
+  return (
+    <div className={cn("absolute inset-0 overflow-hidden", className)}>
+      {/* Main gradient background with animation */}
+      <div className="absolute inset-0 bg-gradient-tech animate-gradient-shift" />
+
+      {/* Overlay gradients for depth effect */}
+      <div className="absolute inset-0 bg-gradient-radial opacity-60" />
+
+      {/* Animated glow spots */}
+      <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl animate-pulse-slow" />
+      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse-slow animation-delay-2000" />
+
+      {/* Subtle grid overlay for tech feel */}
+      <div className="absolute inset-0 opacity-10">
+        <div
+          className="w-full h-full"
+          style={{
+            backgroundImage: `
+              linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+              linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)
+            `,
+            backgroundSize: '50px 50px'
+          }}
+        />
+      </div>
+
+      {/* Add styles for custom animations */}
+      <style jsx>{`
+        @keyframes gradient-shift {
+          0%, 100% {
+            background-position: 0% 50%;
+          }
+          50% {
+            background-position: 100% 50%;
+          }
+        }
+
+        @keyframes pulse-slow {
+          0%, 100% {
+            opacity: 0.6;
+            transform: scale(1);
+          }
+          50% {
+            opacity: 0.8;
+            transform: scale(1.1);
+          }
+        }
+
+        .bg-gradient-tech {
+          background: linear-gradient(
+            135deg,
+            #001a33 0%,
+            #003366 25%,
+            #004d7a 50%,
+            #003d5c 75%,
+            #001a33 100%
+          );
+          background-size: 400% 400%;
+        }
+
+        .bg-gradient-radial {
+          background: radial-gradient(
+            circle at 50% 50%,
+            transparent 0%,
+            rgba(0, 26, 51, 0.8) 100%
+          );
+        }
+
+        .animate-gradient-shift {
+          animation: gradient-shift 15s ease infinite;
+        }
+
+        .animate-pulse-slow {
+          animation: pulse-slow 8s ease-in-out infinite;
+        }
+
+        .animation-delay-2000 {
+          animation-delay: 2s;
+        }
+      `}</style>
+    </div>
+  );
+}

src/utils/webglDetect.ts

@@ -0,0 +1,53 @@
+/**
+ * WebGL Detection Utility
+ * Detects if the browser supports WebGL 1.0 or WebGL 2.0
+ */
+
+/**
+ * Check if WebGL is supported in the current browser
+ * @returns {boolean} true if WebGL is available, false otherwise
+ */
+export function isWebGLSupported(): boolean {
+  try {
+    // Create a temporary canvas element
+    const canvas = document.createElement('canvas');
+
+    // Try to get WebGL context (WebGL 2.0 or 1.0)
+    const gl = canvas.getContext('webgl2') || canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+
+    // If we got a context, WebGL is supported
+    if (gl && gl instanceof WebGLRenderingContext) {
+      return true;
+    }
+
+    return false;
+  } catch (e) {
+    // If any error occurs during detection, assume WebGL is not supported
+    console.warn('WebGL detection failed:', e);
+    return false;
+  }
+}
+
+/**
+ * Get WebGL version info
+ * @returns {string} WebGL version or 'Not supported'
+ */
+export function getWebGLVersion(): string {
+  try {
+    const canvas = document.createElement('canvas');
+    const gl2 = canvas.getContext('webgl2');
+
+    if (gl2) {
+      return 'WebGL 2.0';
+    }
+
+    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+    if (gl) {
+      return 'WebGL 1.0';
+    }
+
+    return 'Not supported';
+  } catch (e) {
+    return 'Not supported';
+  }
+}