Javascript particle alternatives

static/themes/rain/script.js

@@ -0,0 +1,28 @@
+$(document).ready(() => {
+    function particle() {
+        var particle = $("<div></div>")
+        particle.addClass("rainDrop")
+        particle.css("left", (Math.random() * 100).toString() + "%")
+        particle.css("visibility", "visible")
+        particle.css("top", "-10%")
+
+        particle.animate({
+            "top": "110%",
+            "easing": "linear"
+        }, 600, () => {
+            particle.remove()
+        })
+
+        $(".rainContainer").append(particle)
+}
+
+    $(".rainContainer > *").remove()
+
+    function loop() {
+        particle()
+        setTimeout(() => {
+            loop()
+        }, 100 * (Math.random() + 0.25));
+    }
+    loop()
+})

static/themes/rain/style.css

@@ -0,0 +1,32 @@
+
+#card {
+    background-color: rgba(50, 0, 90, 0.5);
+    /* backdrop-filter: blur(5px); */
+}
+.rainStuff {
+    position: sticky;
+    top: 0;
+    height: 0;
+    z-index: -5;
+}
+
+.rainContainer {
+    height: 100vh;
+    width: 95vw;
+    top: 0px;
+    left: 2.5vw;
+    position: absolute;
+    overflow: hidden;
+}
+
+.rainDrop {
+    position: absolute;
+    width: 5px;
+    background-color: rgba(0, 0, 255, 0.2);
+    height: 10vh;
+    visibility: hidden;
+}
+
+body {
+    background: linear-gradient(rgb(10, 10, 75), black);
+}