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

2 files changed, 240 insertions, 280 deletions

diff --git a/app/styles.css b/app/styles.css
index df2ad4f..33729de 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-	font-family: Arial, Helvetica, sans-serif;
-}
-
 @layer utilities {
 	.text-balance {
 		text-wrap: balance;
@@ -14,6 +10,7 @@ body {
 
 @layer base {
 	:root {
+		--blur-size: 0;
 		--background: 0 0% 100%;
 		--foreground: 0 0% 3.9%;
 		--card: 0 0% 100%;
@@ -40,6 +37,7 @@ body {
 		--chart-5: 27 87% 67%;
 		--radius: 0.5rem;
 		--topBarHeight: 5em;
+		--text: #F4E8C1
 		--neon-bg-color: #05010d;
 		--dark-background: 260 86% 3%;
 		--dark-foreground: 0 0% 98%;
@@ -86,11 +84,11 @@ body {
     font-smooth: antialiased;
 }
 
-@media (pointer:none), (pointer:coarse) {
+/* @media (pointer:none), (pointer:coarse) {
     * {
         transition: all .3s;
     }
-}
+} */
 
 body {
     top: 0;
@@ -102,263 +100,263 @@ body::-webkit-scrollbar {
     display: none;
 }
 
-/* animation ============================================== */
-
-@keyframes slideInTop {
-    from {
-        transform: translateY(-300px);
-    }
-    to {
-        transform: translateY(0);
+@media (prefers-reduced-motion: no-preference) {
+    :has(:target) {
+        scroll-behavior: smooth;
     }
-}
 
-@keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
-        transform: translateY(0px);
-    }
-    40% {
-        transform: translateY(30px);
-    }
-    80% {
-        transform: translateY(-15px);
-    }
-}
+	/* animation ============================================== */
 
-@keyframes zoomIn {
-    0% {
-        scale: 0.01;
-    }
-    65% {
-        scale: 1.05;
-    }
-    100% {
-        scale: 1;
-        position: relative;
-    }
-}
+	@keyframes slideInTop {
+		from {
+			transform: translateY(-300px);
+		}
+		to {
+			transform: translateY(0);
+		}
+	}
 
-@keyframes zoomOut {
-    from {
-        transform: scale(1);
-    }
-    to {
-        transform: scale(0.01);
-    }
-}
+	@keyframes bounce {
+		0%, 20%, 50%, 80%, 100% {
+			transform: translateY(0px);
+		}
+		40% {
+			transform: translateY(30px);
+		}
+		80% {
+			transform: translateY(-15px);
+		}
+	}
 
-@keyframes fadeZoomIn {
-    from {
-        opacity: 0.35;
-        scale: 1.15;
-    }
-    to {
-        opacity: 1;
-        scale: 1;
-    }
-}
+	@keyframes zoomIn {
+		0% {
+			scale: 0.01;
+		}
+		65% {
+			scale: 1.05;
+		}
+		100% {
+			scale: 1;
+			position: relative;
+		}
+	}
 
-@keyframes reveal {
-    from {
-        -webkit-filter: blur(32px);
-        -moz-filter: blur(32px);
-        -o-filter: blur(32px);
-        -ms-filter: blur(32px);
-        filter: blur(32px);
-        -webkit-backdrop-filter: blur(32px);
-        backdrop-filter: blur(32px);
-        transform: scale(2);
-    }
-}
+	@keyframes zoomOut {
+		from {
+			transform: scale(1);
+		}
+		to {
+			transform: scale(0.01);
+		}
+	}
 
-@keyframes shake {
-    0% { transform: rotate(0deg); }
-    25% { transform: rotate(.5deg); }
-    50% { transform: rotate(0eg); }
-    75% { transform: rotate(-.5deg); }
-    100% { transform: rotate(0deg); }
-}
+	@keyframes fadeZoomIn {
+		from {
+			opacity: 0.35;
+			scale: 1.15;
+		}
+		to {
+			opacity: 1;
+			scale: 1;
+		}
+	}
 
-@keyframes background-pan {
-    from {
-        background-position: 0% center;
-    }
-    to {
-        background-position: -200% center;
-    }
-}
+	@keyframes reveal {
+		from {
+			-webkit-filter: blur(32px);
+			-moz-filter: blur(32px);
+			-o-filter: blur(32px);
+			-ms-filter: blur(32px);
+			filter: blur(32px);
+			-webkit-backdrop-filter: blur(32px);
+			backdrop-filter: blur(32px);
+			transform: scale(2);
+		}
+	}
 
-@keyframes fadeIn {
-    from {
-        scale: 0.8;
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-        scale: 1;
-    }
-}
+	@keyframes shake {
+		0% { transform: rotate(0deg); }
+		25% { transform: rotate(.5deg); }
+		50% { transform: rotate(0eg); }
+		75% { transform: rotate(-.5deg); }
+		100% { transform: rotate(0deg); }
+	}
 
-@keyframes fadeOut {
-    from {
+	@keyframes background-pan {
+		from {
+			background-position: 0% center;
+		}
+		to {
+			background-position: -200% center;
+		}
+	}
 
-    }
-    to {
-        opacity: 0;
-        scale: 0.8
-    }
-}
+	@keyframes fadeIn {
+		from {
+			scale: 0.8;
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+			scale: 1;
+		}
+	}
 
-@keyframes scroll {
-    from {
-        opacity: 0.8;
-        scale: 0.75;
-    }
-    to {
-        opacity: 1;
-        scale: 1;
-    }
-}
+	@keyframes fadeOut {
+		from {
 
-@keyframes rotate {
-    from {
-        rotate: 0deg;
-    }
-    
-    50% {
-        scale: 1 1.25;
-    }
-    
-    to {
-        rotate: 360deg;
-    }
-}
+		}
+		to {
+			opacity: 0;
+			scale: 0.8
+		}
+	}
 
-@keyframes minimize {
-    from {
-        scale: 1;
-        opacity: 1;
-    }
-    to {
-        scale: 0;
-        opacity: 0;
-    }
-}
+	@keyframes scroll {
+		from {
+			opacity: 0.8;
+			scale: 0.75;
+		}
+		to {
+			opacity: 1;
+			scale: 1;
+		}
+	}
 
+	@keyframes rotate {
+		from {
+			rotate: 0deg;
+		}
+		
+		50% {
+			scale: 1 1.25;
+		}
+		
+		to {
+			rotate: 360deg;
+		}
+	}
 
-/* animation: name duration timing-function delay iteration-count direction fill-mode; */
+	@keyframes minimize {
+		from {
+			scale: 1;
+			opacity: 1;
+		}
+		to {
+			scale: 0;
+			opacity: 0;
+		}
+	}
 
 
-/* animate class */
-.animate {
-    -webkit-animation-duration: 0.5s;
-    animation-duration: 0.5s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-}
+	/* animation: name duration timing-function delay iteration-count direction fill-mode; */
 
-.animate.animate--infinite {
-    -webkit-animation-iteration-count: infinite;
-    animation-iteration-count: infinite;
-}
 
-.animate.animation--delay-1s {
-    -webkit-animation-delay: 1s;
-    animation-delay: 1s;
-}
-.animate.animation--delay-p5s {
-    -webkit-animation-duration: 0.5s;
-    animation-duration: 0.5s;
-    animation-delay: 0.5s;
-}
+	/* animate class */
+	.animate {
+		-webkit-animation-duration: 0.5s;
+		animation-duration: 0.5s;
+		-webkit-animation-fill-mode: both;
+		animation-fill-mode: both;
+	}
 
-.animate.animation--delay-p3s {
-    -webkit-animation-duration: 0.3s;
-    animation-duration: 0.3s;
-    animation-delay: 0.3s;
-}
+	.animate.animate--infinite {
+		-webkit-animation-iteration-count: infinite;
+		animation-iteration-count: infinite;
+	}
 
-.animate.animation--fast {
-    -webkit-animation-duration: 0.3s;
-    animation-duration: 0.3s;
-}
+	.animate.animation--delay-1s {
+		-webkit-animation-delay: 1s;
+		animation-delay: 1s;
+	}
+	.animate.animation--delay-p5s {
+		-webkit-animation-duration: 0.5s;
+		animation-duration: 0.5s;
+		animation-delay: 0.5s;
+	}
 
-.animate.animation--slow {
-    -webkit-animation-duration: 1s;
-    animation-duration: 1s;
-}
+	.animate.animation--delay-p3s {
+		-webkit-animation-duration: 0.3s;
+		animation-duration: 0.3s;
+		animation-delay: 0.3s;
+	}
 
-/* real utility classes */
+	.animate.animation--fast {
+		-webkit-animation-duration: 0.3s;
+		animation-duration: 0.3s;
+	}
 
-.animate.slideInTop {
-    animation-name: slideInTop;
-    -webkit-transition-timing-function: ease-in;
-    transition-timing-function: ease-in;
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-}
+	.animate.animation--slow {
+		-webkit-animation-duration: 1s;
+		animation-duration: 1s;
+	}
 
-.animate.bounce {
-    -webkit-animation-name: bounce;
-    animation-name: bounce;
-}
+	/* real utility classes */
 
-.animate.zoomIn {
-    -webkit-transition-timing-function: linear;
-    transition-timing-function: linear;
-    -webkit-animation-name: reveal;
-    animation-name: zoomIn;
-}
+	.animate.slideInTop {
+		animation-name: slideInTop;
+		-webkit-transition-timing-function: ease-in;
+		transition-timing-function: ease-in;
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
 
-.animate.zoomOut {
-    -webkit-transition-timing-function: linear;
-    transition-timing-function: linear;
-    -webkit-animation-name: zoomOut;
-    animation-name: zoomOut;
-}
+	.animate.bounce {
+		-webkit-animation-name: bounce;
+		animation-name: bounce;
+	}
 
-.animate.reveal {
-    animation-duration: 500ms;
-    -webkit-transition-timing-function: linear;
-    transition-timing-function: linear;
-    -webkit-animation-name: reveal;
-    animation-name: reveal;
-}
+	.animate.zoomIn {
+		-webkit-transition-timing-function: linear;
+		transition-timing-function: linear;
+		-webkit-animation-name: reveal;
+		animation-name: zoomIn;
+	}
 
-.animate.shake {
-    -webkit-animation-name: shake;
-    animation-name: shake;
-}
+	.animate.zoomOut {
+		-webkit-transition-timing-function: linear;
+		transition-timing-function: linear;
+		-webkit-animation-name: zoomOut;
+		animation-name: zoomOut;
+	}
 
-.animate.fadeIn {
-    -webkit-animation-name: fadeIn;
-    animation-name: fadeIn;
-}
+	.animate.reveal {
+		animation-duration: 500ms;
+		-webkit-transition-timing-function: linear;
+		transition-timing-function: linear;
+		-webkit-animation-name: reveal;
+		animation-name: reveal;
+	}
 
-.animate.fadeOut {
-    -webkit-animation-name: fadeOut;
-    animation-name: fadeOut;
-}
+	.animate.shake {
+		-webkit-animation-name: shake;
+		animation-name: shake;
+	}
 
-.animate.fadeZoomIn {
-    -webkit-animation-name: fadeZoomIn;
-    animation-name: fadeZoomIn;
-}
+	.animate.fadeIn {
+		-webkit-animation-name: fadeIn;
+		animation-name: fadeIn;
+	}
 
-.aniamte.persist {
-    animation-fill-mode: forwards;
-}
+	.animate.fadeOut {
+		-webkit-animation-name: fadeOut;
+		animation-name: fadeOut;
+	}
 
-/* transition */
-/* * {
-    -webkit-transition: all 0.3s;
-    transition: all 0.3s; 
-} */
+	.animate.fadeZoomIn {
+		-webkit-animation-name: fadeZoomIn;
+		animation-name: fadeZoomIn;
+	}
 
-@media (prefers-reduced-motion: no-preference) {
-    :has(:target) {
-        scroll-behavior: smooth;
-    }
+	.aniamte.persist {
+		animation-fill-mode: forwards;
+	}
+
+	/* transition */
+	/* * {
+		-webkit-transition: all 0.3s;
+		transition: all 0.3s; 
+	} */
 }
 
 :has(:target) {
@@ -411,57 +409,4 @@ a:active, Button:active {
     transform: scale(0.9);
 }
 
-.blob {
-    min-height: 75%;
-    min-width: 75%;
-    /* aspect-ratio: 1; */
-    background-color: #fff;
-    background: -webkit-gradient(linear, left top, right top, from(#00FFFF), to(mediumpurple));
-    background: linear-gradient(90deg,#0ff,#9370db);
-    border-radius: 50%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-    filter: blur(7vmax);
-    -webkit-filter: blur(7vmax);
-    height: 15vmax;
-    left: 50%;
-    opacity: 0;
-    position: absolute;
-    top: 50%;
-    translate: -50% -50%;
-    width: 20vmax;
-    z-index: 0;
-    animation-fill-mode: forwards;
-}
-
 
-.sblob {
-    background-color: white;
-    height: 15vmax;
-    width: 20vmax;
-    aspect-ratio: 1;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    translate: -50% -50%;
-    border-radius: 50%;
-    background: conic-gradient(#00FFFF, mediumpurple);
-    animation: rotate 20s infinite;
-    opacity: 0.8;
-    filter: blur(7vmax);
-    -webkit-filter: blur(7vmax);
-    z-index: -1;
-}
-
-
-html.is-changing .openlink {
-    transition: all 0.5s;
-}
-
-html.is-animating .openlink {
-    /* transform: scale(1000);
-    transition: transform 100s; */
-    transition: all 0.5s;
-    height: 100%;
-    width: 100%;
-    transition-timing-function: ease-out;
-}
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;
+};