feat(client): shuffle background mesh on page change

client/src/components/Layout.tsx

@@ -4,8 +4,10 @@ import Nav from "./Nav";
 import useNotes from "./hooks/useNotes";
 import { Link, Outlet } from "react-router-dom";
 import { useState } from "react";
+import { useShuffleBackgroundMesh } from "./hooks/useShuffleBackgroundMesh";
 
 export default function Layout() {
+  useShuffleBackgroundMesh();
   useUser();
   useNotes();
   const [isNavOpen, setIsNavOpen] = useState(false);

client/src/components/hooks/useShuffleBackgroundMesh.ts

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+import { shuffleBackgroundMesh } from "eri";
+import { useLocation } from "react-router-dom";
+
+export function useShuffleBackgroundMesh() {
+  const { pathname } = useLocation();
+  const lastPathnameRef = useRef<string | undefined>();
+  useEffect(() => {
+    if (
+      lastPathnameRef.current !== undefined &&
+      lastPathnameRef.current !== pathname
+    )
+      shuffleBackgroundMesh();
+    lastPathnameRef.current = pathname;
+  }, [pathname]);
+}