From d80712098b9748cc9403a1e5af496d1b0ab61f19 Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Thu, 16 Oct 2025 23:37:36 -0300
Subject: [PATCH] fix: gracefully degrade shader background when WebGL is
 unavailable

---
 .../background-paper-shaders-wrapper.tsx      | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/background-paper-shaders-wrapper.tsx b/src/components/background-paper-shaders-wrapper.tsx
index 988812e..1bf3bd9 100644
--- a/src/components/background-paper-shaders-wrapper.tsx
+++ b/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)}>
-      <MeshGradient
-        className="absolute inset-0 h-full w-full"
-        colors={["#000000", "#1a1a1a", "#333333", "#ffffff"]}
-        speed={speed * 0.5}
-      />
+      {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>
   )
 }