feat: add blurry background orbs

2026-03-12 11:08:59 +01:00
parent 4d6ed5cd37
commit fb9faf948e
4 changed files with 65 additions and 0 deletions
@@ -0,0 +1,49 @@
+---
+interface Props {
+    top: string;
+    left: string;
+    size: string;
+    opacity?: string;
+    blur?: string;
+}
+
+const {
+    top = "0",
+    left = "0",
+    size = "2rem",
+    opacity = "1",
+    blur = "10rem",
+} = Astro.props;
+---
+
+<div></div>
+
+<style define:vars={{ top, left, size, opacity, blur }}>
+    div {
+        width: var(--size);
+        height: var(--size);
+
+        position: absolute;
+        top: var(--top);
+        left: var(--left);
+
+        border-radius: 100%;
+        background-color: var(--clr-ts-red-400);
+        filter: blur(var(--blur));
+        opacity: var(--opacity);
+
+        z-index: -1;
+
+        /* animation: 3s infinite alternate pulsate ease-out; */
+    }
+
+    /* @keyframes pulsate {
+        from {
+            transform: scale3d(0.8, 0.8, 1);
+        }
+
+        to {
+            transform: scale3d(1, 1, 1);
+        }
+    } */
+</style>