gpu-accelerated bg

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));
         }
     }
 

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);
 }