From f35578fe8baa74e25e3748ce1b8b996ee708c811 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Tue, 6 Oct 2026 16:56:17 -0600
Subject: [PATCH] fix(charts): use radial text backdrop without canvas blur

---
 src/components/landing/ChartsTextBackdrop.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/landing/ChartsTextBackdrop.tsx b/src/components/landing/ChartsTextBackdrop.tsx
index bc0b8a044..545e1047e 100644
--- a/src/components/landing/ChartsTextBackdrop.tsx
+++ b/src/components/landing/ChartsTextBackdrop.tsx
@@ -7,10 +7,16 @@ export function ChartsTextBackdrop({
 }) {
   const contentRef = React.useRef<HTMLDivElement>(null)
   const [mask, setMask] = React.useState('')
+  const [radialBackdrop, setRadialBackdrop] = React.useState(false)
 
   React.useEffect(() => {
     const content = contentRef.current
     if (!content) return
+    const probe = document.createElement('canvas').getContext('2d')
+    if (!probe || typeof probe.filter !== 'string') {
+      setRadialBackdrop(true)
+      return
+    }
     let active = true
     let frame = 0
     let revision = 0
@@ -108,10 +114,14 @@ export function ChartsTextBackdrop({
     <div className="relative">
       <div
         aria-hidden="true"
-        className="pointer-events-none absolute -inset-48 backdrop-blur-3xl"
+        className={`pointer-events-none absolute -inset-48 ${radialBackdrop ? 'bg-white/85 dark:bg-black/85' : 'backdrop-blur-3xl'}`}
         style={{
-          maskImage: mask ? `url(${mask})` : undefined,
-          visibility: mask ? 'visible' : 'hidden',
+          maskImage: radialBackdrop
+            ? 'radial-gradient(ellipse closest-side, black 45%, transparent 100%)'
+            : mask
+              ? `url(${mask})`
+              : undefined,
+          visibility: radialBackdrop || mask ? 'visible' : 'hidden',
           maskSize: '100% 100%',
           maskRepeat: 'no-repeat',
         }}