leumas-private-shared/src/Components/Backgrounds/Clouds.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 moveForever = keyframes`
  0% {
    transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
`;

const CloudsWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  overflow: hidden;
`;

const WavesWrapper = styled('div')`
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 15vh;
`;

const Waves = styled('svg')`
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: -7px;
  min-height: 100px;
  max-height: 150px;
`;

const Parallax = styled('g')`
  & > use {
    animation: ${moveForever} 25s cubic-bezier(.55,.5,.45,.5) infinite;
  }
  & > use:nth-of-type(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }
  & > use:nth-of-type(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }
  & > use:nth-of-type(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }
  & > use:nth-of-type(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }
`;

const CloudsBackground = ({ children }) => {
  return (
    <CloudsWrapper>
      {children}
      <WavesWrapper>
        <Waves xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
          viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
          <defs>
            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <Parallax className="parallax">
            <use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
            <use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
            <use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
            <use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" />
          </Parallax>
        </Waves>
      </WavesWrapper>
    </CloudsWrapper>
  );
};

export default CloudsBackground;