floating particles use useAnimationFrame, reduce-motion, smaller screen optimizations

Author: DavidK4leido5

apps/codebility/app/(marketing)/_components/landing/FloatingParticles.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useSyncExternalStore } from "react";
-import { motion } from "framer-motion";
+import { useRef, useSyncExternalStore } from "react";
+import { useAnimationFrame } from "framer-motion";
 
 interface Particle {
   id: number;
@@ -23,21 +23,28 @@ const PARTICLE_COLORS = [
   "rgba(255, 255, 255, 0.2)",
 ] as const;
 
+const ORB_COLORS = [
+  "rgba(147, 71, 255, 0.55)",
+  "rgba(2, 255, 226, 0.4)",
+] as const;
+
+const LITE_QUERY = "(max-width: 767px), (prefers-reduced-motion: reduce)";
+
 let cachedParticles: Particle[] | null = null;
 
 function getClientParticles(): Particle[] {
   if (cachedParticles) return cachedParticles;
 
-  cachedParticles = Array.from({ length: 15 }, (_, i) => {
+  cachedParticles = Array.from({ length: 8 }, (_, i) => {
     const randomColorIndex = Math.floor(Math.random() * PARTICLE_COLORS.length);
     return {
       id: i,
       x: Math.random() * 100,
       y: Math.random() * 100,
-      size: Math.random() * 8 + 4,
+      size: Math.random() * 6 + 3,
       color: PARTICLE_COLORS[randomColorIndex]!,
-      opacity: Math.random() * 0.5 + 0.2,
-      speed: Math.random() * 0.5 + 0.2,
+      opacity: Math.random() * 0.4 + 0.15,
+      speed: Math.random() * 0.4 + 0.2,
       direction: Math.random() * Math.PI * 2,
     };
   });
@@ -49,30 +56,110 @@ function subscribeParticles() {
   return () => {};
 }
 
-const FloatingParticles = () => {
-  const particles = useSyncExternalStore(
-    subscribeParticles,
-    getClientParticles,
-    () => EMPTY_PARTICLES,
-  );
+function subscribeLiteMode(onStoreChange: () => void) {
+  const media = window.matchMedia(LITE_QUERY);
+  media.addEventListener("change", onStoreChange);
+  return () => media.removeEventListener("change", onStoreChange);
+}
 
-  if (particles.length === 0) {
-    return (
+function getLiteModeSnapshot() {
+  return window.matchMedia(LITE_QUERY).matches;
+}
+
+function wave01(timeMs: number, durationSec: number, delaySec: number) {
+  const elapsed = Math.max(0, timeMs / 1000 - delaySec);
+  const cycle = (elapsed % durationSec) / durationSec;
+  return (1 - Math.cos(cycle * Math.PI * 2)) / 2;
+}
+
+function LiteAtmosphere() {
+  return (
+    <div
+      className="pointer-events-none absolute inset-0 overflow-hidden"
+      style={{ zIndex: 1 }}
+      aria-hidden
+    >
       <div
-        className="pointer-events-none absolute inset-0 overflow-hidden"
-        style={{ zIndex: 1 }}
+        className="absolute left-1/4 top-1/3 h-24 w-24 rounded-full opacity-40"
+        style={{
+          background:
+            "radial-gradient(circle, rgba(147, 71, 255, 0.25) 0%, transparent 70%)",
+          filter: "blur(12px)",
+        }}
       />
-    );
-  }
+      <div
+        className="absolute bottom-1/3 right-1/4 h-20 w-20 rounded-full opacity-35"
+        style={{
+          background:
+            "radial-gradient(circle, rgba(2, 255, 226, 0.2) 0%, transparent 70%)",
+          filter: "blur(10px)",
+        }}
+      />
+    </div>
+  );
+}
+
+function DesktopParticles({ particles }: { particles: Particle[] }) {
+  const particleRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const orbRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const ambientARef = useRef<HTMLDivElement | null>(null);
+  const ambientBRef = useRef<HTMLDivElement | null>(null);
+
+  useAnimationFrame((time) => {
+    if (typeof document !== "undefined" && document.hidden) return;
+
+    for (let i = 0; i < particles.length; i++) {
+      const el = particleRefs.current[i];
+      const particle = particles[i];
+      if (!el || !particle) continue;
+
+      const w = wave01(time, 10 + particle.speed * 4, particle.id * 0.15);
+      const dx = Math.cos(particle.direction) * 24 * w;
+      const dy = Math.sin(particle.direction) * 24 * w;
+      el.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+      el.style.opacity = String(particle.opacity * (1 - 0.45 * w));
+    }
+
+    for (let i = 0; i < 3; i++) {
+      const el = orbRefs.current[i];
+      if (!el) continue;
+
+      const w = wave01(time, 14 + i * 2, 0);
+      const dx = (i * 20 - 40) * w;
+      const dy = (i * 14 - 24) * w;
+      el.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+      el.style.opacity = String(0.5 + 0.35 * w);
+    }
+
+    const ambientA = ambientARef.current;
+    if (ambientA) {
+      const w = wave01(time, 14, 0);
+      const scale = 1 + 0.2 * w;
+      ambientA.style.transform = `scale(${scale})`;
+      ambientA.style.opacity = String(0.35 + 0.2 * w);
+    }
+
+    const ambientB = ambientBRef.current;
+    if (ambientB) {
+      const w = wave01(time, 12, 0);
+      const scale = 1.15 - 0.15 * w;
+      ambientB.style.transform = `scale(${scale})`;
+      ambientB.style.opacity = String(0.4 + 0.2 * w);
+    }
+  });
 
   return (
     <div
       className="pointer-events-none absolute inset-0 overflow-hidden"
       style={{ zIndex: 1 }}
+      aria-hidden
     >
-      {particles.map((particle) => (
-        <motion.div
+      {particles.map((particle, index) => (
+        <div
           key={particle.id}
+          ref={(node) => {
+            particleRefs.current[index] = node;
+          }}
           className="absolute rounded-full"
           style={{
             width: particle.size,
@@ -81,134 +168,83 @@ const FloatingParticles = () => {
             left: `${particle.x}%`,
             top: `${particle.y}%`,
             opacity: particle.opacity,
+            willChange: "transform, opacity",
           }}
-          animate={{
-            x: [0, Math.cos(particle.direction) * 30, 0],
-            y: [0, Math.sin(particle.direction) * 30, 0],
-            scale: [1, 1.2, 1],
-            opacity: [
-              particle.opacity,
-              particle.opacity * 0.5,
-              particle.opacity,
-            ],
-          }}
-          transition={{
-            duration: 8 + particle.speed * 4,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: particle.id * 0.2,
-          }}
-        >
-          <motion.div
-            className="absolute inset-0 rounded-full"
-            style={{
-              background: `radial-gradient(circle, ${particle.color} 0%, transparent 70%)`,
-              filter: "blur(2px)",
-            }}
-            animate={{
-              scale: [1, 1.5, 1],
-              opacity: [0.8, 0.3, 0.8],
-            }}
-            transition={{
-              duration: 4 + particle.speed * 2,
-              repeat: Infinity,
-              ease: "easeInOut",
-              delay: particle.id * 0.1,
-            }}
-          />
-        </motion.div>
+        />
       ))}
 
-      {Array.from({ length: 8 }, (_, i) => (
-        <motion.div
+      {Array.from({ length: 3 }, (_, i) => (
+        <div
           key={`orb-${i}`}
-          className="absolute"
-          style={{
-            left: `${20 + i * 10}%`,
-            top: `${30 + (i % 3) * 20}%`,
+          ref={(node) => {
+            orbRefs.current[i] = node;
           }}
-          animate={{
-            x: [0, i * 30 - 120, i * 30 + 120, 0],
-            y: [0, i * 20 - 80, i * 20 + 80, 0],
-            rotate: [0, 360],
-            scale: [1, 1.1, 1],
-          }}
-          transition={{
-            x: {
-              duration: 15 + i * 2,
-              repeat: Infinity,
-              ease: "easeInOut",
-            },
-            y: {
-              duration: 12 + i * 2,
-              repeat: Infinity,
-              ease: "easeInOut",
-            },
-            rotate: {
-              duration: 20 + i * 2,
-              repeat: Infinity,
-              ease: "linear",
-            },
-            scale: {
-              duration: 6 + i,
-              repeat: Infinity,
-              ease: "easeInOut",
-            },
+          className="absolute h-2.5 w-2.5 rounded-full"
+          style={{
+            left: `${25 + i * 22}%`,
+            top: `${28 + (i % 3) * 18}%`,
+            background: `radial-gradient(circle, ${ORB_COLORS[i % 2]} 0%, transparent 70%)`,
+            opacity: 0.5,
+            willChange: "transform, opacity",
           }}
-        >
-          <div
-            className="h-3 w-3 rounded-full"
-            style={{
-              background: `radial-gradient(circle, ${
-                ["rgba(147, 71, 255, 0.6)", "rgba(2, 255, 226, 0.4)"][i % 2]
-              } 0%, transparent 70%)`,
-              filter: "blur(1px)",
-            }}
-          />
-        </motion.div>
+        />
       ))}
 
-      <motion.div
-        className="absolute left-1/4 top-1/3 h-20 w-20 rounded-full"
+      <div
+        ref={ambientARef}
+        className="absolute left-1/4 top-1/3 h-16 w-16 rounded-full"
         style={{
           background:
-            "radial-gradient(circle, rgba(147, 71, 255, 0.1) 0%, transparent 70%)",
-          filter: "blur(10px)",
-        }}
-        animate={{
-          scale: [1, 1.3, 1],
-          opacity: [0.3, 0.6, 0.3],
-          x: [0, 20, 0],
-          y: [0, -10, 0],
-        }}
-        transition={{
-          duration: 12,
-          repeat: Infinity,
-          ease: "easeInOut",
+            "radial-gradient(circle, rgba(147, 71, 255, 0.12) 0%, transparent 70%)",
+          filter: "blur(8px)",
+          opacity: 0.35,
+          willChange: "transform, opacity",
         }}
       />
 
-      <motion.div
-        className="absolute right-1/4 top-2/3 h-16 w-16 rounded-full"
+      <div
+        ref={ambientBRef}
+        className="absolute right-1/4 top-2/3 h-14 w-14 rounded-full"
         style={{
           background:
-            "radial-gradient(circle, rgba(2, 255, 226, 0.15) 0%, transparent 70%)",
+            "radial-gradient(circle, rgba(2, 255, 226, 0.14) 0%, transparent 70%)",
           filter: "blur(8px)",
-        }}
-        animate={{
-          scale: [1.2, 1, 1.2],
-          opacity: [0.4, 0.7, 0.4],
-          x: [0, -15, 0],
-          y: [0, 15, 0],
-        }}
-        transition={{
-          duration: 10,
-          repeat: Infinity,
-          ease: "easeInOut",
+          opacity: 0.4,
+          willChange: "transform, opacity",
         }}
       />
     </div>
   );
+}
+
+const FloatingParticles = () => {
+  const isLite = useSyncExternalStore(
+    subscribeLiteMode,
+    getLiteModeSnapshot,
+    () => true,
+  );
+
+  const particles = useSyncExternalStore(
+    subscribeParticles,
+    getClientParticles,
+    () => EMPTY_PARTICLES,
+  );
+
+  if (isLite) {
+    return <LiteAtmosphere />;
+  }
+
+  if (particles.length === 0) {
+    return (
+      <div
+        className="pointer-events-none absolute inset-0 overflow-hidden"
+        style={{ zIndex: 1 }}
+        aria-hidden
+      />
+    );
+  }
+
+  return <DesktopParticles particles={particles} />;
 };
 
 export default FloatingParticles;