performance and visual updates

wheattoast11 · Nov 30, 2024 · 7d67edb · 7d67edb
1 parent 595493c
commit 7d67edb
Show file tree

Hide file tree

Showing 12 changed files with 687 additions and 227 deletions.
diff --git a/package.json b/package.json
@@ -18,10 +18,13 @@
     "@remotion/player": "^4.0.79",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0"
+    "react-router-dom": "^6.22.0",
+    "framer-motion": "^11.0.3",
+    "pts": "^0.11.4"
   },
   "devDependencies": {
     "vite": "^5.4.2",
-    "@vitejs/plugin-react": "^4.2.1"
+    "@vitejs/plugin-react": "^4.2.1",
+    "@types/three": "^0.161.2"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,65 +1,81 @@
-import React, { useEffect, useState } from 'react';
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import Home from './pages/Home';
-import Manifesto from './pages/Manifesto';
-import { Scene } from './three/Scene';
-import { CardEffects } from './ui/CardEffects';
-import { ScrollEffects } from './ui/ScrollEffects';
-import { RemotionVideo } from './Video';
+import React, { Suspense, lazy, useEffect, useState } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import LoadingState from './components/LoadingState';
+
+// Lazy load components
+const Home = lazy(() => import('./pages/Home'));
+const Manifesto = lazy(() => import('./pages/Manifesto'));
+const Scene = lazy(() => import('./three/Scene').then(module => ({ default: module.Scene })));
 
 function App() {
   const [scene, setScene] = useState(null);
-  const [effects, setEffects] = useState({ card: null, scroll: null });
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    // Initialize Three.js scene
-    const newScene = new Scene();
-    newScene.animate();
-    setScene(newScene);
-
-    // Initialize UI effects
-    const cardEffects = new CardEffects();
-    const scrollEffects = new ScrollEffects();
-    setEffects({ card: cardEffects, scroll: scrollEffects });
-
-    // Initialize Remotion video
-    const videoContainer = document.createElement('div');
-    videoContainer.id = 'remotion-video';
-    document.body.appendChild(videoContainer);
+    // Preload critical assets
+    const preloadAssets = async () => {
+      try {
+        // Initialize Three.js scene
+        const newScene = new Scene();
+        await newScene.init(); // Assuming we make init async
+        setScene(newScene);
+
+        // Simulate minimum loading time for smooth transition
+        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        setIsLoading(false);
+      } catch (error) {
+        console.error('Error loading assets:', error);
+        setIsLoading(false);
+      }
+    };
 
-    const root = document.createElement('div');
-    root.id = 'remotion-root';
-    videoContainer.appendChild(root);
-
-    const videoRoot = createRoot(root);
-    videoRoot.render(<RemotionVideo />);
+    preloadAssets();
 
     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();
-  };
+  // Debounced resize handler
+  useEffect(() => {
+    let resizeTimeout;
+    const handleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        if (scene) {
+          scene.handleResize();
+        }
+      }, 250);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(resizeTimeout);
+    };
+  }, [scene]);
+
+  if (isLoading) {
+    return <LoadingState />;
+  }
 
   return (
     <Router>
-      <canvas id="bg"></canvas>
-      <Routes>
-        <Route path="/" element={<Home onMount={handleRouteChange} />} />
-        <Route path="/manifesto" element={<Manifesto onMount={handleRouteChange} />} />
-        <Route path="*" element={<Navigate to="/" />} />
-      </Routes>
+      <Suspense fallback={<LoadingState />}>
+        <Routes>
+          <Route 
+            path="/" 
+            element={<Home onMount={() => scene?.animate()} />} 
+          />
+          <Route 
+            path="/manifesto" 
+            element={<Manifesto onMount={() => scene?.animate()} />} 
+          />
+        </Routes>
+      </Suspense>
     </Router>
   );
 }

diff --git a/src/Video.jsx b/src/Video.jsx
@@ -28,58 +28,82 @@ const BackgroundAnimation = () => {
 
     const ctx = canvas.getContext('2d');
     let animationFrame;
-    let particles = Array.from({ length: 100 }, () => ({
+
+    // Increase number of particles and add variation
+    const particles = Array.from({ length: 150 }, () => ({
       x: Math.random() * dimensions.width,
       y: Math.random() * dimensions.height,
-      size: Math.random() * 2 + 1,
-      speedX: (Math.random() - 0.5) * 0.5,
-      speedY: (Math.random() - 0.5) * 0.5
+      size: Math.random() * 3 + 0.5,
+      speedX: (Math.random() - 0.5) * 0.3,
+      speedY: (Math.random() - 0.5) * 0.3,
+      opacity: Math.random() * 0.5 + 0.1
     }));
 
     const animate = (time) => {
       canvas.width = dimensions.width;
       canvas.height = dimensions.height;
 
-      // Create gradient background
-      const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
-      gradient.addColorStop(0, 'rgba(122, 158, 159, 0.05)');
-      gradient.addColorStop(1, 'rgba(80, 108, 127, 0.05)');
+      // Enhanced gradient background
+      const gradient = ctx.createRadialGradient(
+        dimensions.width / 2,
+        dimensions.height / 2,
+        0,
+        dimensions.width / 2,
+        dimensions.height / 2,
+        dimensions.width * 0.7
+      );
+      gradient.addColorStop(0, 'rgba(122, 158, 159, 0.03)');
+      gradient.addColorStop(0.5, 'rgba(80, 108, 127, 0.02)');
+      gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
       ctx.fillStyle = gradient;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-      // Update and draw particles
+      // Update and draw particles with enhanced effects
       particles.forEach(particle => {
-        const noiseX = noise4D(particle.x * 0.001, particle.y * 0.001, time * 0.0001, 0);
-        const noiseY = noise4D(particle.x * 0.001, particle.y * 0.001, 0, time * 0.0001);
+        const noiseX = noise4D(particle.x * 0.001, particle.y * 0.001, time * 0.0001, 0) * 2;
+        const noiseY = noise4D(particle.x * 0.001, particle.y * 0.001, 0, time * 0.0001) * 2;
 
         particle.x += particle.speedX + noiseX;
         particle.y += particle.speedY + noiseY;
 
-        // Wrap around screen
-        if (particle.x < 0) particle.x = canvas.width;
-        if (particle.x > canvas.width) particle.x = 0;
-        if (particle.y < 0) particle.y = canvas.height;
-        if (particle.y > canvas.height) particle.y = 0;
-
-        // Draw particle
+        // Improved wrapping logic
+        if (particle.x < -50) particle.x = canvas.width + 50;
+        if (particle.x > canvas.width + 50) particle.x = -50;
+        if (particle.y < -50) particle.y = canvas.height + 50;
+        if (particle.y > canvas.height + 50) particle.y = -50;
+
+        // Draw particle with glow effect
+        const glow = ctx.createRadialGradient(
+          particle.x,
+          particle.y,
+          0,
+          particle.x,
+          particle.y,
+          particle.size * 2
+        );
+        glow.addColorStop(0, `rgba(122, 158, 159, ${particle.opacity})`);
+        glow.addColorStop(1, 'rgba(122, 158, 159, 0)');
+
         ctx.beginPath();
-        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
-        ctx.fillStyle = `rgba(122, 158, 159, ${0.1 + Math.abs(noiseX) * 0.5})`;
+        ctx.arc(particle.x, particle.y, particle.size * 2, 0, Math.PI * 2);
+        ctx.fillStyle = glow;
         ctx.fill();
       });
 
-      // Draw flowing lines
+      // Draw flowing lines with enhanced effect
       ctx.beginPath();
-      ctx.strokeStyle = 'rgba(122, 158, 159, 0.1)';
-      ctx.lineWidth = 1;
+      ctx.strokeStyle = 'rgba(122, 158, 159, 0.05)';
+      ctx.lineWidth = 0.5;
 
-      for (let i = 0; i < canvas.width; i += 50) {
+      for (let i = 0; i < canvas.width; i += 30) {
         const startY = canvas.height / 2;
         ctx.moveTo(i, startY);
 
-        for (let x = 0; x < canvas.width; x += 10) {
-          const y = startY + Math.sin(x * 0.01 + time * 0.001) * 50 +
-                    noise4D(x * 0.001, startY * 0.001, time * 0.0001, 0) * 30;
+        for (let x = 0; x < canvas.width; x += 5) {
+          const noise = noise4D(x * 0.002, startY * 0.002, time * 0.0001, 0);
+          const y = startY + 
+                   Math.sin(x * 0.01 + time * 0.001) * 30 +
+                   noise * 50;
           ctx.lineTo(x, y);
         }
       }
@@ -104,7 +128,7 @@ const BackgroundAnimation = () => {
         style={{
           width: '100%',
           height: '100%',
-          opacity: 0.6,
+          opacity: 0.8,
           mixBlendMode: 'screen'
         }}
       />

diff --git a/src/components/LoadingState.jsx b/src/components/LoadingState.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const LoadingState = () => {
+  return (
+    <motion.div
+      className="loading-container"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
+      <div className="loading-content">
+        <motion.div
+          className="loading-logo"
+          animate={{
+            scale: [1, 1.2, 1],
+            opacity: [0.5, 1, 0.5]
+          }}
+          transition={{
+            duration: 2,
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+        >
+          <svg 
+            width="50" 
+            height="50" 
+            viewBox="0 0 50 50"
+            fill="none"
+          >
+            {/* Add your logo SVG path here */}
+            <circle cx="25" cy="25" r="20" stroke="currentColor" strokeWidth="2" />
+          </svg>
+        </motion.div>
+
+        <motion.div
+          className="loading-dots"
+          initial="hidden"
+          animate="visible"
+        >
+          {[0, 1, 2].map((_, i) => (
+            <motion.span
+              key={i}
+              className="dot"
+              animate={{
+                y: ["0%", "-50%", "0%"],
+                opacity: [0.5, 1, 0.5]
+              }}
+              transition={{
+                duration: 1,
+                repeat: Infinity,
+                delay: i * 0.2,
+                ease: "easeInOut"
+              }}
+            />
+          ))}
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default LoadingState;