leumas-private-shared/src/Components/Backgrounds/BlurryCircles.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 move = keyframes`
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
`;

const shootingStar = keyframes`
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(100px, -100px) scale(0.5);
    opacity: 0;
  }
`;

const BlurryCirclesWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(to bottom right, #000428, #004e92);
  overflow: hidden;
  border-radius: 10px;
`;

const Circle = styled('div')`
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  filter: blur(10px);
  animation: ${move} 8s ease-in-out infinite;
`;

const Star = styled('div')`
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 1);
`;

const ShootingStar = styled('div')`
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 1);
  animation: ${shootingStar} 2s linear infinite;
`;

const BlurryCirclesBackground = ({ children }) => {
  useEffect(() => {
    const blurryCirclesWrapper = document.getElementById('blurryCirclesWrapper');

    // Add blurry circles
    for (let i = 0; i < 20; i++) {
      const circle = document.createElement('div');
      circle.className = Circle.styledComponentId;
      circle.style.top = `${Math.random() * 100}%`;
      circle.style.left = `${Math.random() * 100}%`;
      circle.style.width = `${Math.random() * 50 + 50}px`;
      circle.style.height = circle.style.width;
      circle.style.animationDuration = `${Math.random() * 5 + 5}s`;
      blurryCirclesWrapper.appendChild(circle);
    }

    // Add static stars
    for (let i = 0; i < 50; i++) {
      const star = document.createElement('div');
      star.className = Star.styledComponentId;
      star.style.top = `${Math.random() * 100}%`;
      star.style.left = `${Math.random() * 100}%`;
      blurryCirclesWrapper.appendChild(star);
    }

    // Add shooting stars
    for (let i = 0; i < 5; i++) {
      const shootingStar = document.createElement('div');
      shootingStar.className = ShootingStar.styledComponentId;
      shootingStar.style.top = `${Math.random() * 100}%`;
      shootingStar.style.left = `${Math.random() * 100}%`;
      shootingStar.style.animationDelay = `${Math.random() * 5}s`;
      blurryCirclesWrapper.appendChild(shootingStar);
    }
  }, []);

  return <BlurryCirclesWrapper id="blurryCirclesWrapper">{children}</BlurryCirclesWrapper>;
};

export default BlurryCirclesBackground;