feat: animated background

resources/css/style.css

@@ -10,3 +10,28 @@ body {
     font-style: normal;
     font-variation-settings: "wdth" 100;
 }
+
+.bg-hero {
+    --size: 5vh;
+    --angle: 45deg;
+    background: repeating-linear-gradient(
+        var(--angle),
+        var(--color-base-200) calc(0 * var(--size)),
+        var(--color-base-200) calc(1 * var(--size)),
+        var(--color-secondary) calc(1 * var(--size)),
+        var(--color-secondary) calc(2 * var(--size)),
+        var(--color-base-200) calc(2 * var(--size)),
+        var(--color-base-200) calc(3 * var(--size)),
+        var(--color-accent) calc(3 * var(--size)),
+        var(--color-accent) calc(4 * var(--size))
+    );
+    background-size: calc(4 * var(--size) / sin(var(--angle)))
+        calc(4 * var(--size) / sin(var(--angle)));
+    animation: BackgroundAnimate 10s linear infinite reverse;
+}
+
+@keyframes BackgroundAnimate {
+    0% {
+        background-position: calc(4 * var(--size) / sin(var(--angle))) 0;
+    }
+}

resources/ts/App.vue

@@ -22,7 +22,7 @@ onMounted(() => {
         :style="{ display: visible ? 'flex' : 'none' }"
         class="min-h-screen flex-col w-screen"
     >
-        <div class="hero bg-base-200 grow">
+        <div class="hero bg-hero grow">
             <div class="hero-content text-center p-0">
                 <div
                     class="max-w-md min-w-96 bg-base-100 rounded-box shadow-md"