make background pigs that hide from the footer 🐷🐷🐷

web/package-lock.json

@@ -19,6 +19,7 @@
         "nuqs": "^1.17.2",
         "react": "^18",
         "react-dom": "^18",
+        "react-intersection-observer": "^9.10.2",
         "sass": "^1.77.1",
         "urql": "^4.1.0"
       },
@@ -7222,6 +7223,20 @@
         "react": "^18.3.0"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.10.2",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.10.2.tgz",
+      "integrity": "sha512-j2hGADK2hCbAlfaq6L3tVLb4iqngoN7B1fT16MwJ4J16YW/vWLcmAIinLsw0lgpZeMi4UDUWtHC9QDde0/P1yQ==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

web/package.json

@@ -21,6 +21,7 @@
     "nuqs": "^1.17.2",
     "react": "^18",
     "react-dom": "^18",
+    "react-intersection-observer": "^9.10.2",
     "sass": "^1.77.1",
     "urql": "^4.1.0"
   },

web/src/app/utleie/page.tsx

@@ -4,7 +4,7 @@ import { getClient } from "@/app/client";
 import { VenueList } from "@/components/venues/VenueList";
 import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
-import { Pig } from "@/components/general/Pig";
+import { BgPig } from "@/components/general/BgPig";
 
 const VenueFragmentDefinition = graphql(`
   fragment Venue on VenuePage {
@@ -56,9 +56,7 @@ export default async function Page() {
     <main className="site-main" id="main">
       <PageHeader heading="Utleie" />
       <VenueList venues={venues} />
-      <div className="bg-pig">
-        <Pig type="key" />
-      </div>
+      <BgPig type="key" />
     </main>
   );
 }

web/src/components/general/BgPig.tsx

@@ -0,0 +1,51 @@
+"use client";
+import styles from "./pig.module.scss";
+import { ChillPig } from "./pigs/ChillPig";
+import { DancePig } from "./pigs/DancePig";
+import { DrinkPig } from "./pigs/DrinkPig";
+import { GuardPig } from "./pigs/GuardPig";
+import { KeyPig } from "./pigs/KeyPig";
+import { ListenPig } from "./pigs/ListenPig";
+import { LogoPig } from "./pigs/LogoPig";
+import { MusicPig } from "./pigs/MusicPig";
+import { PeekPig } from "./pigs/PeekPig";
+import { PointPig } from "./pigs/PointPig";
+import { StudentPig } from "./pigs/StudentPig";
+import { useInView } from "react-intersection-observer";
+
+export const BgPig = ({
+  type,
+}: {
+  type:
+    | "logo"
+    | "music"
+    | "drink"
+    | "dance"
+    | "point"
+    | "student"
+    | "listen"
+    | "guard"
+    | "key"
+    | "chill"
+    | "peek";
+}) => {
+  const { ref: observer, inView: IsInView } = useInView({ triggerOnce: false });
+  return (
+    <div className={styles.bgPigWrapper}>
+      <div className={`${styles.pig} ${styles.bgPig}`} data-inview={IsInView}>
+        {type === "logo" && <LogoPig />}
+        {type === "music" && <MusicPig />}
+        {type === "drink" && <DrinkPig />}
+        {type === "dance" && <DancePig />}
+        {type === "point" && <PointPig />}
+        {type === "student" && <StudentPig />}
+        {type === "listen" && <ListenPig />}
+        {type === "guard" && <GuardPig />}
+        {type === "key" && <KeyPig />}
+        {type === "chill" && <ChillPig />}
+        {type === "peek" && <PeekPig />}
+      </div>
+      <div className={styles.observer} ref={observer}></div>
+    </div>
+  );
+};

web/src/components/general/pig.module.scss

@@ -5,4 +5,24 @@
   svg {
     width: 100%;
   }
+}
+
+.bgPig {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  transform: translate(1vw, 20%);
+  z-index: 600;
+  --color-pig: var(--color-neufPink);
+  transition: opacity .6s ease;
+
+  &[data-inview=true] {
+    opacity: 0;
+  }
+}
+
+.observer {
+  position: absolute;
+  bottom: -5rem;
+  right: 0;
 }

web/src/css/base.scss

@@ -148,6 +148,7 @@ input[type="text"] {
 .site-main {
   padding: var(--spacing-sitepadding);
   min-height: 100vh;
+  position: relative;
 }
 
 .hiddenLink {
@@ -174,12 +175,4 @@ input[type="text"] {
   &:has(:focus-visible) {
     box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px var(--color-green-dark);
   }
-}
-
-.bg-pig {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  z-index: 600;
-  --color-pig: var(--color-neufPink);
 }