From 5fe76f6f45a4dd448cb4b6f23e5f377884a88fa5 Mon Sep 17 00:00:00 2001
From: reidlab <reidlab325@gmail.com>
Date: Thu, 26 Jun 2025 01:48:04 -0700
Subject: [PATCH] gpu-accelerated bg

---
 src/components/Background.astro | 18 +++++++++++++++---
 src/styles/main.css             |  3 +++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Background.astro b/src/components/Background.astro
index 2426e45..b9b6176 100644
--- a/src/components/Background.astro
+++ b/src/components/Background.astro
@@ -4,12 +4,24 @@
 </div>
 <style>
     .layer1 {
-        background: var(--gradient);
+        background: var(--background-gradient);
         background-attachment: fixed;
     }
 
     .layer2 {
-        background: conic-gradient(from 90deg at 1px 1px, transparent 90deg, var(--foreground) 0) center / 3em 3em;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .layer2::before {
+        content: "";
+        position: absolute;
+        top: calc(-1 * var(--background-grid-size));
+        left: calc(-2 * var(--background-grid-size));
+        width: calc(100% + var(--background-grid-size) * 2);
+        height: calc(100% + var(--background-grid-size));
+        background: conic-gradient(from 90deg at 1px 1px, transparent 90deg, var(--foreground) 0) center;
+        background-size: var(--background-grid-size) var(--background-grid-size);
         background-attachment: fixed;
         background-position: 0 0;
         animation: scroll 10s linear infinite;
@@ -33,7 +45,7 @@
 
     @keyframes scroll {
         to {
-            background-position: 6em 3em;
+            transform: translate(calc(2 * var(--background-grid-size)), var(--background-grid-size));
         }
     }
 
diff --git a/src/styles/main.css b/src/styles/main.css
index 542d668..615a72f 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -54,6 +54,9 @@
     --gradient: linear-gradient(#7da2c8, #90bfc5);
     --accent: #c6724b;
 
+    --background-gradient: var(--gradient);
+    --background-grid-size: 3em;
+
     background-color: var(--background);
     color: var(--foreground);
 }