diff --git a/static/css/chat.css b/static/css/chat.css
index 6bcd238..366a1a4 100644
--- a/static/css/chat.css
+++ b/static/css/chat.css
@@ -56,7 +56,6 @@ html,
body {
font-family: "Work Sans", sans-serif;
font-size: 15px;
- background: #181926;
color: #cad3f5;
height: 100%;
width: 100%;
@@ -127,6 +126,27 @@ body:not(.loading) #loading {
pointer-events: none;
}
+#floaters {
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: -1;
+ background: #181926;
+}
+
+#floaters .floater {
+ position: absolute;
+ width: var(--size, 2px);
+ height: var(--size, 2px);
+ border-radius: 50%;
+ filter: blur(1px);
+ opacity: 0.3;
+ transform: translate(var(--x), var(--y));
+ transition: transform var(--time, 14s);
+ background: var(--color, #181926);
+ will-change: transform;
+}
+
#notifications {
position: absolute;
top: 15px;
@@ -1380,4 +1400,10 @@ label[for="reasoning-tokens"] {
to {
transform: translateY(-50%) rotate(360deg);
}
+}
+
+@media (prefers-reduced-motion: reduce) {
+ #floaters {
+ display: none;
+ }
}
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index 6d0b9e2..ee43108 100644
--- a/static/index.html
+++ b/static/index.html
@@ -16,6 +16,8 @@
whiskr
+
+
diff --git a/static/js/chat.js b/static/js/chat.js
index 056f549..503414e 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -2022,3 +2022,56 @@
document.body.classList.remove("loading");
});
})();
+
+(() => {
+ const $floaters = document.getElementById("floaters"),
+ colors = ["#8aadf4", "#c6a0f6", "#8bd5ca", "#91d7e3", "#b7bdf8"],
+ count = Math.floor((window.outerHeight * window.outerWidth) / 98000);
+
+ function rand(a, b, rnd = false) {
+ const num = Math.random() * (b - a) + a;
+
+ if (rnd) {
+ return Math.floor(num);
+ }
+
+ return num;
+ }
+
+ function place(el, init = false) {
+ el.style.setProperty("--x", `${rand(0, 100).toFixed(4)}vw`);
+ el.style.setProperty("--y", `${rand(0, 100).toFixed(4)}vh`);
+
+ if (init) {
+ return;
+ }
+
+ const time = rand(120, 140);
+
+ el.style.setProperty("--time", `${time.toFixed(2)}s`);
+
+ setTimeout(() => {
+ place(el);
+ }, time * 1000);
+ }
+
+ for (let i = 0; i < count; i++) {
+ const el = document.createElement("div");
+
+ el.className = "floater";
+
+ el.style.setProperty("--size", `${rand(2, 4, true)}px`);
+ el.style.setProperty("--color", colors[rand(0, colors.length, true)]);
+
+ $floaters.appendChild(el);
+
+ place(el, true);
+
+ setTimeout(
+ () => {
+ place(el);
+ },
+ rand(0, 1000, true)
+ );
+ }
+})();