leumas-private-shared/src/Components/Backgrounds/Dots.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 scaleUp = keyframes`
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0);
  }
  10% {
    opacity: 1;
  }
  95% {
    transform: translate3d(0, 0, 55vmin) rotate(360deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 1vmin);
  }
`;

const Dot = styled('div')`
  @grid: 50x1 / 50vmin;
  perspective: 23vmin;
  width: 80%;
  height: 80%;
  background: radial-gradient(
    ${(props) => props.color} 15%, transparent 50%
  ) ${(props) => props.x} ${(props) => props.y} / ${(props) => props.size} no-repeat;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: ${scaleUp} 20s linear infinite;
  animation-delay: ${(props) => props.delay}s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`;

const DotsWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
`;

const random = (min, max) => Math.random() * (max - min) + min;

const DotsBackground = ({ children }) => {
  const dots = Array.from({ length: 50 }).map((_, i) => ({
    color: ['#00b8a9', '#f8f3d4', '#f6416c', '#ffde7d'][Math.floor(Math.random() * 4)],
    x: `${random(0, 100)}%`,
    y: `${random(0, 100)}%`,
    size: `${random(1, 3)}%`,
    delay: i * -0.4,
  }));

  return (
    <DotsWrapper>
      {dots.map((dot, i) => (
        <Dot
          key={i}
          color={dot.color}
          x={dot.x}
          y={dot.y}
          size={dot.size}
          delay={dot.delay}
        />
      ))}
      {children}
    </DotsWrapper>
  );
};

export default DotsBackground;