update fonts

wheattoast11 · Nov 30, 2024 · faac890 · faac890
1 parent a1639e0
commit faac890
Show file tree

Hide file tree

Showing 6 changed files with 179 additions and 569 deletions.
diff --git a/index.html b/index.html
@@ -23,6 +23,20 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
+
+    <!-- Preload critical fonts -->
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    >
+    <noscript>
+      <link
+        href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap"
+        rel="stylesheet"
+      >
+    </noscript>
 </head>
 <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,17 +14,17 @@
     "@remotion/cli": "^4.0.79",
     "@remotion/player": "^4.0.79",
     "@remotion/renderer": "^4.0.79",
-    "framer-motion": "^11.0.3",
+    "framer-motion": "^11.0.8",
     "pts": "^0.11.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "simplex-noise": "^4.0.1",
-    "three": "^0.161.0",
+    "three": "^0.162.0",
     "web-vitals": "^3.5.2"
   },
   "devDependencies": {
-    "@types/three": "^0.161.2",
+    "@types/three": "^0.162.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -58,6 +58,40 @@ function Home({ onMount }) {
     }
   };
 
+  const PlatformMarquee = React.memo(() => {
+    const platforms = [
+      { name: 'terminals', className: 'platform-terminals' },
+      { name: 'radical', className: 'platform-radical' },
+      { name: 'pathfinder', className: 'platform-pathfinder' },
+      { name: 'wuji', className: 'platform-wuji' },
+      { name: 'boom', className: 'platform-boom' }
+    ];
+
+    return (
+      <div className="platforms-marquee">
+        <div className="platforms-track">
+          {[...Array(2)].map((_, setIndex) => (
+            <div key={setIndex} className="platform-set">
+              {platforms.map(({ name, className }) => (
+                <motion.span
+                  key={`${setIndex}-${name}`}
+                  className={`platform-name ${className}`}
+                  whileHover={{
+                    scale: 1.1,
+                    transition: { duration: 0.2 }
+                  }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  {name}
+                </motion.span>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  });
+
   return (
     <>
       <canvas id="bg-canvas" style={{
@@ -100,20 +134,7 @@ function Home({ onMount }) {
           </div>
         </motion.section>
 
-        <div className="platforms-marquee">
-          <div className="platforms-track">
-            {[...Array(2)].map((_, setIndex) => (
-              <div key={setIndex} style={{ display: 'flex', gap: '4rem' }}>
-                <span className="platform-name platform-terminals">terminals</span>
-                <span className="platform-name platform-radical">radical</span>
-                <span className="platform-name platform-pathfinder">pathfinder</span>
-                <span className="platform-name platform-wuji">wuji</span>
-                <span className="platform-name platform-boom">boom</span>
-                <span className="platform-name platform-journey">journey</span>
-              </div>
-            ))}
-          </div>
-        </div>
+        <PlatformMarquee />
 
         <motion.section 
           className="section solutions-grid"

diff --git a/src/three/Scene.js b/src/three/Scene.js
@@ -33,6 +33,21 @@ export class Scene {
     this.setupLights();
     this.setupPostProcessing();
     this.setupEventListeners();
+
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    this.renderer.powerPreference = "high-performance";
+
+    const bloomPass = new UnrealBloomPass(
+      new THREE.Vector2(window.innerWidth, window.innerHeight),
+      0.5,  // strength
+      0.4,  // radius
+      0.85  // threshold
+    );
+    bloomPass.renderTargetSize = 0.5; // Reduce resolution for better performance
+
+    this.performanceMode = 'high';
+    this.fpsHistory = [];
+    this.checkPerformance();
   }
 
   init() {
@@ -141,4 +156,38 @@ export class Scene {
       }
     });
   }
+
+  checkPerformance() {
+    setInterval(() => {
+      const avgFps = this.fpsHistory.reduce((a, b) => a + b, 0) / this.fpsHistory.length;
+
+      if (avgFps < 30 && this.performanceMode !== 'low') {
+        this.setLowPerformanceMode();
+      } else if (avgFps > 45 && this.performanceMode !== 'high') {
+        this.setHighPerformanceMode();
+      }
+
+      this.fpsHistory = [];
+    }, 1000);
+  }
+
+  setLowPerformanceMode() {
+    this.performanceMode = 'low';
+    this.renderer.setPixelRatio(1);
+    this.flowField.particleCount = Math.floor(this.flowField.particleCount * 0.7);
+    this.spheres.spheres.forEach(sphere => {
+      if (sphere.material.wireframe) {
+        sphere.visible = false;
+      }
+    });
+  }
+
+  setHighPerformanceMode() {
+    this.performanceMode = 'high';
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    this.flowField.particleCount = Math.floor(this.flowField.particleCount * 1.3);
+    this.spheres.spheres.forEach(sphere => {
+      sphere.visible = true;
+    });
+  }
 }