leumas-private-shared/src/Components/Backgrounds/FloatingBubbles.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useEffect } from 'react';
import { styled, keyframes } from '@mui/system';

const bubbleFloat = keyframes`
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
`;

const BubblesWrapper = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #1e3c72; /* Fallback color */
  background: linear-gradient(to bottom, #2a5298, #1e3c72); /* Blue gradient */
  overflow: hidden;
`;

const Bubble = styled('div')`
  position: absolute;
  bottom: -50px;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: ${bubbleFloat} 5s infinite ease-in-out;
`;

const FloatingBubblesBackground = ({ children }) => {
  useEffect(() => {
    const bubblesWrapper = document.getElementById('bubblesWrapper');
    for (let i = 0; i < 50; i++) {
      const bubble = document.createElement('div');
      bubble.className = Bubble.styledComponentId;
      bubble.style.left = `${Math.random() * 100}%`;
      bubble.style.width = `${Math.random() * 10 + 10}px`;
      bubble.style.height = bubble.style.width;
      bubble.style.animationDuration = `${Math.random() * 3 + 2}s`;
      bubblesWrapper.appendChild(bubble);
    }
  }, []);

  return <BubblesWrapper id="bubblesWrapper">{children}</BubblesWrapper>;
};

export default FloatingBubblesBackground;