Javascript particle alternatives

static/themes/magic/script.js

@@ -0,0 +1,34 @@
+$(document).ready(() => {
+    function particle() {
+        var particle = $("<div></div>")
+        particle.addClass("particle")
+        particle.css("left", (Math.random() * 100).toString() + "%")
+        particle.css("visibility", "visible")
+        particle.css("top", "100%")
+        var anim = "sway 4s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95)"
+        if (Math.round(Math.random()) == 1) {
+            anim += " alternate"
+        } else {
+            anim += " alternate-reverse"
+        }
+        particle.css("animation", anim)
+
+        particle.animate({
+            "top": "-5%"
+        }, (((Math.round(Math.random() * 10) / 10) * 0.3) + 20) * 1000, () => {
+            particle.remove()
+        })
+
+        $(".magicContainer").append(particle)
+}
+
+    $(".magicContainer > *").remove()
+
+    function loop() {
+        particle()
+        setTimeout(() => {
+            loop()
+        }, 1000);
+    }
+    loop()
+})

static/themes/magic/style.css

@@ -0,0 +1,43 @@
+
+#card {
+    background-color: rgba(20, 5, 90, 0.5);
+    /* backdrop-filter: blur(5px); */
+}
+.magicStuff {
+    position: sticky;
+    top: 0;
+    height: 0;
+    z-index: 0;
+}
+
+.magicContainer {
+    height: 100vh;
+    width: 100vw;
+    top: 0px;
+    left: 0vw;
+    position: absolute;
+    overflow: hidden;
+}
+
+.particle {
+    position: absolute;
+    width: 5px;
+    aspect-ratio: 1/1;
+    background-color: rgb(100, 70, 255);
+    /* background-image: radial-gradient(rgba(175, 0, 255, 1) 0% 25%, rgba(175, 0, 255, 0.6) 25% 50%, rgba(175, 0, 255, 0.3) 50% 75%, rgba(0, 0, 255, 0)); */
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+body {
+    background: linear-gradient(black, rgb(50, 0, 90));
+}
+
+@keyframes sway {
+    from {
+        transform: translateX(-30px);
+    }
+    to {
+        transform: translateX(30px);
+    }
+}