leumas-private-shared/src/Components/Backgrounds/Hypnosis.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 rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

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

const HypnosisWheel = styled('div')`
  width: 200vmin;
  height: 200vmin;
  background: conic-gradient(
    from 0deg,
    #000 0deg,
    #000 45deg,
    #fff 45deg,
    #fff 90deg,
    #000 90deg,
    #000 135deg,
    #fff 135deg,
    #fff 180deg,
    #000 180deg,
    #000 225deg,
    #fff 225deg,
    #fff 270deg,
    #000 270deg,
    #000 315deg,
    #fff 315deg,
    #fff 360deg
  );
  border-radius: 50%;
  animation: ${rotate} 10s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const ContentWrapper = styled('div')`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
`;

const HypnosisBackground = ({ children }) => {
  return (
    <HypnosisWrapper>
      <HypnosisWheel />
      <ContentWrapper>
        {children}
      </ContentWrapper>
    </HypnosisWrapper>
  );
};

export default HypnosisBackground;