Edit background canvas

src/Components/BackgroundCanvas/BackgroundCanvas.jsx

@@ -127,35 +127,44 @@ const BackgroundCanvas = ({ theme = 'light' }) => {
     camera.acceleration.z *= 0.9;
   };
 
-  const initCanvas = () => {
+const initCanvas = () => {
-    const canvas = canvasRef.current;
+  const canvas = canvasRef.current;
-    if (!canvas) return;
+  if (!canvas) return;
 
-    const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d');
-    const view = {
+  const view = {
-      width: window.innerWidth,
+    width: window.innerWidth,
-      height: window.innerHeight,
+    height: window.innerHeight,
-    };
-
-    canvas.width = view.width;
-    canvas.height = view.height;
-
-    worldRef.current = {
-      width: view.width * 2,
-      height: view.height * 2,
-    };
-
-    cameraRef.current = new Camera(
-      {
-        x: worldRef.current.width / 2,
-        y: worldRef.current.height / 2,
-      },
-      1
-    );
-
-    jointsRef.current = generateJoints(300, worldRef.current.width, worldRef.current.height);
   };
 
+  canvas.width = view.width;
+  canvas.height = view.height;
+
+  worldRef.current = {
+    width: view.width * 2,
+    height: view.height * 2,
+  };
+
+  cameraRef.current = new Camera(
+    {
+      x: worldRef.current.width / 2,
+      y: worldRef.current.height / 2,
+    },
+    1
+  );
+
+  const isMobile = window.innerWidth < 768;
+  const numberOfJoints = isMobile ? 80 : 300;
+  jointsRef.current = generateJoints(numberOfJoints, worldRef.current.width, worldRef.current.height);
+  
+  if (isMobile) {
+    jointsRef.current.forEach(joint => {
+      joint.bone_length = 120; 
+      joint.speed = 0.4; 
+    });
+  }
+};
+
   const animate = () => {
     const canvas = canvasRef.current;
     if (!canvas) return;