anim background+style form

src/components/background/background.jsx

@@ -1,15 +1,55 @@
-import styles from "./background.module.css"; 
+import styles from "./background.module.css";
+import { useEffect, useRef } from "react";
+
 const Background = ({ children, className }) => {
+  const circlesRef = useRef([]);
+
+  const getRandomTranslation = () => {
+    const randomX = Math.floor(Math.random() * 100) - 30; 
+    const randomY = Math.floor(Math.random() * 100) - 30;
+    return { x: randomX, y: randomY };
+  };
+
+  useEffect(() => {
+    circlesRef.current.forEach((circle) => {
+      if (circle) {
+        const { x, y } = getRandomTranslation();
+        circle.style.setProperty('--random-x', `${x}px`);
+        circle.style.setProperty('--random-y', `${y}px`);
+      }
+    });
+  }, []);
+
   return (
     <div className={`${styles["background-container"]} ${className || ''}`}>
-      <div className={styles["circle"] + " " + styles["circle-1"]}></div>
-      <div className={styles["circle"] + " " + styles["circle-2"]}></div>
-      <div className={styles["circle"] + " " + styles["circle-3"]}></div>
-      <div className={styles["circle"] + " " + styles["circle-4"]}></div>
-      <div className={styles["circle"] + " " + styles["circle-5"]}></div>
+      <div
+        ref={(el) => (circlesRef.current[0] = el)}
+        className={`${styles["circle"]} ${styles["circle-1"]}`}
+        style={{ "--random-x": "0px", "--random-y": "0px" }}
+      ></div>
+      <div
+        ref={(el) => (circlesRef.current[1] = el)}
+        className={`${styles["circle"]} ${styles["circle-2"]}`}
+        style={{ "--random-x": "0px", "--random-y": "0px" }}
+      ></div>
+      <div
+        ref={(el) => (circlesRef.current[2] = el)}
+        className={`${styles["circle"]} ${styles["circle-3"]}`}
+        style={{ "--random-x": "0px", "--random-y": "0px" }}
+      ></div>
+      <div
+        ref={(el) => (circlesRef.current[3] = el)}
+        className={`${styles["circle"]} ${styles["circle-4"]}`}
+        style={{ "--random-x": "0px", "--random-y": "0px" }}
+      ></div>
+      <div
+        ref={(el) => (circlesRef.current[4] = el)}
+        className={`${styles["circle"]} ${styles["circle-5"]}`}
+        style={{ "--random-x": "0px", "--random-y": "0px" }}
+      ></div>
       {children}
     </div>
   );
 };
 
-export default Background;
+export default Background;

src/components/background/background.module.css

@@ -57,4 +57,19 @@
   background-color: rgba(240, 240, 41, 0.827);
   top: 2%;
   right: 2%;
+}
+.circle-1,.circle-2, .circle-3, .circle-4, .circle-5 {
+  animation: float 6s ease-in-out infinite;
+}
+.circle {
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(var(--random-x), var(--random-y));
+  }
 }