From cae71e93f156961227f40589f10d33066fa8c643 Mon Sep 17 00:00:00 2001 From: Laura Date: Mon, 22 Sep 2025 23:31:47 +0200 Subject: [PATCH] floaty bits :) --- static/css/chat.css | 28 +++++++++++++++++++++++- static/index.html | 2 ++ static/js/chat.js | 53 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 1 deletion(-) 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) + ); + } +})();