snowfall

package.json

@@ -18,6 +18,7 @@
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
+    "react-snowfall": "^2.1.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/pages/advent-calendar-2024/components/label-rotate.jsx

@@ -14,8 +14,8 @@ const RotatingSVG = ({ fill }) => {
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={isMobile ? 48 : 84}
-        height={isMobile ? 48 : 84}
+        width={isMobile ? 48 : 96}
+        height={isMobile ? 48 : 96}
         viewBox="0 0 96 96"
         fill={skinVars.colors.brand}
       >
@@ -42,8 +42,6 @@ const RotatingSVG = ({ fill }) => {
           className={`${styles.rotationInverse} ${
             isHovered ? styles.slowMo : ""
           }`}
-          width={36}
-          height={36}
         >
           <path d="M59.7639 40.5002L63.6739 51.0102C64.6939 53.7702 63.2439 56.8202 60.4239 57.8202C59.0739 58.3002 57.5839 58.2402 56.2739 57.6402C54.9639 57.0402 53.9539 55.9602 53.4639 54.6402L51.3239 48.8802C50.1539 46.0002 47.2739 46.6902 47.2739 46.6902L49.5139 40.6202C50.0439 39.0902 51.2539 37.8702 52.8039 37.3202C55.6239 36.3202 58.7339 37.7402 59.7639 40.5002ZM52.7543 55.2501C52.9243 55.6601 53.1343 56.0401 53.3943 56.4101L53.3842 56.4001C53.9327 57.0352 54.2312 57.2721 54.2975 57.3248L54.2975 57.3248L54.2975 57.3248L54.3042 57.3301C52.8042 58.1801 50.9443 58.3701 49.2642 57.8301C47.8442 57.3701 46.6842 56.4401 46.0442 55.2301C45.4042 54.0301 45.3342 52.6401 45.8542 51.3901L47.0543 48.4801C47.5443 48.4501 48.0443 48.4401 48.5343 48.4601C49.4643 48.5201 50.1143 48.9601 50.5043 49.8101L52.7543 55.2501ZM36.1641 40.8202C37.1741 38.0802 40.2341 36.6602 43.0041 37.6602C45.7741 38.6602 47.2041 41.7002 46.1941 44.4402L42.3541 54.9002C41.3441 57.6402 38.2841 59.0602 35.5141 58.0602C32.7441 57.0602 31.3141 54.0202 32.3241 51.2802L36.1641 40.8202Z" />
         </g>

src/pages/advent-calendar-2024/pages/calendar-view.jsx

@@ -23,6 +23,7 @@ import { CARD_STATES, TOTAL_CALENDAR_DAYS } from "../utils/constants";
 import ToastWrapper from "../components/toast-wrapper";
 import contentByDate from "../utils/content-config";
 import DecorationSnake from "../assets/decorations/decoration-snake.jsx";
+import Snowfall from "react-snowfall";
 
 const CalendarView = () => {
   const location = useLocation();
@@ -139,8 +140,23 @@ const CalendarView = () => {
     ));
   }, [completedDays, calendarDays]);
 
+  const snowflake1 = document.createElement("img");
+  snowflake1.src = "./snowflake_01.svg";
+  const snowflake2 = document.createElement("img");
+  snowflake2.src = "./snowflake_01.svg";
+
+  const customSnow = [snowflake1, snowflake2];
+
   return (
     <>
+      <Snowfall
+        color="#EEF0FB"
+        radius={[8, 8]}
+        speed={[1.0, 2.0]} // default [1.0, 3.0]
+        snowflakeCount={20}
+        // images={customSnow}
+        // snowflakeCount={Math.floor(Math.random() * (2000 - 200 + 1)) + 200}
+      />
       <NavBar />
       <ResponsiveLayout>
         <Box paddingY={42}>

yarn.lock

@@ -8105,7 +8105,7 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-fast-compare@^3.1.1:
+react-fast-compare@^3.1.1, react-fast-compare@^3.2.2:
   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==
@@ -8227,6 +8227,13 @@ react-side-effect@^2.1.0:
   resolved "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz"
   integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
 
+react-snowfall@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-snowfall/-/react-snowfall-2.1.1.tgz#0ad21415b3256af4522b7264b3ad61be5ba22c7d"
+  integrity sha512-29F2U+skZc8uYYYzVP2Ub4mbc5nPH+0jYr1yXDysaPCnHdl9nVUN3h/ygg6PYw2LH53q6ZQCNfj30kVliaPvBg==
+  dependencies:
+    react-fast-compare "^3.2.2"
+
 react-themeable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/react-themeable/-/react-themeable-1.1.0.tgz"