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

const binaryScroll = keyframes`
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
`;

const flicker = keyframes`
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 0.99;
  }
  20%, 24%, 55% {
    opacity: 0.4;
  }
  22% {
    opacity: 0.4;
  }
`;

const changeNumber = keyframes`
  0% { content: "0"; }
  25% { content: "1"; }
  50% { content: "0"; }
  75% { content: "1"; }
  100% { content: "0"; }
`;

const BinaryWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: black;
  overflow: hidden;
  color: lime;
  display: flex;
  justify-content: space-around;
`;

const BinaryText = styled('div')`
  position: absolute;
  bottom: 0;
  font-family: 'Consolas', monospace;
  font-size: 16px;
  animation: ${binaryScroll} linear infinite, ${flicker} 3s infinite;
  white-space: nowrap;
  filter: drop-shadow(0 0 5px lime);
  display: flex;

  & span {
    animation: ${changeNumber} 1s steps(1) infinite;
  }

  &:before {
    content: attr(data-content);
  }
`;

const BinaryBackground = ({ children }) => {
  useEffect(() => {
    const binaryWrapper = document.getElementById('binaryWrapper');
    for (let i = 0; i < 30; i++) {
      const text = document.createElement('div');
      text.className = BinaryText.styledComponentId;
      const binaryString = Array.from({ length: 30 }, () => `<span>${Math.floor(Math.random() * 2)}</span>`).join('');
      text.innerHTML = binaryString.repeat(100);
      text.style.animationDuration = `${Math.random() * 10 + 5}s`; // Random duration between 5 to 15 seconds
      text.style.left = `${Math.random() * 100}%`; // Random horizontal position
      binaryWrapper.appendChild(text);
    }
  }, []);

  return (
    <BinaryWrapper id="binaryWrapper">
      {children}
    </BinaryWrapper>
  );
};

export default BinaryBackground;