snow (#1379)

* snow

* format

apps/frontend/src/app/App.scss

@@ -18,3 +18,60 @@ div#formula > * {
   padding-left: 0;
   text-indent: 0;
 }
+
+body {
+  background: radial-gradient(ellipse at bottom, #1b2735 0%, #0c1020 100%);
+}
+
+@function random_range($min, $max) {
+  $rand: random();
+  $random_range: $min + floor($rand * (($max - $min) + 1));
+  @return $random_range;
+}
+
+#snowflake-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.snowflake {
+  $total: 200;
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: white;
+  border-radius: 50%;
+  filter: drop-shadow(0 0 10px white);
+  z-index: 99999;
+
+  @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 * 300vh;
+    $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, 300vh) scale($random-scale);
+      }
+    }
+  }
+}

apps/frontend/src/app/App.tsx

@@ -23,6 +23,7 @@ import ErrorBoundary from './ErrorBoundary'
 import Footer from './Footer'
 import Header from './Header'
 import useTitle from './ReactHooks/useTitle'
+import Snow from './Snow'
 import './i18n'
 
 const PageHome = lazy(() => import('./PageHome'))
@@ -133,7 +134,7 @@ function App() {
 }
 function Content() {
   return (
-    <Grid container direction="column" minHeight="100vh">
+    <Grid container direction="column" minHeight="100vh" position="relative">
       <Grid item>
         <Header anchor="back-to-top-anchor" />
       </Grid>
@@ -163,6 +164,7 @@ function Content() {
       </Container>
       {/* make sure footer is always at bottom */}
       <Grid item flexGrow={1} />
+      <Snow />
       <Grid item>
         <Footer />
       </Grid>

apps/frontend/src/app/Snow.tsx

@@ -0,0 +1,11 @@
+import { range } from '@genshin-optimizer/util'
+
+export default function Snow() {
+  return (
+    <div id="snowflake-container">
+      {range(1, 200).map(() => (
+        <div className="snowflake" />
+      ))}
+    </div>
+  )
+}