leumas-private-shared/src/Components/Backgrounds/Trippy.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 adjustHue = keyframes`
  0% { filter: hue-rotate(30deg); }
  50% { filter: hue-rotate(60deg); }
  100% { filter: hue-rotate(90deg); }
`;

const loading = keyframes`
  to { transform: rotate(360deg); }
`;

const blinker = keyframes`
  0% { opacity: 1.0; }
  50% { opacity: 0.3; }
  100% { opacity: 1.0; }
`;

const TrippyWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #000;
  overflow: hidden;
  animation: ${adjustHue} 1s alternate infinite;
  background: radial-gradient(#0B853D 3px, transparent 5px, #000 7px, transparent 9px, #0B853D 11px, transparent 13px, 15px, transparent 17px, #000 19px, transparent 21px, #0B853D 23px, transparent 25px, #fff 27px, transparent 29px, #000 31px, transparent 33px);
  background-size: 32px 32px;
`;

const Circle = styled('div')`
  width: 95vw;
  height: 95vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  background: radial-gradient(#0B853D 3px, transparent 5px, #000 7px, transparent 9px, #0B853D 11px, transparent 13px, 15px, transparent 17px, #000 19px, transparent 21px, #0B853D 23px, transparent 25px, #fff 27px, transparent 29px, #000 31px, transparent 33px);
  background-size: 30px 30px;
  animation: ${blinker} 3s linear infinite;
`;

const TrippyBackground = ({ children }) => {
  return (
    <TrippyWrapper>
      <Circle />
      {children}
    </TrippyWrapper>
  );
};

export default TrippyBackground;