leumas-private-shared/src/Components/Backgrounds/Illusion.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 move = keyframes`
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
`;

const generateDots = (count) => {
  let textShadow = '';
  for (let i = 0; i <= count; i++) {
    const x = (-0.5 + Math.random() * 3) + 'em';
    const y = (-0.5 + Math.random() * 3) + 'em';
    const color = `hsla(${Math.random() * 360}, 100%, 50%, 0.9)`;
    textShadow += `${x} ${y} 7px ${color}, `;
  }
  return textShadow.slice(0, -2);
};

const IllusionWrapper = styled('div')`
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #123;
`;

const DotElement = styled('div')`
  display: block;
  font-size: 52px;
  color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  &::before, &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3em;
    height: 3em;
    content: '.';
    mix-blend-mode: screen;
    animation: ${move} 44s -27s infinite ease-in-out alternate;
  }

  &::before {
    text-shadow: ${(props) => generateDots(40)};
    animation-duration: 44s;
    animation-delay: -27s;
  }

  &::after {
    text-shadow: ${(props) => generateDots(40)};
    animation-duration: 43s;
    animation-delay: -32s;
  }
`;

const IllusionBackground = ({ children }) => {
  return (
    <IllusionWrapper>
      <DotElement />
      {children}
    </IllusionWrapper>
  );
};

export default IllusionBackground;