Snow overlay

ChristmasSnow.vue

<script setup lang="ts">
import {isXmasTime} from "@/lib/dateTime";
// add xmas to your html class
</script>

<template>
  <div v-if="isXmasTime()"
       class="z-1199 absolute pointer-events-none opacity-50">
    <template v-for="i in Array.from(Array(30).keys())" :key="i">
      <div class="snowflake"></div>
    </template>
    <template v-for="i in Array.from(Array(100).keys())" :key="i">
      <div class="snow"></div>
    </template>
  </div>
</template>

<style scoped>

</style>

dateTime.ts

export const isXmasTime = (): boolean => {
	const today = new Date();
	const currentYear = today.getFullYear();

	let xmasBeginDate: Date;
	let xmasEndDate: Date;

	if (today >= new Date(currentYear, 5, 1)) {
		xmasBeginDate = new Date(currentYear, 11, 7);
		xmasEndDate = new Date(currentYear + 1, 0, 5);
	} else {
		xmasBeginDate = new Date(currentYear - 1, 11, 7);
		xmasEndDate = new Date(currentYear, 0, 5);
	}

	return today >= xmasBeginDate && today <= xmasEndDate;
}

snow.scss

html.xmas .snowflake {
  --size: 1vw;
  width: var(--size);
  height: var(--size);
  background: transparent;
  position: absolute;
  top: -5vh;
  &::after {
    content: '❄';
    font-size: .75em;
    color: white;
  }
}

@keyframes snowfall {
  0% {
    transform: translate3d(var(--left-ini), 0, 0);
  }
  100% {
    transform: translate3d(var(--left-end), 110vh, 0);
  }
}

@for $i from 1 through 50 {
  html.xmas .snowflake:nth-child(#{$i}) {
    --size: #{random(5) * 0.1}vw;
    --left-ini: #{random(20) - 10}vw;
    --left-end: #{random(20) - 10}vw;
    left: #{random(100)}vw;
    animation: snowfall #{5 + random(10)}s linear infinite;
    animation-delay: -#{random(10)}s;
  }
}

/* added small blur every 6 snowflakes*/
html.xmas .snowflake:nth-child(6n) {
  filter: blur(1px);
}

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

html.xmas .snow {
  $total: 200;
  position: absolute;
  width: 10px;
  height: 10px;
  background: transparent;

  &::after {
    content: '❄';
    font-size: .75em;
    color: white;
  }

  @for $i from 1 through $total {
    $random-x: random(1000000) * 0.0001vw;
    $random-offset: random_range(-100000, 100000) * 0.0001vw;
    $random-x-end: $random-x + $random-offset;
    $random-x-end-yoyo: $random-x + ($random-offset / 2);
    $random-yoyo-time: random_range(30000, 80000) / 100000;
    $random-yoyo-y: $random-yoyo-time * 100vh;
    $random-scale: random(10000) * 0.0001;
    $fall-duration: random_range(10, 30) * 1s;
    $fall-delay: random(30) * -1s;

    &:nth-child(#{$i}) {
      opacity: random(10000) * 0.0001;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @keyframes fall-#{$i} {
      #{percentage($random-yoyo-time)} {
        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
      }

      to {
        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
      }
    }
  }
}