fix: gracefully degrade shader background when WebGL is unavailable

src/components/background-paper-shaders-wrapper.tsx

@@ -1,19 +1,40 @@
 "use client"
 
+import { useEffect, useState } from "react"
 import { MeshGradient } from "@paper-design/shaders-react"
 
 import { cn } from "@/lib/utils"
 
+function isWebGL2Supported(): boolean {
+  try {
+    const canvas = document.createElement("canvas")
+    const gl = canvas?.getContext("webgl2") ?? canvas?.getContext("webgl")
+    return Boolean(gl)
+  } catch {
+    return false
+  }
+}
+
 export default function BackgroundPaperShadersWrapper({ className }: { className?: string }) {
+  const [supportsWebGL, setSupportsWebGL] = useState<boolean>(true)
+
+  useEffect(() => {
+    setSupportsWebGL(isWebGL2Supported())
+  }, [])
+
   const speed = 1.0
 
   return (
     <div className={cn("relative h-full w-full overflow-hidden bg-black", className)}>
+      {supportsWebGL ? (
         <MeshGradient
           className="absolute inset-0 h-full w-full"
           colors={["#000000", "#1a1a1a", "#333333", "#ffffff"]}
           speed={speed * 0.5}
         />
+      ) : (
+        <div className="absolute inset-0 h-full w-full bg-[radial-gradient(circle_at_top,_rgba(15,15,15,0.95),_rgba(0,0,0,1))]" />
+      )}
     </div>
   )
 }