show animation

src/pages/advent-calendar-2024/components/snow-fall-animation.css

@@ -0,0 +1,43 @@
+.snowfall {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1000;
+  }
+
+  .snowflake {
+    position: absolute;
+    top: -20px;
+    width: 4px;
+    height: 4px;
+    background: rgb(186, 186, 218);
+    /* border-radius: 50%; */
+    filter: blur(0.5px);
+    animation: fall linear infinite;
+  }
+
+  @keyframes fall {
+    0% {
+      transform: translateX(0) translateY(0);
+      opacity: 0;
+    }
+    10% {
+      opacity: 1;
+    }
+
+    90% {
+        opacity: 1;
+    }
+    100% {
+      transform: translateX(100px) translateY(100vh);
+      opacity: 0;
+    }
+  }
+
+
+  .snowflake:nth-child(2n) {
+    width: 6px;
+    height: 6px;
+  }
+

src/pages/advent-calendar-2024/components/snow-fall-animation.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import './snow-fall-animation.css';
+
+const Snowfall = ({ numFlakes = 50 }) => {
+  return (
+    <div className="snowfall">
+      {Array.from({ length: numFlakes }).map((_, index) => (
+        <div 
+          key={index} 
+          className="snowflake"
+          style={{
+            left: `${Math.random() * 100}%`,  // Position
+            animationDuration: `${Math.random() * 10 + 20}s` //duration
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Snowfall;

src/pages/advent-calendar-2024/pages/coming-soon.jsx

@@ -8,6 +8,7 @@ import {
   Timer, 
 } from "@telefonica/mistica";
 import NavBar from "../components/navbar";
+import Snowfall from '../components/snow-fall-animation';
 
 const ComingSoonPage = () => {
 
@@ -37,6 +38,8 @@ const endTimestamp = new Date(defaultTargetDate).getTime();
           </Stack>
         </Box>
       </ResponsiveLayout>
+
+      <Snowfall numFlakes={40} />
     </>
   );
 };