From 325047b68128c12384caced516ced7d2b83666c8 Mon Sep 17 00:00:00 2001
From: Dustin Brett <dustinbrett@gmail.com>
Date: Thu, 29 Feb 2024 22:43:43 -0800
Subject: [PATCH] Better sspotlight radius logic

---
 utils/spotlightEffect.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/utils/spotlightEffect.ts b/utils/spotlightEffect.ts
index e9ba3bc951..f2a463aedb 100644
--- a/utils/spotlightEffect.ts
+++ b/utils/spotlightEffect.ts
@@ -25,7 +25,7 @@ export const spotlightEffect = (
           highlightHovered &&
           document.elementFromPoint(clientX, clientY) === element;
 
-        element.style.borderImage = `radial-gradient(150% 150% at ${clientX - x}px ${clientY - y}px, rgba(${hovered ? "255, 255, 255, 80%" : "150, 150, 150, 60%"}), transparent) 1 / ${border}px / 0 stretch`;
+        element.style.borderImage = `radial-gradient(75px at ${clientX - x}px ${clientY - y}px, rgba(${hovered ? "255, 255, 255, 80%" : "200, 200, 200, 60%"}), transparent) 1 / ${border}px / 0 stretch`;
       } else {
         document.removeEventListener("mousemove", mouseMove);
         document.removeEventListener("mouseleave", removeStyle);
@@ -37,7 +37,7 @@ export const spotlightEffect = (
   } else {
     const mouseMove = ({ offsetX: x, offsetY: y }: MouseEvent): void => {
       element.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(200, 200, 200, 30%), transparent)`;
-      element.style.borderImage = `radial-gradient(50% 75% at ${x}px ${y}px, rgba(200, 200, 200, 60%), transparent) 1 / ${border}px / 0 stretch`;
+      element.style.borderImage = `radial-gradient(75px at ${x}px ${y}px, rgba(200, 200, 200, 60%), transparent) 1 / ${border}px / 0 stretch`;
     };
 
     element.addEventListener("mousemove", mouseMove, PASSIVE);