perf(performance.tsx): added new performance module to dynamiclly change blur, adapting user device

perf(styles): removed transition to reduce lag, as it showed unintended
side effects

1 files changed, 15 insertions, 0 deletions

diff --git a/components/performance.tsx b/components/performance.tsx
new file mode 100644
index 0000000..5bc62eb
--- /dev/null
+++ b/components/performance.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+import { getGPUTier } from "detect-gpu";
+
+export default function Performance() {
+	useEffect(() => {
+		getGPUTier().then((gpuTier) => {
+			const blurSize = gpuTier.tier < 3 || gpuTier.type === "FALLBACK" ? "0" : "1024";
+			document.documentElement.style.setProperty("--blur-size", blurSize + "px");
+		});
+	}, []);
+
+	return null;
+};