Added snowfall effect to frontend

frontend/package-lock.json

@@ -11,7 +11,8 @@
         "firebase": "^12.6.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
-        "react-router-dom": "^7.9.5"
+        "react-router-dom": "^7.9.5",
+        "react-snowfall": "^2.4.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
@@ -4215,6 +4216,12 @@
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4263,6 +4270,19 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-snowfall": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.4.0.tgz",
+      "integrity": "sha512-KAPMiGnxt11PEgC2pTVrTQsvk5jt1kLUtG+ZamiKLphTZ7GiYT1Aa5kX6jp4jKWq1kqJHchnGT9CDm4g86A5Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-fast-compare": "^3.2.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || 17.x || 18.x || 19.x",
+        "react-dom": "^16.8 || 17.x || 18.x || 19.x"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",

frontend/package.json

@@ -15,7 +15,8 @@
     "firebase": "^12.6.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.9.5"
+    "react-router-dom": "^7.9.5",
+    "react-snowfall": "^2.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

frontend/src/App.tsx

@@ -9,6 +9,7 @@ import DebugOverlay from "./components/DebugOverlay";
 import AuthStatus from "./components/AuthStatus";
 import { useAuth } from "./auth/AuthProvider";
 import "./index.css";
+import Snowfall from "react-snowfall";
 
 const TIME_SYNC_OFF_THRESHOLD = 100;
 
@@ -29,6 +30,10 @@ export default function App() {
 
   return (
     <div className={`site ${open ? "sidebar-open" : ""}`}>
+      <Snowfall
+        snowflakeCount={140}
+        style={{ position: "fixed", width: "100vw", height: "100vh", pointerEvents: "none", zIndex: 2 }}
+      />
       {/* Top-left header (outside the card) */}
       <header className="site-header">