src/whiskr
1
0
Fork 0
mirror of https://github.com/coalaura/whiskr.git synced 2025-12-02 20:22:52 +00:00
Code Activity

floaty bits :)

Browse Source
This commit is contained in:
Laura
2025-09-22 23:31:47 +02:00
parent dcd1364f8f
commit cae71e93f1
3 changed files with 82 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/css/chat.css
View File

@@ -56,7 +56,6 @@ html,
body { body {
font-family: "Work Sans", sans-serif; font-family: "Work Sans", sans-serif;
font-size: 15px; font-size: 15px;
background: #181926;
color: #cad3f5; color: #cad3f5;
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -127,6 +126,27 @@ body:not(.loading) #loading {
pointer-events: none; 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 { #notifications {
position: absolute; position: absolute;
top: 15px; top: 15px;
@@ -1380,4 +1400,10 @@ label[for="reasoning-tokens"] {
to { to {
transform: translateY(-50%) rotate(360deg); transform: translateY(-50%) rotate(360deg);
} }
}
@media (prefers-reduced-motion: reduce) {
#floaters {
display: none;
}
} }

2
static/index.html
View File

@@ -16,6 +16,8 @@
<title>whiskr</title> <title>whiskr</title>
</head> </head>
<body class="loading"> <body class="loading">
<div id="floaters"></div>
<div id="total" title="Accumulated total cost, middle-click to reset"></div> <div id="total" title="Accumulated total cost, middle-click to reset"></div>
<div id="version"></div> <div id="version"></div>

53
static/js/chat.js
View File

@@ -2022,3 +2022,56 @@
document.body.classList.remove("loading"); 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)
);
}
})();