Add smooth parallax background pan

wwwroot/app.js

@@ -8,6 +8,7 @@ import {
 } from "./js/i18n.js";
 
 initI18n();
+setupBackgroundPan();
 
 const state = {
     isAuthenticated: false,
@@ -836,6 +837,42 @@ function setupCardVisualHover(el, url) {
     ["mouseleave", "blur"].forEach((evt) => el.addEventListener(evt, reset));
 }
 
+function setupBackgroundPan(config = {}) {
+    const root = document.documentElement;
+    const maxOffset = config.maxOffsetPx ?? 30;
+    const ease = config.ease ?? 0.08;
+    if (config.scalePercent) {
+        root.style.setProperty("--bg-scale", config.scalePercent);
+    }
+    let targetX = 0;
+    let targetY = 0;
+    let currX = 0;
+    let currY = 0;
+
+    const setTarget = (x, y) => {
+        targetX = x;
+        targetY = y;
+    };
+
+    const step = () => {
+        currX += (targetX - currX) * ease;
+        currY += (targetY - currY) * ease;
+        root.style.setProperty("--bg-x", `${currX}px`);
+        root.style.setProperty("--bg-y", `${currY}px`);
+        requestAnimationFrame(step);
+    };
+
+    window.addEventListener("mousemove", (e) => {
+        const nx = (e.clientX / window.innerWidth - 0.5) * 2;
+        const ny = (e.clientY / window.innerHeight - 0.5) * 2;
+        setTarget(nx * maxOffset, ny * maxOffset);
+    });
+
+    window.addEventListener("mouseleave", () => setTarget(0, 0));
+    window.addEventListener("blur", () => setTarget(0, 0));
+    step();
+}
+
 async function main() {
     setupHandlers();
     try {
@@ -897,7 +934,7 @@ function scoreToEmoji(score) {
 }
 
 function neutralEmoji() {
-    return "⬅️";
+    return "😐";
 }
 
 function signatureSuggestions(list) {