leumas-private-shared/src/Components/Backgrounds/SpookyMoon.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 moveBackground = keyframes`
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to { 
    transform: translate3d(1000px, 0px, 0px);
  }
`;

const BackgroundContainer = styled('div')`
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
`;

const Stars = styled('div')`
  background: black url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png') repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
`;

const Twinkling = styled('div')`
  width: 10000px;
  height: 100%;
  background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png') repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  animation: ${moveBackground} 70s linear infinite;
`;

const Clouds = styled('div')`
  width: 10000px;
  height: 100%;
  background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png') repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  animation: ${moveBackground} 150s linear infinite;
`;

const MoonImage = styled('img')`
  height: 70vh;
  width: 70vh;
  position: absolute;
  z-index: 3;
  right: 20px;
`;

const SpookyMoonBackground = ({ children }) => {
  return (
    <BackgroundContainer>
      <Stars />
      <Twinkling />
      <Clouds />
      <MoonImage src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="Moon" />
      {children}
    </BackgroundContainer>
  );
};

export default SpookyMoonBackground;