❄️ ⛄ 🎶 🎄 Website: add snowfall (again!) (#3475)

* Website: add snowfall

* website: add egregious christmas ambience

* Revert "website: add egregious christmas ambience"

This reverts commit 3fb858b.

* move dep

* yarn.lock

aksel.nav.no/website/package.json

@@ -66,6 +66,7 @@
     "react-markdown": "^9.0.1",
     "react-responsive-masonry": "2.2.0",
     "react-rx": "^2.1.3",
+    "react-snowfall": "^2.2.0",
     "remark-gfm": "^4.0.0",
     "sanity": "3.59.0",
     "sanity-plugin-iframe-pane": "^3.1.6",

aksel.nav.no/website/pages/index.tsx

@@ -3,6 +3,7 @@ import cl from "clsx";
 import { groq } from "next-sanity";
 import { GetStaticProps } from "next/types";
 import { useState } from "react";
+import Snowfall from "react-snowfall";
 import {
   CompassIcon,
   ComponentIcon,
@@ -197,6 +198,17 @@ const Forside = ({ page, tema, blocks }: PageProps["props"]) => {
       />
       <Header />
       <main tabIndex={-1} id="hovedinnhold" className="focus:outline-none">
+        {!pause && (
+          <div aria-hidden>
+            <Snowfall
+              style={{ zIndex: 1 }}
+              color="rgba(230, 241, 248, 0.9)"
+              speed={reducedMotion || pause ? [0, 0] : [0.1, 0.2]}
+              wind={reducedMotion || pause ? [0, 0] : [-0.2, 0.2]}
+              snowflakeCount={600}
+            />
+          </div>
+        )}
         <div className="z-20 pb-28">
           <div className="relative mx-auto mb-12 mt-20 grid w-full place-items-center px-4 text-center sm:mt-36 sm:max-w-[632px] sm:px-6">
             <Heading

yarn.lock

@@ -20271,7 +20271,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.1.1, react-fast-compare@npm:^3.2.0":
+"react-fast-compare@npm:^3.1.1, react-fast-compare@npm:^3.2.0, react-fast-compare@npm:^3.2.2":
   version: 3.2.2
   resolution: "react-fast-compare@npm:3.2.2"
   checksum: 10/a6826180ba75cefba1c8d3ac539735f9b627ca05d3d307fe155487f5d0228d376dac6c9708d04a283a7b9f9aee599b637446635b79c8c8753d0b4eece56c125c
@@ -20554,6 +20554,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-snowfall@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "react-snowfall@npm:2.2.0"
+  dependencies:
+    react-fast-compare: "npm:^3.2.2"
+  peerDependencies:
+    react: ^16.8 || 17.x || 18.x
+    react-dom: ^16.8 || 17.x || 18.x
+  checksum: 10/ef9945ec75294e44ff17ec2b90f3e6ab9ec07f2a04804b253fc5737e9838baa20085351d019dc6a366f24874f0c58e8360d23b38a08242a022ff86e3a68ed22c
+  languageName: node
+  linkType: hard
+
 "react-style-proptype@npm:^3.2.2":
   version: 3.2.2
   resolution: "react-style-proptype@npm:3.2.2"
@@ -25455,6 +25467,7 @@ __metadata:
     react-markdown: "npm:^9.0.1"
     react-responsive-masonry: "npm:2.2.0"
     react-rx: "npm:^2.1.3"
+    react-snowfall: "npm:^2.2.0"
     remark-gfm: "npm:^4.0.0"
     rss: "npm:^1.2.2"
     sanity: "npm:3.59.0"