💄 Add background noise

components/layout/Filter.jsx

@@ -0,0 +1,16 @@
+const Filter = () => {
+  return (
+    <svg id="noise-filter-wrapper">
+      <filter id="noise-filter">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="6.29"
+          numOctaves="6"
+          stitchTiles="stitch"
+        />
+      </filter>
+    </svg>
+  )
+}
+
+export default Filter

components/layout/Layout.jsx

@@ -5,19 +5,24 @@ import { useBackground } from '../../contexts/BackgroundContext'
 import Footer from '../footer/Footer'
 import Header from '../header/Header'
 
+import Filter from './Filter'
+
 const Layout = ({ children }) => {
   const { animationStep } = useBackground()
 
   const classes = clsx('layout', { [`step-${animationStep}`]: true })
 
   return (
-    <div className={classes}>
-      <div className="layout__content">
-        <Header />
-        <main>{children}</main>
-        <Footer />
+    <>
+      <Filter />
+      <div className={classes}>
+        <div className="layout__content">
+          <Header />
+          <main>{children}</main>
+          <Footer />
+        </div>
       </div>
-    </div>
+    </>
   )
 }
 

components/layout/layout.scss

@@ -58,6 +58,8 @@
     position: relative;
     display: flex;
     flex-direction: column;
+
+    z-index: $index-content;
   }
 
   main {

styles/base.scss

@@ -15,3 +15,29 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+// Background filter
+#noise-filter-wrapper {
+  display: none;
+}
+
+body::before {
+  position: fixed;
+  left: 0;
+  top: 0;
+  content: '';
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  mix-blend-mode: darken;
+  // mix-blend-mode: difference;
+  // mix-blend-mode: exclusion;
+  // mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+
+body::before {
+  background: #fff;
+  filter: url(#noise-filter);
+  z-index: $index-filter;
+}

styles/tokens.scss

@@ -14,6 +14,8 @@ $purple: #6b00cf;
 $red: #e32e40;
 
 // Indexes
+$index-filter: 1;
+$index-content: 5;
 
 // Transitions
 $bezier-default: cubic-bezier(0.25, 0.1, 0.25, 1);