leumas-private-shared/src/Components/Backgrounds/CloudSpiral.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 from 'react';
import { styled, keyframes } from '@mui/system';

const particles = 62;
const particleSize = 8;
const radius = 80;
const lapDuration = 3;

const spinLeft = keyframes`
  from {
    opacity: 0.0;
  }
  to {
    opacity: 0.6;
    transform: translate3d(-${particleSize / 2}px, -${particleSize / 2}px, 570px);
  }
`;

const spinRight = keyframes`
  from {
    opacity: 0.0;
  }
  to {
    opacity: 0.6;
    transform: translate3d(${particleSize / 2}px, ${particleSize / 2}px, 570px) rotate(720deg);
  }
`;

const Wrapper = styled('div')`
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  perspective: 500px;
  background: #3e6fa3;
  transform: translate(-50%, -50%);
`;

const Particle = styled('i')`
  display: block;
  position: absolute;
  width: ${particleSize}px;
  height: ${particleSize}px;
  border-radius: ${particleSize}px;
  opacity: 0;
  background: rgba(0, 0, 255, 0.5);
  box-shadow: 0px 0px 10px rgba(0, 0, 255, 1);
  animation: ${spinLeft} ${lapDuration}s infinite ease-in-out;
`;

const RedParticle = styled('i')`
  display: block;
  position: absolute;
  width: ${particleSize}px;
  height: ${particleSize}px;
  border-radius: ${particleSize}px;
  opacity: 0;
  background: rgba(255, 0, 0, 0.5);
  box-shadow: 0px 0px 10px rgba(255, 0, 0, 1);
  animation: ${spinRight} ${lapDuration}s infinite ease-in-out;
`;

const CloudSpiralBackground = ({ children }) => {
  const particlesArray = Array.from({ length: particles });

  return (
    <Wrapper>
      {particlesArray.map((_, i) => {
        const angle = (i / particles) * 720;
        const delay = i * (lapDuration / particles);
        const transform = `rotate(${angle}deg) translate3d(${radius}px, 0, 0)`;

        return (
          <React.Fragment key={i}>
            <Particle
              style={{
                transform,
                animationDelay: `${delay}s`,
              }}
            />
            <RedParticle
              style={{
                transform,
                animationDelay: `${delay}s`,
              }}
            />
          </React.Fragment>
        );
      })}
      {children}
    </Wrapper>
  );
};

export default CloudSpiralBackground;