Website: add snowfall

navikt · Dec 19, 2024 · a2b9b6a · a2b9b6a
1 parent c3d65a6
commit a2b9b6a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/aksel.nav.no/website/pages/index.tsx b/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

diff --git a/package.json b/package.json
@@ -200,5 +200,8 @@
     "axe-core": "4.10.0"
   },
   "_note1": "Forcing axe-core to 4.10.0 fixes this error: `frame.evaluate: TypeError: Cannot read properties of null (reading 'children')`",
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "react-snowfall": "^2.2.0"
+  }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -7786,6 +7786,7 @@ __metadata:
     react: "npm:^18.0.0"
     react-docgen-typescript: "npm:2.2.2"
     react-dom: "npm:^18.0.0"
+    react-snowfall: "npm:^2.2.0"
     storybook: "npm:^8.3.4"
     storybook-addon-pseudo-states: "npm:^4.0.2"
     stylelint: "npm:^16.10.0"
@@ -20271,7 +20272,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 +20555,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"