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

const createHalo = keyframes`
  0% {
    opacity: 0.8;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
`;

const HaloWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
`;

const Halo = styled('div')`
  position: absolute;
  border-radius: 50%;
  background: ${(props) => props.color};
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
  top: ${(props) => props.y}px;
  left: ${(props) => props.x}px;
  opacity: 0.8;
  animation: ${createHalo} 2s linear infinite;
`;

const HaloBackground = ({ children }) => {
  const haloWrapperRef = useRef(null);

  const createHalos = (e) => {
    const colors = ['rgba(0, 128, 255, 0.5)', 'rgba(255, 255, 255, 0.5)', 'rgba(255, 105, 180, 0.5)'];
    const size = Math.random() * 50 + 50; // Random size between 50 and 100
    const color = colors[Math.floor(Math.random() * colors.length)];

    const halo = document.createElement('div');
    halo.style.position = 'absolute';
    halo.style.borderRadius = '50%';
    halo.style.background = color;
    halo.style.width = `${size}px`;
    halo.style.height = `${size}px`;
    halo.style.top = `${e.clientY - size / 2}px`;
    halo.style.left = `${e.clientX - size / 2}px`;
    halo.style.opacity = '0.8';
    halo.style.animation = `${createHalo} 2s linear infinite`;

    haloWrapperRef.current.appendChild(halo);

    setTimeout(() => {
      halo.remove();
    }, 2000);
  };

  useEffect(() => {
    const wrapper = haloWrapperRef.current;
    wrapper.addEventListener('mousemove', createHalos);
    return () => wrapper.removeEventListener('mousemove', createHalos);
  }, []);

  return (
    <HaloWrapper ref={haloWrapperRef}>
      {children}
    </HaloWrapper>
  );
};

export default HaloBackground;