fix routing persistence

src/App.jsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import { createRoot } from 'react-dom/client';
+import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import Home from './pages/Home';
 import Manifesto from './pages/Manifesto';
@@ -9,14 +8,19 @@ import { ScrollEffects } from './ui/ScrollEffects';
 import { RemotionVideo } from './Video';
 
 function App() {
+  const [scene, setScene] = useState(null);
+  const [effects, setEffects] = useState({ card: null, scroll: null });
+
   useEffect(() => {
     // Initialize Three.js scene
-    const scene = new Scene();
-    scene.animate();
+    const newScene = new Scene();
+    newScene.animate();
+    setScene(newScene);
 
     // Initialize UI effects
-    new CardEffects();
-    new ScrollEffects();
+    const cardEffects = new CardEffects();
+    const scrollEffects = new ScrollEffects();
+    setEffects({ card: cardEffects, scroll: scrollEffects });
 
     // Initialize Remotion video
     const videoContainer = document.createElement('div');
@@ -31,18 +35,28 @@ function App() {
     videoRoot.render(<RemotionVideo />);
 
     return () => {
+      // Cleanup
+      if (scene) {
+        scene.dispose();
+      }
       if (videoContainer.parentNode) {
         videoContainer.parentNode.removeChild(videoContainer);
       }
     };
   }, []);
 
+  // Reinitialize effects on route change
+  const handleRouteChange = () => {
+    if (effects.card) effects.card.init();
+    if (effects.scroll) effects.scroll.init();
+  };
+
   return (
     <Router>
       <canvas id="bg"></canvas>
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/manifesto" element={<Manifesto />} />
+        <Route path="/" element={<Home onMount={handleRouteChange} />} />
+        <Route path="/manifesto" element={<Manifesto onMount={handleRouteChange} />} />
         <Route path="*" element={<Navigate to="/" />} />
       </Routes>
     </Router>

src/pages/Home.jsx

@@ -1,7 +1,11 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
-function Home() {
+function Home({ onMount }) {
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
+
   return (
     <div id="app">
       <canvas id="bg"></canvas>

src/pages/Manifesto.jsx

@@ -1,7 +1,11 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
-function Manifesto() {
+function Manifesto({ onMount }) {
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
+
   return (
     <div id="app">
       <canvas id="bg"></canvas>

src/three/Scene.js

@@ -64,4 +64,24 @@ export class Scene {
 
     this.renderer.render(this.scene, this.camera);
   }
+
+  dispose() {
+    // Remove event listeners
+    window.removeEventListener('resize', this.handleResize);
+    document.removeEventListener('mousemove', this.handleMouseMove);
+
+    // Dispose of Three.js resources
+    this.scene.traverse((object) => {
+      if (object.geometry) object.geometry.dispose();
+      if (object.material) {
+        if (Array.isArray(object.material)) {
+          object.material.forEach(material => material.dispose());
+        } else {
+          object.material.dispose();
+        }
+      }
+    });
+
+    this.renderer.dispose();
+  }
 }