784 snow effect (#787)

* Create snowing component

frontend/src/Components/SnowflakesOverlay/SnowflakesOverlay.module.scss

@@ -0,0 +1,80 @@
+.snowflake {
+  position: fixed;
+  z-index: 9999;
+  user-select: none;
+  cursor: default;
+  animation-name: snowflakes-fall, snowflakes-shake;
+  animation-timing-function: linear, ease-in-out;
+  animation-iteration-count: infinite, infinite;
+  animation-play-state: running, running;
+  color: #ffffff;
+  font-size: 1em;
+  font-family: Arial, sans-serif;
+  text-shadow: 0 0 5px #000000;
+}
+
+@-webkit-keyframes snowflakes-fall {
+  0% {
+    top: -10%;
+  }
+  100% {
+    top: 100%;
+  }
+}
+
+@-webkit-keyframes snowflakes-shake {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+  50% {
+    -webkit-transform: translateX(80px);
+    transform: translateX(80px);
+  }
+}
+
+@keyframes snowflakes-fall {
+  0% {
+    top: -10%;
+  }
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes snowflakes-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(80px);
+  }
+}
+
+@for $i from 1 through 48 {
+  .snowflake:nth-of-type(#{$i}) {
+    left: #{random(100)} + '%';
+    top: calc(-10% - #{random(10)}) + '%';
+    animation-duration:
+      #{10 + random(5)}s,
+      #{2.5 + random(2)}s;
+    animation-delay:
+      #{($i * 0.2) + random(5)} + 's',
+      #{random(4)} + 's';
+
+    @keyframes snowflakes-shake-#{$i} {
+      0%,
+      100% {
+        transform: translateX(0);
+      }
+      50% {
+        transform: translateX(#{40 + random(40)}px);
+      }
+    }
+    animation-name:
+      snowflakes-fall,
+      snowflakes-shake-#{$i};
+  }
+}

frontend/src/Components/SnowflakesOverlay/SnowflakesOverlay.tsx

@@ -0,0 +1,35 @@
+import styles from './SnowflakesOverlay.module.scss';
+
+type SnowflakesOverlayProps = {
+  intensity?: 'low' | 'medium' | 'high' | 'extreme';
+};
+
+const SNOWFLAKE_SYMBOLS = ['❅', '❆', '❅', '❆', '❅', '❆', '❅', '❆', '❅', '❆', '❅', '❆'];
+
+export function SnowflakesOverlay({ intensity = 'low' }: SnowflakesOverlayProps) {
+  let snowflakes = SNOWFLAKE_SYMBOLS;
+
+  switch (intensity) {
+    case 'medium':
+      snowflakes = [...snowflakes, ...SNOWFLAKE_SYMBOLS];
+      break;
+    case 'high':
+      snowflakes = [...snowflakes, ...SNOWFLAKE_SYMBOLS, ...SNOWFLAKE_SYMBOLS];
+      break;
+    case 'extreme':
+      snowflakes = [...snowflakes, ...SNOWFLAKE_SYMBOLS, ...SNOWFLAKE_SYMBOLS, ...SNOWFLAKE_SYMBOLS];
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <div className={styles.snowflakes} aria-hidden="true">
+      {snowflakes.map((symbol, index) => (
+        <div key={index} className={styles.snowflake}>
+          {symbol}
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/Components/SnowflakesOverlay/index.ts

@@ -0,0 +1 @@
+export { SnowflakesOverlay } from './SnowflakesOverlay';

frontend/src/Pages/ComponentPage/ComponentPage.tsx

@@ -2,6 +2,7 @@ import { Button, Countdown, InputField, ProgressBar, RadioButton } from '~/Compo
 import { Checkbox } from '~/Components/Checkbox';
 import { Link } from '~/Components/Link';
 import { List } from '~/Components/List';
+import { SnowflakesOverlay } from '~/Components/SnowflakesOverlay/SnowflakesOverlay';
 import { norwegianFlag } from '~/assets';
 import { HOUR_MILLIS } from '~/constants';
 import styles from './ComponentPage.module.scss';
@@ -57,6 +58,7 @@ export function ComponentPage() {
         <ProgressBar value={75} max={100} />
       </div>
       <div>
+        <SnowflakesOverlay />
         <h2>
           <Countdown targetDate={new Date(new Date().getTime() + HOUR_MILLIS)}>
             <img src={norwegianFlag}></img>