432HZ CHILL EGYPTIAN STYLE

432hz-chill-egyptian-style.markdown

432HZ CHILL EGYPTIAN STYLE

A Pen by Bob Wright on CodePen.

License.

index.html

<div id="reactor-container">
  <div id="background-layer"></div>
  <div id="core-assembly">
    <div id="glyph-core" onclick="toggleResonance()">𓀀𓏤𓈖𓂋𓈙𓉔</div>
    <div id="status-display">SYSTEM STANDBY</div>
  </div>
</div>

<style>
  body,
  html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #050505;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
  }

  #reactor-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #core-assembly {
    position: relative;
    z-index: 100;
    text-align: center;
  }

  #glyph-core {
    font-size: 7rem;
    color: #d4af37;
    cursor: pointer;
    user-select: none;
    transition: all 0.5s ease;
  }

  #glyph-core.active {
    color: #ffdf00;
    filter: drop-shadow(0 0 30px #ffdf00);
    animation: corePulse 1.5s infinite ease-in-out;
  }

  @keyframes corePulse {

    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.1);
    }
  }

  #status-display {
    color: #d4af37;
    margin-top: 20px;
    letter-spacing: 5px;
    font-size: 0.8rem;
    opacity: 0.6;
  }

  /* Eyes of Ra: Right to Left (34 units) */
  .eye-ra {
    position: absolute;
    color: #7FFFD4;
    font-size: 6rem;
    opacity: 0.2;
    pointer-events: none;
    animation: eyeSlideReverse linear infinite;
    transition: filter 0.3s, opacity 0.3s;
  }

  @keyframes eyeSlideReverse {
    from {
      transform: translateX(120vw);
    }

    to {
      transform: translateX(-20vw);
    }
  }

  /* Ankhs: Chaotic (34 units) */
  .ankh {
    position: absolute;
    color: #FF00FF;
    font-size: 6rem;
    opacity: 0.2;
    pointer-events: none;
    animation: ankhFloat linear infinite;
    transition: filter 0.3s, opacity 0.3s;
  }

  @keyframes ankhFloat {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }

    25% {
      transform: translate(15vw, -15vh) rotate(90deg);
    }

    50% {
      transform: translate(-10vw, -30vh) rotate(180deg);
    }

    75% {
      transform: translate(20vw, -45vh) rotate(270deg);
    }

    100% {
      transform: translate(-5vw, -110vh) rotate(360deg);
    }
  }

  /* Resonance Glow State */
  .resonance-active .eye-ra {
    opacity: 0.6;
    filter: drop-shadow(0 0 15px #7FFFD4);
  }

  .resonance-active .ankh {
    opacity: 0.6;
    filter: drop-shadow(0 0 15px #FF00FF);
  }
</style>

<script>
  let isIgnited = false;
  let audioCtx = null;
  let oscillator = null;
  const bg = document.getElementById('background-layer');
  const container = document.getElementById('reactor-container');

  function spawnArchitecture() {
    // Spawn 34 Eyes of Ra (Right to Left)
    for (let i = 0; i < 34; i++) {
      const eye = document.createElement('div');
      eye.className = 'eye-ra';
      eye.innerText = '𓂀';
      eye.style.top = (Math.random() * 90) + 'vh';
      eye.style.animationDuration = (12 + Math.random() * 25) + 's';
      eye.style.animationDelay = (Math.random() * -40) + 's';
      bg.appendChild(eye);
    }
    // Spawn 34 Magenta Ankhs (Chaotic)
    for (let i = 0; i < 34; i++) {
      const ankh = document.createElement('div');
      ankh.className = 'ankh';
      ankh.innerText = '☥';
      ankh.style.left = (Math.random() * 100) + 'vw';
      ankh.style.top = '110vh';
      ankh.style.animationDuration = (20 + Math.random() * 30) + 's';
      ankh.style.animationDelay = (Math.random() * -50) + 's';
      bg.appendChild(ankh);
    }
  }

  function toggleResonance() {
    const core = document.getElementById('glyph-core');
    const status = document.getElementById('status-display');
    if (!audioCtx) {
      audioCtx = new(window.AudioContext || window.webkitAudioContext)();
    }
    if (!isIgnited) {
      // Start 432Hz Oscillation
      oscillator = audioCtx.createOscillator();
      const gainNode = audioCtx.createGain();
      oscillator.type = 'sine';
      oscillator.frequency.setValueAtTime(432, audioCtx.currentTime);
      gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
      gainNode.gain.linearRampToValueAtTime(0.05, audioCtx.currentTime + 0.5);
      oscillator.connect(gainNode);
      gainNode.connect(audioCtx.destination);
      oscillator.start();
      container.classList.add('resonance-active');
      core.classList.add('active');
      status.innerText = "432Hz RESONANCE: ACTIVE";
    } else {
      // Dampen System
      if (oscillator) {
        oscillator.stop();
      }
      container.classList.remove('resonance-active');
      core.classList.remove('active');
      status.innerText = "SYSTEM STANDBY";
    }
    isIgnited = !isIgnited;
  }
  spawnArchitecture();
</script>