feat: add snowfall effect to LayoutContent

discordplace · Dec 17, 2024 · 53b450f · 53b450f
1 parent 5b4bff8
commit 53b450f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/client/app/layout-content.js b/client/app/layout-content.js
@@ -16,6 +16,7 @@ import useGeneralStore from '@/stores/general';
 import FullPageLoading from './components/FullPageLoading';
 import useLanguageStore from '@/stores/language';
 import ReportButtonProvider from '@/app/components/Providers/ReportButton';
+import Snowfall from 'react-snowfall';
 
 export default function RootLayoutContent({ children }) {
   const language = useLanguageStore(state => state.language);
@@ -30,6 +31,17 @@ export default function RootLayoutContent({ children }) {
 
   return (
     <section key={language}>
+      <Snowfall
+        snowflakeCount={100}
+        speed={[0.5, 1]}
+        wind={[1, 4.5]}
+        radius={[0.5, 3]}
+        style={{
+          zIndex: 9999999,
+          position: 'fixed'
+        }}
+      />
+
       <Script
         defer={true}
         src={config.analytics.script}

diff --git a/client/package.json b/client/package.json
@@ -56,6 +56,7 @@
     "react-markdown": "^9.0.1",
     "react-medium-image-zoom": "^5.2.11",
     "react-ripples": "^2.2.1",
+    "react-snowfall": "^2.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-text-transition": "^3.1.0",
     "react-twemoji": "^0.6.0",

diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml