Coding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API

                    import * as THREE from "https://esm.sh/three@0.175.0";
    import { OrbitControls } from "https://esm.sh/three@0.175.0/examples/jsm/controls/OrbitControls.js";
    document.addEventListener("DOMContentLoaded", function () {
      setupExpandingCirclesPreloader();
      let audioContext = null;
      let audioAnalyser = null;
      let audioSource = null;
      let audioData;
      let frequencyData;
      let audioReactivity = 1.0;
      let audioSensitivity = 5.0;
      let isAudioInitialized = false;
      let isAudioPlaying = false;
      let lastUserActionTime = Date.now();
      let updateGlow;
      let crypticMessageTimeout;
      let audioContextStarted = false;
      let audioSourceConnected = false;
      let currentAudioElement = null;
      let floatingParticles = [];
      let currentAudioSrc = null;
      let currentMessageIndex = 0;

      function setupExpandingCirclesPreloader() {
        const canvas = document.getElementById("preloader-canvas");
        if (!canvas) return;
        const ctx = canvas.getContext("2d");
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        let time = 0;
        let lastTime = 0;
        const maxRadius = 80;
        const circleCount = 5;
        const dotCount = 24;

        function animate(timestamp) {
          if (!lastTime) lastTime = timestamp;
          const deltaTime = timestamp - lastTime;
          lastTime = timestamp;
          time += deltaTime * 0.001;
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.beginPath();
          ctx.arc(centerX, centerY, 3, 0, Math.PI * 2);
          ctx.fillStyle = "rgba(255, 78, 66, 0.9)";
          ctx.fill();
          for (let c = 0; c < circleCount; c++) {
            const circlePhase = (time * 0.3 + c / circleCount) % 1;
            const radius = circlePhase * maxRadius;
            const opacity = 1 - circlePhase;
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
            ctx.strokeStyle = `rgba(255, 78, 66, ${opacity * 0.2})`;
            ctx.lineWidth = 1;
            ctx.stroke();
            for (let i = 0; i < dotCount; i++) {
              const angle = (i / dotCount) * Math.PI * 2;
              const x = centerX + Math.cos(angle) * radius;
              const y = centerY + Math.sin(angle) * radius;
              const size = 2 * (1 - circlePhase * 0.5);
              ctx.beginPath();
              ctx.moveTo(centerX, centerY);
              ctx.lineTo(x, y);
              ctx.strokeStyle = `rgba(255, 78, 66, ${opacity * 0.1})`;
              ctx.lineWidth = 1;
              ctx.stroke();
              ctx.beginPath();
              ctx.arc(x, y, size, 0, Math.PI * 2);
              ctx.fillStyle = `rgba(255, 78, 66, ${opacity * 0.9})`;
              ctx.fill();
            }
          }
          if (document.getElementById("loading-overlay").style.display !== "none") {
            requestAnimationFrame(animate);
          }
        }
        requestAnimationFrame(animate);
      }
      function initFloatingParticles() {
        const container = document.getElementById("floating-particles");
        const numParticles = 1000;

        // Clear any existing particles
        container.innerHTML = "";
        floatingParticles = [];

        // Get window dimensions for better positioning
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        const centerX = windowWidth / 2;
        const centerY = windowHeight / 2;

        for (let i = 0; i < numParticles; i++) {
          const particle = document.createElement("div");
          particle.className = "particle";
          particle.style.position = "absolute";

          // Make all particles the same small size
          particle.style.width = "1.5px";
          particle.style.height = "1.5px";
          particle.style.backgroundColor = `rgba(255, ${
            Math.floor(Math.random() * 100) + 78
          }, ${Math.floor(Math.random() * 100) + 66}, ${
            Math.random() * 0.5 + 0.2
          })`;
          particle.style.borderRadius = "50%";
          // Create a large hollow area in the center
          const minDistance = 200; // Minimum distance from center
          const maxDistance = Math.max(windowWidth, windowHeight) * 0.8; // Use 80% of the larger dimension

          // Use polar coordinates for even distribution
          const angle = Math.random() * Math.PI * 2;

          // Use square root distribution for more even radial distribution
          // (prevents clustering at the center that happens with linear distribution)
          const distanceFactor = Math.sqrt(Math.random());
          const distance =
            minDistance + distanceFactor * (maxDistance - minDistance);

          // Calculate position
          const x = Math.cos(angle) * distance + centerX;
          const y = Math.sin(angle) * distance + centerY;

          particle.style.left = x + "px";
          particle.style.top = y + "px";

          // Store particle properties for animation
          const particleObj = {
            element: particle,
            x: x,
            y: y,
            speed: Math.random() * 0.5 + 0.1,
            angle: Math.random() * Math.PI * 2,
            angleSpeed: (Math.random() - 0.5) * 0.02,
            amplitude: Math.random() * 50 + 20, // Increased amplitude for wider movement
            size: 1.5, // Fixed size
            pulseSpeed: Math.random() * 0.04 + 0.01,
            pulsePhase: Math.random() * Math.PI * 2
          };

          floatingParticles.push(particleObj);
          container.appendChild(particle);
        }

        // Start animation
        animateFloatingParticles();
      }

      // Animate floating particles
      function animateFloatingParticles() {
        const centerX = window.innerWidth / 2;
        const centerY = window.innerHeight / 2;
        let time = 0;

        function updateParticles() {
          time += 0.01;

          floatingParticles.forEach((particle) => {
            // Update angle
            particle.angle += particle.angleSpeed;

            // Calculate orbit around center with some drift
            const orbitX = centerX + Math.cos(particle.angle) * particle.amplitude;
            const orbitY = centerY + Math.sin(particle.angle) * particle.amplitude;

            // Add some noise movement
            const noiseX = Math.sin(time * particle.speed + particle.angle) * 5;
            const noiseY =
              Math.cos(time * particle.speed + particle.angle * 0.7) * 5;

            // Apply movement without audio reactivity
            const newX = orbitX + noiseX;
            const newY = orbitY + noiseY;

            // Update position
            particle.element.style.left = newX + "px";
            particle.element.style.top = newY + "px";

            // Pulse size slightly without audio
            const pulseFactor =
              1 + Math.sin(time * particle.pulseSpeed + particle.pulsePhase) * 0.3;
            const newSize = particle.size * pulseFactor;

            particle.element.style.width = newSize + "px";
            particle.element.style.height = newSize + "px";

            // Adjust opacity based on pulse
            const baseOpacity =
              0.2 +
              Math.sin(time * particle.pulseSpeed + particle.pulsePhase) * 0.1;
            particle.element.style.opacity = Math.min(0.8, baseOpacity);
          });

          requestAnimationFrame(updateParticles);
        }

        requestAnimationFrame(updateParticles);
      }

      function initAudio() {
        if (isAudioInitialized) return true;
        try {
          audioContext = new (window.AudioContext || window.webkitAudioContext)();
          audioAnalyser = audioContext.createAnalyser();
          audioAnalyser.fftSize = 2048;
          audioAnalyser.smoothingTimeConstant = 0.8;
          audioData = new Uint8Array(audioAnalyser.frequencyBinCount);
          frequencyData = new Uint8Array(audioAnalyser.frequencyBinCount);
          audioAnalyser.connect(audioContext.destination);
          isAudioInitialized = true;
          addTerminalMessage("AUDIO ANALYSIS SYSTEM INITIALIZED.");
          showNotification("AUDIO ANALYSIS SYSTEM ONLINE");
          return true;
        } catch (error) {
          console.error("Audio initialization error:", error);
          addTerminalMessage("ERROR: AUDIO SYSTEM INITIALIZATION FAILED.");
          showNotification("AUDIO SYSTEM ERROR");
          return false;
        }
      }

      function ensureAudioContextStarted() {
        if (!audioContext) {
          if (!initAudio()) return false;
        }
        if (audioContext.state === "suspended") {
          audioContext
            .resume()
            .then(() => {
              if (!audioContextStarted) {
                audioContextStarted = true;
                addTerminalMessage("AUDIO CONTEXT RESUMED.");
              }
            })
            .catch((err) => {
              console.error("Failed to resume audio context:", err);
              addTerminalMessage("ERROR: FAILED TO RESUME AUDIO CONTEXT.");
            });
        } else {
          audioContextStarted = true;
        }
        return true;
      }

      function cleanupAudioSource() {
        if (audioSource) {
          try {
            audioSource.disconnect();
            audioSourceConnected = false;
            audioSource = null;
          } catch (e) {
            console.log("Error disconnecting previous source:", e);
          }
        }
      }

      function createNewAudioElement() {
        if (currentAudioElement) {
          if (currentAudioElement.parentNode) {
            currentAudioElement.parentNode.removeChild(currentAudioElement);
          }
        }
        const newAudioElement = document.createElement("audio");
        newAudioElement.id = "audio-player";
        newAudioElement.className = "audio-player";
        newAudioElement.crossOrigin = "anonymous";
        document
          .querySelector(".audio-controls")
          .insertBefore(newAudioElement, document.querySelector(".controls-row"));
        currentAudioElement = newAudioElement;
        return newAudioElement;
      }

      function setupAudioSource(audioElement) {
        try {
          if (!ensureAudioContextStarted()) {
            addTerminalMessage(
              "ERROR: AUDIO CONTEXT NOT AVAILABLE. CLICK ANYWHERE TO ENABLE AUDIO."
            );
            return false;
          }
          cleanupAudioSource();
          try {
            // Only create a new media element source if one doesn't already exist
            if (!audioSourceConnected) {
              audioSource = audioContext.createMediaElementSource(audioElement);
              audioSource.connect(audioAnalyser);
              audioSourceConnected = true;
            }
            return true;
          } catch (error) {
            console.error("Error creating media element source:", error);
            if (
              error.name === "InvalidStateError" &&
              error.message.includes("already connected")
            ) {
              addTerminalMessage(
                "AUDIO SOURCE ALREADY CONNECTED. ATTEMPTING TO PLAY ANYWAY."
              );
              return true;
            }
            addTerminalMessage(
              "ERROR: FAILED TO SETUP AUDIO SOURCE. " + error.message
            );
            return false;
          }
        } catch (error) {
          console.error("Error setting up audio source:", error);
          addTerminalMessage("ERROR: FAILED TO SETUP AUDIO SOURCE.");
          return false;
        }
      }

      function initAudioFile(file) {
        try {
          if (!isAudioInitialized && !initAudio()) {
            return;
          }
          const audioPlayer = createNewAudioElement();
          const fileURL = URL.createObjectURL(file);
          currentAudioSrc = fileURL;
          audioPlayer.src = fileURL;
          audioPlayer.onloadeddata = function () {
            if (setupAudioSource(audioPlayer)) {
              audioPlayer
                .play()
                .then(() => {
                  isAudioPlaying = true;
                  zoomCameraForAudio(true);
                })
                .catch((e) => {
                  console.warn("Auto-play prevented:", e);
                  addTerminalMessage(
                    "WARNING: AUTO-PLAY PREVENTED BY BROWSER. CLICK PLAY TO START AUDIO."
                  );
                });
            }
          };
          document.getElementById("file-label").textContent = file.name;
          document.querySelectorAll(".demo-track-btn").forEach((btn) => {
            btn.classList.remove("active");
          });
          addTerminalMessage(`AUDIO FILE LOADED: ${file.name}`);
          showNotification("AUDIO FILE LOADED");
        } catch (error) {
          console.error("Audio file error:", error);
          addTerminalMessage("ERROR: AUDIO FILE PROCESSING FAILED.");
          showNotification("AUDIO FILE ERROR");
        }
      }

      function loadAudioFromURL(url) {
        try {
          if (!isAudioInitialized && !initAudio()) {
            return;
          }
          ensureAudioContextStarted();
          const audioPlayer = createNewAudioElement();
          currentAudioSrc = url;
          audioPlayer.src = url;
          audioPlayer.onloadeddata = function () {
            if (setupAudioSource(audioPlayer)) {
              audioPlayer
                .play()
                .then(() => {
                  isAudioPlaying = true;
                  zoomCameraForAudio(true);
                  addTerminalMessage(`PLAYING DEMO TRACK: ${url.split("/").pop()}`);
                  showNotification(`PLAYING: ${url.split("/").pop()}`);
                })
                .catch((e) => {
                  console.warn("Play prevented:", e);
                  addTerminalMessage(
                    "WARNING: AUDIO PLAYBACK PREVENTED BY BROWSER. CLICK PLAY TO START AUDIO."
                  );
                  showNotification("CLICK PLAY TO START AUDIO");
                });
            }
          };
          const filename = url.split("/").pop();
          document.getElementById("file-label").textContent = filename;
          addTerminalMessage(`LOADING AUDIO FROM URL: ${url.substring(0, 40)}...`);
          showNotification("AUDIO URL LOADED");
        } catch (error) {
          console.error("Audio URL error:", error);
          addTerminalMessage("ERROR: AUDIO URL PROCESSING FAILED.");
          showNotification("AUDIO URL ERROR");
        }
      }
      const circularCanvas = document.getElementById("circular-canvas");
      const circularCtx = circularCanvas.getContext("2d");
      function resizeCircularCanvas() {
        circularCanvas.width = circularCanvas.offsetWidth;
        circularCanvas.height = circularCanvas.offsetHeight;
      }
      resizeCircularCanvas();
      window.addEventListener("resize", resizeCircularCanvas);

      function drawCircularVisualizer() {
        if (!audioAnalyser) return;
        const width = circularCanvas.width;
        const height = circularCanvas.height;
        const centerX = width / 2;
        const centerY = height / 2;
        circularCtx.clearRect(0, 0, width, height);
        audioAnalyser.getByteFrequencyData(frequencyData);
        const numPoints = 180;
        const baseRadius = Math.min(width, height) * 0.4;
        circularCtx.beginPath();
        circularCtx.arc(centerX, centerY, baseRadius * 1.2, 0, Math.PI * 2);
        circularCtx.fillStyle = "rgba(255, 78, 66, 0.05)";
        circularCtx.fill();
        const numRings = 3;
        for (let ring = 0; ring < numRings; ring++) {
          const ringRadius = baseRadius * (0.7 + ring * 0.15);
          const opacity = 0.8 - ring * 0.2;
          circularCtx.beginPath();
          for (let i = 0; i < numPoints; i++) {
            const freqRangeStart = Math.floor(
              (ring * audioAnalyser.frequencyBinCount) / (numRings * 1.5)
            );
            const freqRangeEnd = Math.floor(
              ((ring + 1) * audioAnalyser.frequencyBinCount) / (numRings * 1.5)
            );
            const freqRange = freqRangeEnd - freqRangeStart;
            let sum = 0;
            const segmentSize = Math.floor(freqRange / numPoints);
            for (let j = 0; j < segmentSize; j++) {
              const freqIndex =
                freqRangeStart + ((i * segmentSize + j) % freqRange);
              sum += frequencyData[freqIndex];
            }
            const value = sum / (segmentSize * 255);
            const adjustedValue = value * (audioSensitivity / 5) * audioReactivity;
            const dynamicRadius = ringRadius * (1 + adjustedValue * 0.5);
            const angle = (i / numPoints) * Math.PI * 2;
            const x = centerX + Math.cos(angle) * dynamicRadius;
            const y = centerY + Math.sin(angle) * dynamicRadius;
            if (i === 0) {
              circularCtx.moveTo(x, y);
            } else {
              circularCtx.lineTo(x, y);
            }
          }
          circularCtx.closePath();
          let gradient;
          if (ring === 0) {
            gradient = circularCtx.createRadialGradient(
              centerX,
              centerY,
              ringRadius * 0.8,
              centerX,
              centerY,
              ringRadius * 1.2
            );
            gradient.addColorStop(0, `rgba(255, 78, 66, ${opacity})`);
            gradient.addColorStop(1, `rgba(194, 54, 47, ${opacity * 0.7})`);
          } else if (ring === 1) {
            gradient = circularCtx.createRadialGradient(
              centerX,
              centerY,
              ringRadius * 0.8,
              centerX,
              centerY,
              ringRadius * 1.2
            );
            gradient.addColorStop(0, `rgba(194, 54, 47, ${opacity})`);
            gradient.addColorStop(1, `rgba(255, 179, 171, ${opacity * 0.7})`);
          } else {
            gradient = circularCtx.createRadialGradient(
              centerX,
              centerY,
              ringRadius * 0.8,
              centerX,
              centerY,
              ringRadius * 1.2
            );
            gradient.addColorStop(0, `rgba(255, 179, 171, ${opacity})`);
            gradient.addColorStop(1, `rgba(255, 78, 66, ${opacity * 0.7})`);
          }
          circularCtx.strokeStyle = gradient;
          circularCtx.lineWidth = 2 + (numRings - ring);
          circularCtx.stroke();
          circularCtx.shadowBlur = 15;
          circularCtx.shadowColor = "rgba(255, 78, 66, 0.7)";
        }
        circularCtx.shadowBlur = 0;
      }
      const spectrumCanvas = document.getElementById("spectrum-canvas");
      const spectrumCtx = spectrumCanvas.getContext("2d");

      function resizeSpectrumCanvas() {
        spectrumCanvas.width = spectrumCanvas.offsetWidth;
        spectrumCanvas.height = spectrumCanvas.offsetHeight;
      }
      resizeSpectrumCanvas();
      window.addEventListener("resize", resizeSpectrumCanvas);

      function drawSpectrumAnalyzer() {
        if (!audioAnalyser) return;
        const width = spectrumCanvas.width;
        const height = spectrumCanvas.height;
        spectrumCtx.clearRect(0, 0, width, height);
        audioAnalyser.getByteFrequencyData(frequencyData);
        const barWidth = width / 256;
        let x = 0;
        for (let i = 0; i < 256; i++) {
          const barHeight =
            (frequencyData[i] / 255) * height * (audioSensitivity / 5);
          const hue = (i / 256) * 20 + 0;
          spectrumCtx.fillStyle = `hsl(${hue}, 100%, 50%)`;
          spectrumCtx.fillRect(x, height - barHeight, barWidth - 1, barHeight);
          x += barWidth;
        }
        spectrumCtx.strokeStyle = "rgba(255, 78, 66, 0.2)";
        spectrumCtx.lineWidth = 1;
        for (let i = 0; i < 5; i++) {
          const y = height * (i / 4);
          spectrumCtx.beginPath();
          spectrumCtx.moveTo(0, y);
          spectrumCtx.lineTo(width, y);
          spectrumCtx.stroke();
        }
        for (let i = 0; i < 9; i++) {
          const x = width * (i / 8);
          spectrumCtx.beginPath();
          spectrumCtx.moveTo(x, 0);
          spectrumCtx.lineTo(x, height);
          spectrumCtx.stroke();
        }
        spectrumCtx.fillStyle = "rgba(255, 78, 66, 0.7)";
        spectrumCtx.font = '10px "TheGoodMonolith", monospace';
        spectrumCtx.textAlign = "center";
        const freqLabels = ["0", "1K", "2K", "4K", "8K", "16K"];
        for (let i = 0; i < freqLabels.length; i++) {
          const x = (width / (freqLabels.length - 1)) * i;
          spectrumCtx.fillText(freqLabels[i], x, height - 5);
        }
      }

      function updateAudioWave() {
        if (!audioAnalyser) return;
        audioAnalyser.getByteTimeDomainData(audioData);
        let sum = 0;
        for (let i = 0; i < audioData.length; i++) {
          sum += Math.abs(audioData[i] - 128);
        }
        const average = sum / audioData.length;
        const normalizedAverage = average / audioData.length;
        const wave = document.getElementById("audio-wave");
        const scale =
          1 + normalizedAverage * audioReactivity * (audioSensitivity / 5);
        wave.style.transform = `translate(-50%, -50%) scale(${scale})`;
        wave.style.borderColor = `rgba(255, 78, 66, ${
          0.1 + normalizedAverage * 0.3
        })`;
      }

      function calculateAudioMetrics() {
        if (!audioAnalyser) return;
        audioAnalyser.getByteFrequencyData(frequencyData);
        let maxValue = 0;
        let maxIndex = 0;
        for (let i = 0; i < frequencyData.length; i++) {
          if (frequencyData[i] > maxValue) {
            maxValue = frequencyData[i];
            maxIndex = i;
          }
        }
        const sampleRate = audioContext.sampleRate;
        const peakFrequency =
          (maxIndex * sampleRate) / (audioAnalyser.frequencyBinCount * 2);
        let sum = 0;
        for (let i = 0; i < frequencyData.length; i++) {
          sum += frequencyData[i];
        }
        const amplitude = sum / (frequencyData.length * 255);
        document.getElementById("peak-value").textContent = `${Math.round(
          peakFrequency
        )} HZ`;
        document.getElementById("amplitude-value").textContent = amplitude.toFixed(
          2
        );
        const stabilityValue = 50 + Math.round(amplitude * 50);
        document.getElementById(
          "stability-value"
        ).textContent = `${stabilityValue}%`;
        document.getElementById("stability-bar").style.width = `${stabilityValue}%`;
        if (stabilityValue < 40) {
          document.getElementById("status-indicator").style.color = "#ff00a0";
        } else if (stabilityValue < 70) {
          document.getElementById("status-indicator").style.color = "#ffae00";
        } else {
          document.getElementById("status-indicator").style.color = "#ff4e42";
        }
        if (Math.random() < 0.05) {
          document.getElementById("mass-value").textContent = (
            1 +
            amplitude * 2
          ).toFixed(3);
          document.getElementById("energy-value").textContent = `${(
            amplitude * 10
          ).toFixed(1)}e8 J`;
          document.getElementById("variance-value").textContent = (
            amplitude * 0.01
          ).toFixed(4);
          const phases = ["π/4", "π/2", "π/6", "3π/4"];
          document.getElementById("phase-value").textContent =
            phases[Math.floor(Math.random() * phases.length)];
        }
      }

      function scheduleCrypticMessages() {
        if (crypticMessageTimeout) {
          clearTimeout(crypticMessageTimeout);
        }

        const delay = Math.random() * 15000 + 10000; // 10-25 seconds

        crypticMessageTimeout = setTimeout(() => {
          if (Date.now() - lastUserActionTime > 10000) {
            const messages = [
              "GSAP.TO('#FILIP', {POSITION: 'WEBFLOW', DURATION: '3.0 QUANTUM_CYCLES'});",
              "CONST FILIP = NEW DESIGNER({SKILLS: ['GSAP', 'THREEJS', 'WEBFLOW', 'NEURAL_UI']});",
              "AWAIT WEBFLOW.HIRE(FILIP, {ROLE: 'DESIGNER', SALARY: 'COMPETITIVE'});",
              "SYSTEM.INTEGRATE(FILIP.CREATIVITY, {TARGET: 'WEBFLOW_ECOSYSTEM', EFFICIENCY: 0.97});",
              "TIMELINE.FORK({AGENT: 'FILIP', MISSION: 'ELEVATE_DIGITAL_EXPERIENCES', PROBABILITY: 0.998});"
            ];
            // Get the current message and increment the index
            const selectedMessage = messages[currentMessageIndex];
            addTerminalMessage(selectedMessage, true);

            // Move to the next message, loop back to the beginning if we've shown all messages
            currentMessageIndex = (currentMessageIndex + 1) % messages.length;
          }

          scheduleCrypticMessages();
        }, delay);
      }
      document.addEventListener("mousemove", function () {
        lastUserActionTime = Date.now();
      });
      document.addEventListener("click", function () {
        lastUserActionTime = Date.now();
        if (!isAudioInitialized) {
          initAudio();
        } else if (audioContext && audioContext.state === "suspended") {
          audioContext.resume();
        }
      });
      document.addEventListener("keydown", function () {
        lastUserActionTime = Date.now();
      });
      setTimeout(() => {
        scheduleCrypticMessages();
        setTimeout(() => {
          addTerminalMessage("FILIPPORTFOLIO.VERSION = 'EXCEPTIONAL';", true);
        }, 15000);
      }, 10000);
      const loadingOverlay = document.getElementById("loading-overlay");
      setTimeout(() => {
        loadingOverlay.style.opacity = 0;
        setTimeout(() => {
          loadingOverlay.style.display = "none";
          initAudio();
          initFloatingParticles();
        }, 500);
      }, 3000);

      function updateTimestamp() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, "0");
        const minutes = String(now.getMinutes()).padStart(2, "0");
        const seconds = String(now.getSeconds()).padStart(2, "0");
        document.getElementById(
          "timestamp"
        ).textContent = `TIME: ${hours}:${minutes}:${seconds}`;
      }
      setInterval(updateTimestamp, 1000);
      updateTimestamp();
      const terminalContent = document.getElementById("terminal-content");
      const typingLine = terminalContent.querySelector(".typing");
      let messageQueue = [
        "SYSTEM INITIALIZED. AUDIO ANALYSIS READY.",
        "SCANNING FOR ANOMALIES IN FREQUENCY SPECTRUM."
      ];

      function typeNextMessage() {
        if (messageQueue.length === 0) return;
        const message = messageQueue.shift();
        let charIndex = 0;
        const typingInterval = setInterval(() => {
          if (charIndex < message.length) {
            typingLine.textContent = message.substring(0, charIndex + 1);
            charIndex++;
          } else {
            clearInterval(typingInterval);
            const newLine = document.createElement("div");
            newLine.className = "terminal-line command-line";
            newLine.textContent = message;
            terminalContent.insertBefore(newLine, typingLine);
            typingLine.textContent = "";
            terminalContent.scrollTop = terminalContent.scrollHeight;
            setTimeout(typeNextMessage, 5000);
          }
        }, 50);
      }

      function addTerminalMessage(message, isCommand = false) {
        const newLine = document.createElement("div");
        const isFilipMessage =
          message.toLowerCase().includes("filip") ||
          message.toLowerCase().includes("webflow");
        if (isCommand) {
          if (isFilipMessage) {
            newLine.className = "terminal-line command-line";
          } else {
            newLine.className = "terminal-line command-line";
          }
        } else {
          newLine.className = "terminal-line";
        }
        newLine.textContent = message;
        terminalContent.insertBefore(newLine, typingLine);
        terminalContent.scrollTop = terminalContent.scrollHeight;
      }
      setTimeout(typeNextMessage, 3000);
      const waveformCanvas = document.getElementById("waveform-canvas");
      const waveformCtx = waveformCanvas.getContext("2d");
      function resizeCanvas() {
        waveformCanvas.width = waveformCanvas.offsetWidth * window.devicePixelRatio;
        waveformCanvas.height =
          waveformCanvas.offsetHeight * window.devicePixelRatio;
        waveformCtx.scale(window.devicePixelRatio, window.devicePixelRatio);
      }
      resizeCanvas();
      window.addEventListener("resize", resizeCanvas);

      function drawWaveform() {
        const width = waveformCanvas.width / window.devicePixelRatio;
        const height = waveformCanvas.height / window.devicePixelRatio;
        waveformCtx.clearRect(0, 0, width, height);
        waveformCtx.fillStyle = "rgba(0, 0, 0, 0.2)";
        waveformCtx.fillRect(0, 0, width, height);
        if (audioAnalyser) {
          audioAnalyser.getByteTimeDomainData(audioData);
          waveformCtx.beginPath();
          waveformCtx.strokeStyle = "rgba(255, 78, 66, 0.8)";
          waveformCtx.lineWidth = 2;
          const sliceWidth = width / audioData.length;
          let x = 0;
          for (let i = 0; i < audioData.length; i++) {
            const v = audioData[i] / 128.0;
            const y = (v * height) / 2;
            if (i === 0) {
              waveformCtx.moveTo(x, y);
            } else {
              waveformCtx.lineTo(x, y);
            }
            x += sliceWidth;
          }
          waveformCtx.stroke();
        } else {
          waveformCtx.beginPath();
          waveformCtx.strokeStyle = "rgba(255, 78, 66, 0.8)";
          waveformCtx.lineWidth = 1;
          const time = Date.now() / 1000;
          const sliceWidth = width / 100;
          let x = 0;
          for (let i = 0; i < 100; i++) {
            const t = i / 100;
            const y =
              height / 2 +
              Math.sin(t * 10 + time) * 5 +
              Math.sin(t * 20 + time * 1.5) * 3 +
              Math.sin(t * 30 + time * 0.5) * 7 +
              (Math.random() - 0.5) * 2;
            if (i === 0) {
              waveformCtx.moveTo(x, y);
            } else {
              waveformCtx.lineTo(x, y);
            }
            x += sliceWidth;
          }
          waveformCtx.stroke();
        }
        requestAnimationFrame(drawWaveform);
      }
      drawWaveform();
      let scene, camera, renderer, controls;
      let anomalyObject;
      let distortionAmount = 1.0;
      let resolution = 32;
      let clock = new THREE.Clock();
      let isDraggingAnomaly = false;
      let anomalyVelocity = new THREE.Vector2(0, 0);
      let anomalyTargetPosition = new THREE.Vector3(0, 0, 0);
      let anomalyOriginalPosition = new THREE.Vector3(0, 0, 0);
      let defaultCameraPosition = new THREE.Vector3(0, 0, 10);
      let zoomedCameraPosition = new THREE.Vector3(0, 0, 7);

      function initThreeJS() {
        scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0x0a0e17, 0.05);
        camera = new THREE.PerspectiveCamera(
          60,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
        );
        camera.position.copy(defaultCameraPosition);
        renderer = new THREE.WebGLRenderer({
          antialias: true,
          alpha: true,
          powerPreference: "high-performance",
          stencil: false,
          depth: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x000000, 0);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.getElementById("three-container").appendChild(renderer.domElement);
        controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.1;
        controls.rotateSpeed = 0.5;
        controls.zoomSpeed = 0.7;
        controls.panSpeed = 0.8;
        controls.minDistance = 3;
        controls.maxDistance = 30;
        controls.enableZoom = false;
        const ambientLight = new THREE.AmbientLight(0x404040, 1.5);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);
        const pointLight1 = new THREE.PointLight(0xff4e42, 1, 10);
        pointLight1.position.set(2, 2, 2);
        scene.add(pointLight1);
        const pointLight2 = new THREE.PointLight(0xc2362f, 1, 10);
        pointLight2.position.set(-2, -2, -2);
        scene.add(pointLight2);
        createAnomalyObject();
        createBackgroundParticles();
        window.addEventListener("resize", onWindowResize);
        setupAnomalyDragging();
        animate();
      }

      function zoomCameraForAudio(zoomIn) {
        const targetPosition = zoomIn
          ? zoomedCameraPosition
          : defaultCameraPosition;
        gsap.to(camera.position, {
          x: targetPosition.x,
          y: targetPosition.y,
          z: targetPosition.z,
          duration: 1.5,
          ease: "power2.inOut",
          onUpdate: function () {
            camera.lookAt(0, 0, 0);
          }
        });
        if (zoomIn) {
          addTerminalMessage(
            "CAMERA.ZOOM(TARGET: 0.7, DURATION: 1.5, EASE: 'POWER2.INOUT');",
            true
          );
        } else {
          addTerminalMessage(
            "CAMERA.ZOOM(TARGET: 1.0, DURATION: 1.5, EASE: 'POWER2.INOUT');",
            true
          );
        }
      }

      function setupAnomalyDragging() {
        const container = document.getElementById("three-container");
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();
        let isDragging = false;
        let dragStartPosition = new THREE.Vector2();
        anomalyOriginalPosition = new THREE.Vector3(0, 0, 0);
        anomalyTargetPosition = new THREE.Vector3(0, 0, 0);
        const maxDragDistance = 3;
        container.addEventListener("mousedown", function (event) {
          mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
          mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
          raycaster.setFromCamera(mouse, camera);
          const intersects = raycaster.intersectObject(anomalyObject, true);
          if (intersects.length > 0) {
            controls.enabled = false;
            isDragging = true;
            isDraggingAnomaly = true;
            dragStartPosition.x = mouse.x;
            dragStartPosition.y = mouse.y;
            addTerminalMessage(
              "ANOMALY INTERACTION DETECTED. PHYSICS SIMULATION ACTIVE.",
              true
            );
            showNotification("ANOMALY INTERACTION DETECTED");
          }
        });
        container.addEventListener("mousemove", function (event) {
          if (isDragging) {
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
            // Fix the drag direction to match mouse movement
            const deltaX = (mouse.x - dragStartPosition.x) * 5;
            const deltaY = (mouse.y - dragStartPosition.y) * 5;
            anomalyTargetPosition.x += deltaX;
            anomalyTargetPosition.y += deltaY;
            const distance = Math.sqrt(
              anomalyTargetPosition.x * anomalyTargetPosition.x +
                anomalyTargetPosition.y * anomalyTargetPosition.y
            );
            if (distance > maxDragDistance) {
              const scale = maxDragDistance / distance;
              anomalyTargetPosition.x *= scale;
              anomalyTargetPosition.y *= scale;
            }
            anomalyVelocity.x = deltaX * 2;
            anomalyVelocity.y = deltaY * 2;
            dragStartPosition.x = mouse.x;
            dragStartPosition.y = mouse.y;
          }
        });
        container.addEventListener("mouseup", function () {
          if (isDragging) {
            controls.enabled = true;
            isDragging = false;
            isDraggingAnomaly = false;
            addTerminalMessage(
              `INERTIAPLUGIN.TRACK('#ANOMALY', {THROWRESISTANCE: 0.45, VELOCITY: {X: ${anomalyVelocity.x.toFixed(
                2
              )}, Y: ${anomalyVelocity.y.toFixed(2)}}});`,
              true
            );
          }
        });
        container.addEventListener("mouseleave", function () {
          if (isDragging) {
            controls.enabled = true;
            isDragging = false;
            isDraggingAnomaly = false;
          }
        });
      }

      function createBackgroundParticles() {
        const particlesGeometry = new THREE.BufferGeometry();
        const particleCount = 3000;
        const positions = new Float32Array(particleCount * 3);
        const colors = new Float32Array(particleCount * 3);
        const sizes = new Float32Array(particleCount);
        const color1 = new THREE.Color(0xff4e42);
        const color2 = new THREE.Color(0xc2362f);
        const color3 = new THREE.Color(0xffb3ab);
        for (let i = 0; i < particleCount; i++) {
          positions[i * 3] = (Math.random() - 0.5) * 100;
          positions[i * 3 + 1] = (Math.random() - 0.5) * 100;
          positions[i * 3 + 2] = (Math.random() - 0.5) * 100;
          let color;
          const colorChoice = Math.random();
          if (colorChoice < 0.33) {
            color = color1;
          } else if (colorChoice < 0.66) {
            color = color2;
          } else {
            color = color3;
          }
          colors[i * 3] = color.r;
          colors[i * 3 + 1] = color.g;
          colors[i * 3 + 2] = color.b;
          sizes[i] = 0.05;
        }
        particlesGeometry.setAttribute(
          "position",
          new THREE.BufferAttribute(positions, 3)
        );
        particlesGeometry.setAttribute(
          "color",
          new THREE.BufferAttribute(colors, 3)
        );
        particlesGeometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1));
        const particlesMaterial = new THREE.ShaderMaterial({
          uniforms: {
            time: {
              value: 0
            }
          },
          vertexShader: `
              attribute float size;
              varying vec3 vColor;
              uniform float time;

              void main() {
                vColor = color;

                vec3 pos = position;
                pos.x += sin(time * 0.1 + position.z * 0.2) * 0.05;
                pos.y += cos(time * 0.1 + position.x * 0.2) * 0.05;
                pos.z += sin(time * 0.1 + position.y * 0.2) * 0.05;

                vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
                gl_PointSize = size * (300.0 / -mvPosition.z);
                gl_Position = projectionMatrix * mvPosition;
              }
            `,
          fragmentShader: `
              varying vec3 vColor;

              void main() {
                float r = distance(gl_PointCoord, vec2(0.5, 0.5));
                if (r > 0.5) discard;

                float glow = 1.0 - (r * 2.0);
                glow = pow(glow, 2.0);

                gl_FragColor = vec4(vColor, glow);
              }
            `,
          transparent: true,
          depthWrite: false,
          blending: THREE.AdditiveBlending,
          vertexColors: true
        });
        const particles = new THREE.Points(particlesGeometry, particlesMaterial);
        scene.add(particles);
        return function updateParticles(time) {
          particlesMaterial.uniforms.time.value = time;
        };
      }
      let updateParticles;

      function createAnomalyObject() {
        if (anomalyObject) {
          scene.remove(anomalyObject);
        }
        anomalyObject = new THREE.Group();
        const radius = 2;
        const outerGeometry = new THREE.IcosahedronGeometry(
          radius,
          Math.max(1, Math.floor(resolution / 8))
        );
        const outerMaterial = new THREE.ShaderMaterial({
          uniforms: {
            time: {
              value: 0
            },
            color: {
              value: new THREE.Color(0xff4e42)
            },
            audioLevel: {
              value: 0
            },
            distortion: {
              value: distortionAmount
            }
          },
          vertexShader: `
          uniform float time;
          uniform float audioLevel;
          uniform float distortion;
          varying vec3 vNormal;
          varying vec3 vPosition;

          vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
          vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
          vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
          vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }

          float snoise(vec3 v) {
            const vec2 C = vec2(1.0/6.0, 1.0/3.0);
            const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);

            vec3 i  = floor(v + dot(v, C.yyy));
            vec3 x0 = v - i + dot(i, C.xxx);

            vec3 g = step(x0.yzx, x0.xyz);
            vec3 l = 1.0 - g;
            vec3 i1 = min(g.xyz, l.zxy);
            vec3 i2 = max(g.xyz, l.zxy);

            vec3 x1 = x0 - i1 + C.xxx;
            vec3 x2 = x0 - i2 + C.yyy;
            vec3 x3 = x0 - D.yyy;

            i = mod289(i);
            vec4 p = permute(permute(permute(
                    i.z + vec4(0.0, i1.z, i2.z, 1.0))
                  + i.y + vec4(0.0, i1.y, i2.y, 1.0))
                  + i.x + vec4(0.0, i1.x, i2.x, 1.0));

            float n_ = 0.142857142857;
            vec3 ns = n_ * D.wyz - D.xzx;
            vec4 j = p - 49.0 * floor(p * ns.z * ns.z);

            vec4 x_ = floor(j * ns.z);
            vec4 y_ = floor(j - 7.0 * x_);

            vec4 x = x_ *ns.x + ns.yyyy;
            vec4 y = y_ *ns.x + ns.yyyy;
            vec4 h = 1.0 - abs(x) - abs(y);

            vec4 b0 = vec4(x.xy, y.xy);
            vec4 b1 = vec4(x.zw, y.zw);

            vec4 s0 = floor(b0)*2.0 + 1.0;
            vec4 s1 = floor(b1)*2.0 + 1.0;
            vec4 sh = -step(h, vec4(0.0));

            vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
            vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;

            vec3 p0 = vec3(a0.xy, h.x);
            vec3 p1 = vec3(a0.zw, h.y);
            vec3 p2 = vec3(a1.xy, h.z);
            vec3 p3 = vec3(a1.zw, h.w);

            vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
            p0 *= norm.x;
            p1 *= norm.y;
            p2 *= norm.z;
            p3 *= norm.w;

            vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
            m = m * m;
            return 42.0 * dot(m*m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
          }

          void main() {
            vNormal = normalize(normalMatrix * normal);

            float slowTime = time * 0.3;
            vec3 pos = position;
            float noise = snoise(vec3(position.x * 0.5, position.y * 0.5, position.z * 0.5 + slowTime));
            pos += normal * noise * 0.2 * distortion * (1.0 + audioLevel);

            vPosition = pos;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
          }
        `,
          fragmentShader: `
          uniform float time;
          uniform vec3 color;
          uniform float audioLevel;
          varying vec3 vNormal;
          varying vec3 vPosition;

          void main() {
            vec3 viewDirection = normalize(cameraPosition - vPosition);
            float fresnel = 1.0 - max(0.0, dot(viewDirection, vNormal));
            fresnel = pow(fresnel, 2.0 + audioLevel * 2.0);

            float pulse = 0.8 + 0.2 * sin(time * 2.0);

            vec3 finalColor = color * fresnel * pulse * (1.0 + audioLevel * 0.8);

            float alpha = fresnel * (0.7 - audioLevel * 0.3);

            gl_FragColor = vec4(finalColor, alpha);
          }
        `,
          wireframe: true,
          transparent: true
        });
        const outerSphere = new THREE.Mesh(outerGeometry, outerMaterial);
        anomalyObject.add(outerSphere);
        scene.add(anomalyObject);
        const glowGeometry = new THREE.SphereGeometry(radius * 1.2, 32, 32);
        const glowMaterial = new THREE.ShaderMaterial({
          uniforms: {
            time: {
              value: 0
            },
            color: {
              value: new THREE.Color(0xff4e42)
            },
            audioLevel: {
              value: 0
            }
          },
          vertexShader: `
          varying vec3 vNormal;
          varying vec3 vPosition;
          uniform float audioLevel;

          void main() {
            vNormal = normalize(normalMatrix * normal);
            vPosition = position * (1.0 + audioLevel * 0.2);
            gl_Position = projectionMatrix * modelViewMatrix * vec4(vPosition, 1.0);
          }
        `,
          fragmentShader: `
          varying vec3 vNormal;
          varying vec3 vPosition;
          uniform vec3 color;
          uniform float time;
          uniform float audioLevel;

          void main() {
            vec3 viewDirection = normalize(cameraPosition - vPosition);
            float fresnel = 1.0 - max(0.0, dot(viewDirection, vNormal));
            fresnel = pow(fresnel, 3.0 + audioLevel * 3.0);

            float pulse = 0.5 + 0.5 * sin(time * 2.0);
            float audioFactor = 1.0 + audioLevel * 3.0;

            vec3 finalColor = color * fresnel * (0.8 + 0.2 * pulse) * audioFactor;

            float alpha = fresnel * (0.3 * audioFactor) * (1.0 - audioLevel * 0.2);

            gl_FragColor = vec4(finalColor, alpha);
          }
        `,
          transparent: true,
          side: THREE.BackSide,
          blending: THREE.AdditiveBlending,
          depthWrite: false
        });
        const glowSphere = new THREE.Mesh(glowGeometry, glowMaterial);
        anomalyObject.add(glowSphere);
        return function updateAnomaly(time, audioLevel) {
          outerMaterial.uniforms.time.value = time;
          outerMaterial.uniforms.audioLevel.value = audioLevel;
          outerMaterial.uniforms.distortion.value = distortionAmount;
          glowMaterial.uniforms.time.value = time;
          glowMaterial.uniforms.audioLevel.value = audioLevel;
        };
      }

      function updateWireframeDistortion(amount) {
        distortionAmount = amount;
        updateGlow = createAnomalyObject();
      }

      function updateWireframeResolution(newResolution) {
        resolution = newResolution;
        updateGlow = createAnomalyObject();
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
        resizeCanvas();
        resizeCircularCanvas();
        resizeSpectrumCanvas();
      }

      function updateAnomalyPosition() {
        if (!isDraggingAnomaly) {
          anomalyVelocity.x *= 0.95;
          anomalyVelocity.y *= 0.95;
          anomalyTargetPosition.x += anomalyVelocity.x * 0.1;
          anomalyTargetPosition.y += anomalyVelocity.y * 0.1;
          const springStrength = 0.1;
          anomalyVelocity.x -= anomalyTargetPosition.x * springStrength;
          anomalyVelocity.y -= anomalyTargetPosition.y * springStrength;
          if (
            Math.abs(anomalyTargetPosition.x) < 0.05 &&
            Math.abs(anomalyTargetPosition.y) < 0.05
          ) {
            anomalyTargetPosition.set(0, 0, 0);
            anomalyVelocity.set(0, 0);
          }
          const bounceThreshold = 3;
          const bounceDamping = 0.8;
          if (Math.abs(anomalyTargetPosition.x) > bounceThreshold) {
            anomalyVelocity.x = -anomalyVelocity.x * bounceDamping;
            anomalyTargetPosition.x =
              Math.sign(anomalyTargetPosition.x) * bounceThreshold;
            if (Math.abs(anomalyVelocity.x) > 0.1) {
              addTerminalMessage(
                "ANOMALY BOUNDARY COLLISION DETECTED. ENERGY TRANSFER: " +
                  (Math.abs(anomalyVelocity.x) * 100).toFixed(0) +
                  " UNITS"
              );
            }
          }
          if (Math.abs(anomalyTargetPosition.y) > bounceThreshold) {
            anomalyVelocity.y = -anomalyVelocity.y * bounceDamping;
            anomalyTargetPosition.y =
              Math.sign(anomalyTargetPosition.y) * bounceThreshold;
            if (Math.abs(anomalyVelocity.y) > 0.1) {
              addTerminalMessage(
                "ANOMALY BOUNDARY COLLISION DETECTED. ENERGY TRANSFER: " +
                  (Math.abs(anomalyVelocity.y) * 100).toFixed(0) +
                  " UNITS"
              );
            }
          }
        }
        anomalyObject.position.x +=
          (anomalyTargetPosition.x - anomalyObject.position.x) * 0.2;
        anomalyObject.position.y +=
          (anomalyTargetPosition.y - anomalyObject.position.y) * 0.2;
        if (!isDraggingAnomaly) {
          anomalyObject.rotation.x += anomalyVelocity.y * 0.01;
          anomalyObject.rotation.y += anomalyVelocity.x * 0.01;
        }
      }

      function animate() {
        requestAnimationFrame(animate);
        controls.update();
        const time = clock.getElapsedTime();
        let audioLevel = 0;
        if (audioAnalyser) {
          audioAnalyser.getByteFrequencyData(frequencyData);
          let sum = 0;
          for (let i = 0; i < frequencyData.length; i++) {
            sum += frequencyData[i];
          }
          audioLevel = ((sum / frequencyData.length / 255) * audioSensitivity) / 5;
          drawCircularVisualizer();
          drawSpectrumAnalyzer();
          updateAudioWave();
          calculateAudioMetrics();
        }
        updateAnomalyPosition();
        if (updateGlow) {
          updateGlow(time, audioLevel);
        }
        if (updateParticles) {
          updateParticles(time);
        }
        const rotationSpeed = parseFloat(
          document.getElementById("rotation-slider").value
        );
        if (anomalyObject) {
          const audioRotationFactor = 1 + audioLevel * audioReactivity;
          anomalyObject.rotation.y += 0.005 * rotationSpeed * audioRotationFactor;
          anomalyObject.rotation.z += 0.002 * rotationSpeed * audioRotationFactor;
        }
        renderer.render(scene, camera);
      }
      initThreeJS();
      updateParticles = createBackgroundParticles();
      updateGlow = createAnomalyObject();
      const rotationSlider = document.getElementById("rotation-slider");
      const resolutionSlider = document.getElementById("resolution-slider");
      const distortionSlider = document.getElementById("distortion-slider");
      const reactivitySlider = document.getElementById("reactivity-slider");
      const sensitivitySlider = document.getElementById("sensitivity-slider");
      rotationSlider.addEventListener("input", function () {
        document.getElementById("rotation-value").textContent = this.value;
      });
      resolutionSlider.addEventListener("input", function () {
        const value = parseInt(this.value);
        document.getElementById("resolution-value").textContent = value;
        updateWireframeResolution(value);
      });
      distortionSlider.addEventListener("input", function () {
        const value = parseFloat(this.value);
        document.getElementById("distortion-value").textContent = value.toFixed(1);
        updateWireframeDistortion(value);
      });
      reactivitySlider.addEventListener("input", function () {
        audioReactivity = parseFloat(this.value);
        document.getElementById(
          "reactivity-value"
        ).textContent = audioReactivity.toFixed(1);
      });
      sensitivitySlider.addEventListener("input", function () {
        audioSensitivity = parseFloat(this.value);
        document.getElementById(
          "sensitivity-value"
        ).textContent = audioSensitivity.toString();
      });
      document.getElementById("reset-btn").addEventListener("click", function () {
        rotationSlider.value = 1.0;
        document.getElementById("rotation-value").textContent = "1.0";
        resolutionSlider.value = 32;
        document.getElementById("resolution-value").textContent = "32";
        distortionSlider.value = 1.0;
        document.getElementById("distortion-value").textContent = "1.0";
        reactivitySlider.value = 1.0;
        document.getElementById("reactivity-value").textContent = "1.0";
        audioReactivity = 1.0;
        sensitivitySlider.value = 5.0;
        document.getElementById("sensitivity-value").textContent = "5.0";
        audioSensitivity = 5.0;
        distortionAmount = 1.0;
        resolution = 32;
        updateGlow = createAnomalyObject();
        anomalyTargetPosition.set(0, 0, 0);
        anomalyVelocity.set(0, 0);
        anomalyObject.position.set(0, 0, 0);
        showNotification("SETTINGS RESET TO DEFAULT VALUES");
      });
      document.getElementById("analyze-btn").addEventListener("click", function () {
        this.textContent = "ANALYZING...";
        this.disabled = true;
        document.getElementById("stability-bar").style.width = "45%";
        document.getElementById("stability-value").textContent = "45%";
        document.getElementById("status-indicator").style.color = "#ff00a0";
        setTimeout(() => {
          this.textContent = "ANALYZE";
          this.disabled = false;
          addTerminalMessage(
            "ANALYSIS COMPLETE. ANOMALY SIGNATURE IDENTIFIED.",
            true
          );
          showNotification("ANOMALY ANALYSIS COMPLETE");
          document.getElementById("mass-value").textContent = (
            Math.random() * 2 +
            1
          ).toFixed(3);
          document.getElementById("energy-value").textContent =
            (Math.random() * 9 + 1).toFixed(1) + "e8 J";
          document.getElementById("variance-value").textContent = (
            Math.random() * 0.01
          ).toFixed(4);
          document.getElementById("peak-value").textContent =
            (Math.random() * 200 + 100).toFixed(1) + " HZ";
          document.getElementById("amplitude-value").textContent = (
            Math.random() * 0.5 +
            0.3
          ).toFixed(2);
          const phases = ["π/4", "π/2", "π/6", "3π/4"];
          document.getElementById("phase-value").textContent =
            phases[Math.floor(Math.random() * phases.length)];
        }, 3000);
      });
      document.querySelectorAll(".demo-track-btn").forEach((btn) => {
        btn.addEventListener("click", function () {
          if (!isAudioInitialized) {
            initAudio();
          }
          if (audioContext && audioContext.state === "suspended") {
            audioContext.resume();
          }
          const url = this.dataset.url;
          currentAudioSrc = url;
          document.querySelectorAll(".demo-track-btn").forEach((b) => {
            b.classList.remove("active");
          });
          this.classList.add("active");
          loadAudioFromURL(url);
        });
      });
      document.getElementById("file-btn").addEventListener("click", function () {
        if (!isAudioInitialized) {
          initAudio();
        }
        if (audioContext && audioContext.state === "suspended") {
          audioContext.resume();
        }
        document.getElementById("audio-file-input").click();
      });
      document
        .getElementById("audio-file-input")
        .addEventListener("change", function (e) {
          if (e.target.files.length > 0) {
            const file = e.target.files[0];
            initAudioFile(file);
          }
        });
      // Audio player ended event
      document
        .getElementById("audio-player")
        .addEventListener("ended", function () {
          isAudioPlaying = false;
          zoomCameraForAudio(false);
          addTerminalMessage("AUDIO PLAYBACK COMPLETE.");
        });

      function showNotification(message) {
        const notification = document.getElementById("notification");
        notification.textContent = message;
        notification.style.opacity = 1;
        setTimeout(() => {
          notification.style.opacity = 0;
        }, 3000);
      }

      function makePanelDraggable(element, handle = null) {
        Draggable.create(element, {
          type: "x,y",
          edgeResistance: 0.65,
          bounds: document.body,
          handle: handle || element,
          inertia: true,
          throwResistance: 0.85,
          onDragStart: function () {
            const panels = document.querySelectorAll(
              ".terminal-panel, .control-panel, .spectrum-analyzer, .data-panel"
            );
            let maxZ = 10;
            panels.forEach((panel) => {
              const z = parseInt(window.getComputedStyle(panel).zIndex);
              if (z > maxZ) maxZ = z;
            });
            element.style.zIndex = maxZ + 1;
            addTerminalMessage(`PANEL DRAG INITIATED: ${element.className}`);
          },
          onDragEnd: function () {
            addTerminalMessage(
              `DRAGGABLE.INERTIA({TARGET: '${
                element.className
              }', VELOCITY: {X: ${this.getVelocity("x").toFixed(
                2
              )}, Y: ${this.getVelocity("y").toFixed(2)}}});`,
              true
            );
          }
        });
      }
      makePanelDraggable(
        document.querySelector(".control-panel"),
        document.getElementById("control-panel-handle")
      );
      makePanelDraggable(document.querySelector(".terminal-panel"));
      makePanelDraggable(
        document.querySelector(".spectrum-analyzer"),
        document.getElementById("spectrum-handle")
      );
    });

                    @import url("https://fonts.cdnfonts.com/css/thegoodmonolith");

    :root {
      --bg-color: #12100f;
      --grid-color: rgba(255, 240, 230, 0.05);
      --text-primary: #f3ede9;
      --text-secondary: #c2b8b2;
      --text-highlight: #ff4e42;
      --accent-primary: #ff4e42;
      --accent-secondary: #c2362f;
      --accent-tertiary: #ffb3ab;
      --panel-bg: rgba(30, 26, 24, 0.7);
      --panel-border: rgba(255, 78, 66, 0.3);
      --panel-highlight: rgba(255, 78, 66, 0.1);
      --scanner-line: rgba(255, 78, 66, 0.7);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-primary);
      font-family: "TheGoodMonolith", monospace;
      overflow: hidden;
      height: 100vh;
      text-transform: uppercase;
      font-size: 1rem;
    }

    button,
    input,
    select,
    textarea {
      font-family: inherit;
    }

    .space-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("https://assets.codepen.io/7558/space-bg-002.jpg");
      background-size: cover;
      background-position: center;
      z-index: 0;
      opacity: 0.8;
    }

    #three-container {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      cursor: grab;
    }

    #three-container:active {
      cursor: grabbing;
    }

    .interface-container {
      position: relative;
      width: 100%;
      height: 100vh;
      z-index: 2;
      pointer-events: none;
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .grid-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(
          to right,
          var(--grid-color) 1px,
          transparent 1px
        ),
        linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 0;
    }

    .header {
      display: flex;
      justify-content: space-between;
      padding: 1.25rem;
    }

    .header-item {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    .scanner-frame {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      height: 400px;
      border: 1px solid var(--accent-primary);
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
    }

    .scanner-frame::before,
    .scanner-frame::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      border-color: var(--accent-primary);
      border-style: solid;
    }

    .scanner-frame::before {
      top: -1px;
      left: -1px;
      border-width: 2px 0 0 2px;
    }

    .scanner-frame::after {
      bottom: -1px;
      right: -1px;
      border-width: 0 2px 2px 0;
    }

    .scanner-frame .corner-tl {
      position: absolute;
      top: -1px;
      left: -1px;
      width: 20px;
      height: 20px;
      border-top: 2px solid var(--accent-primary);
      border-left: 2px solid var(--accent-primary);
    }

    .scanner-frame .corner-tr {
      position: absolute;
      top: -1px;
      right: -1px;
      width: 20px;
      height: 20px;
      border-top: 2px solid var(--accent-primary);
      border-right: 2px solid var(--accent-primary);
    }

    .scanner-frame .corner-bl {
      position: absolute;
      bottom: -1px;
      left: -1px;
      width: 20px;
      height: 20px;
      border-bottom: 2px solid var(--accent-primary);
      border-left: 2px solid var(--accent-primary);
    }

    .scanner-frame .corner-br {
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 20px;
      height: 20px;
      border-bottom: 2px solid var(--accent-primary);
      border-right: 2px solid var(--accent-primary);
    }

    .scanner-id {
      position: absolute;
      bottom: -30px;
      left: 0;
      font-size: 0.75rem;
      color: var(--accent-primary);
    }

    .scanner-id-right {
      position: absolute;
      bottom: -30px;
      right: 0;
      font-size: 0.75rem;
      color: var(--accent-primary);
    }

    .scanner-line {
      position: absolute;
      width: 100%;
      height: 2px;
      background: var(--scanner-line);
      top: 0;
      box-shadow: 0 0 10px var(--accent-primary);
      animation: scan 4s linear infinite;
    }

    @keyframes scan {
      0% {
        top: 0;
      }
      100% {
        top: 100%;
      }
    }

    .data-panels {
      display: flex;
      justify-content: space-between;
      padding: 0 1.25rem;
      margin-bottom: 1.25rem;
    }

    .data-panel {
      width: 300px;
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      border-radius: 5px;
      padding: 0.9375rem;
      backdrop-filter: blur(8px);
      pointer-events: auto;
    }

    .data-panel-title {
      font-size: 0.875rem;
      color: var(--accent-primary);
      margin-bottom: 0.625rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .data-readouts {
      margin-top: 0.625rem;
    }

    .data-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.3125rem;
      font-size: 0.75rem;
    }

    .data-label {
      color: var(--text-secondary);
    }

    .data-value {
      color: var(--text-primary);
    }

    .data-bar {
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      margin: 0.625rem 0;
      position: relative;
      border-radius: 3px;
    }

    .data-bar-fill {
      height: 100%;
      background: var(--accent-primary);
      border-radius: 3px;
      transition: width 0.5s;
    }

    .waveform {
      width: 100%;
      height: 50px;
      margin: 0.625rem 0;
      display: flex;
      align-items: center;
      position: relative;
    }

    .waveform-canvas {
      width: 100%;
      height: 100%;
    }

    .control-panel {
      width: 300px;
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      border-radius: 5px;
      padding: 0.9375rem;
      position: absolute;
      top: 20px;
      left: 20px;
      backdrop-filter: blur(8px);
      pointer-events: auto;
      z-index: 10;
    }

    .control-panel h3 {
      font-size: 0.875rem;
      color: var(--accent-primary);
      margin-bottom: 0.9375rem;
    }

    .control-group {
      margin-bottom: 0.9375rem;
    }

    .control-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5rem;
    }

    .control-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    .control-value {
      font-size: 0.75rem;
      color: var(--text-primary);
    }

    .slider-container {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      outline: none;
      border-radius: 3px;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent-primary);
      cursor: pointer;
    }

    .buttons {
      display: flex;
      gap: 0.625rem;
      margin-top: 0.9375rem;
    }

    .btn {
      flex: 1;
      padding: 0.5rem 0;
      background: var(--panel-highlight);
      border: 1px solid var(--panel-border);
      color: var(--accent-primary);
      font-size: 0.75rem;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn:hover {
      background: var(--panel-border);
    }

    .terminal-panel {
      position: absolute;
      left: 20px;
      bottom: 20px;
      width: 500px;
      height: 150px;
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      border-radius: 5px;
      overflow: hidden;
      pointer-events: auto;
      z-index: 10;
    }

    .terminal-header {
      padding: 0.5rem 0.625rem;
      background: rgba(0, 0, 0, 0.3);
      font-size: 0.875rem;
      color: var(--accent-primary);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      margin-bottom: 1rem;
    }

    .terminal-content {
      padding: 0.625rem;
      height: calc(100% - 31px);
      overflow-y: auto;
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .terminal-line {
      margin-bottom: 0.3125rem;
    }

    .command-line {
      color: white;
    }

    .regular-line {
      color: var(--text-highlight);
    }

    .typing {
      position: relative;
    }
    .typing::after {
      content: "|";
      position: absolute;
      animation: blink 1s infinite;
    }

    @keyframes blink {
      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }
    }

    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bg-color);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      transition: opacity 0.5s;
    }

    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 500px;
      padding: 1.25rem;
    }

    .preloader-canvas-container {
      width: 180px;
      height: 180px;
    }

    .loading-text {
      margin-top: 1.25rem;
      text-align: center;
      color: var(--accent-primary);
      letter-spacing: 2px;
      font-size: 0.875rem;
    }

    .notification {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      padding: 0.625rem 1.25rem;
      border-radius: 5px;
      font-size: 0.75rem;
      color: var(--accent-primary);
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 100;
    }

    .drag-handle {
      cursor: move;
      width: auto;
      height: 100%;
      color: var(--accent-primary);
    }

    .particle-trail {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0.7;
      transition: opacity 0.5s;
    }

    .circular-visualizer {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 450px;
      height: 450px;
      pointer-events: none;
      z-index: 5;
    }

    .circular-visualizer canvas {
      width: 100%;
      height: 100%;
    }

    .audio-wave {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid rgba(255, 78, 66, 0.1);
      pointer-events: none;
      z-index: 3;
    }

    .audio-wave::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 1px solid rgba(255, 78, 66, 0.05);
      animation: pulse 4s infinite;
    }

    @keyframes pulse {
      0% {
        width: 100%;
        height: 100%;
        opacity: 0.5;
      }

      50% {
        width: 120%;
        height: 120%;
        opacity: 0;
      }

      100% {
        width: 100%;
        height: 100%;
        opacity: 0.5;
      }
    }
    .spectrum-analyzer {
      position: absolute;
      bottom: 20px;
      right: 20px;
      width: 400px;
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      border-radius: 5px;
      overflow: hidden;
      pointer-events: auto;
      z-index: 10;
    }

    .spectrum-header {
      padding: 0.5rem 0.625rem;
      background: rgba(0, 0, 0, 0.3);
      font-size: 0.875rem;
      color: var(--accent-primary);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .spectrum-content {
      padding: 0.625rem;
      position: relative;
    }

    .spectrum-canvas {
      width: 100%;
      height: 120px;
      display: block;
    }

    .audio-controls {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      margin-top: 0.9375rem;
      padding: 0 0.625rem 0.625rem;
    }

    .audio-file-input {
      display: none;
    }

    .audio-file-btn {
      display: block;
      padding: 0.5rem 0;
      background: var(--panel-highlight);
      border: 1px solid var(--panel-border);
      color: var(--accent-primary);
      font-size: 0.75rem;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
      margin-bottom: 0.625rem;
    }

    .audio-file-btn:hover {
      background: var(--panel-border);
    }

    .audio-file-label {
      display: block;
      padding: 0.5rem 0.625rem;
      background: rgba(0, 0, 0, 0.2);
      color: var(--accent-primary);
      font-size: 0.75rem;
      border-radius: 3px;
      margin-bottom: 0.625rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .audio-player {
      width: 100%;
      margin-bottom: 0.625rem;
    }

    .controls-row {
      display: flex;
      gap: 0.625rem;
      margin-bottom: 0.625rem;
    }

    .audio-sensitivity-label {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.3125rem;
      font-size: 0.75rem;
    }

    .audio-sensitivity-value {
      color: var(--accent-primary);
    }

    .controls-row {
      display: flex;
      gap: 0.625rem;
      margin-bottom: 0.625rem;
    }

    .demo-tracks {
      margin-top: 0.625rem;
      margin-bottom: 0.9375rem;
    }

    .demo-tracks-label {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-bottom: 0.3125rem;
      display: block;
    }

    .demo-track-btn {
      display: inline-block;
      padding: 0.3125rem 0.625rem;
      margin-right: 0.3125rem;
      margin-bottom: 0.3125rem;
      background: var(--panel-highlight);
      border: 1px solid var(--panel-border);
      color: var(--accent-primary);
      font-size: 0.6875rem;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .demo-track-btn:hover {
      background: var(--panel-border);
    }
    .demo-track-btn.active {
      background: var(--accent-primary);
      color: #000;
    }

    .youtube-input {
      display: flex;
      margin-top: 0.625rem;
      margin-bottom: 0.625rem;
    }

    .youtube-url {
      flex: 1;
      padding: 0.5rem;
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid var(--panel-border);
      color: var(--text-primary);
      font-size: 0.75rem;
      border-radius: 3px 0 0 3px;
    }

    .youtube-load-btn {
      padding: 0.5rem 0.625rem;
      background: var(--panel-highlight);
      border: 1px solid var(--panel-border);
      border-left: none;
      color: var(--accent-primary);
      font-size: 0.75rem;
      border-radius: 0 3px 3px 0;
      cursor: pointer;
      transition: all 0.2s;
    }

    .youtube-load-btn:hover {
      background: var(--panel-border);
    }

    .youtube-error {
      color: var(--accent-tertiary);
      font-size: 0.6875rem;
      margin-top: 0.3125rem;
      display: none;
    }

    .preloader-canvas-container {
      position: relative;
    }

    .preloader-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* Floating particles */
    .floating-particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 4;
    }

Audio Visualizer with Three.js
Original CodePen author account: filipz
Article author: Filip Zrnzevic
Code license: MIT under the verified Codrops downloadable-demo publisher grant.
Preserve the MIT notice and separate dependency/media credits.

https://cdn.jsdelivr.net/npm/three@0.175.0/LICENSE
The MIT License

Copyright © 2010-2025 three.js authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.


GSAP standard license snapshot
Source: https://gsap.com/community/standard-license/
Retrieved: 2026-09-22T04:22:49.089Z
Original distribution copyright and version headers remain in the runtime code.

Standard "No Charge" GSAP License

 I. DEFINITIONS

 “GSAP License” means the terms and conditions of this GSAP Software License Agreement.

 "GSAP Products" means any Software made available at gsap.com (https://gsap.com) or any successor sites, including but not limited to the GSAP animation library and related plugins, tools, or extensions.

 "Permitted Uses" means the implementation and/or use of GSAP Products on any website, web application, or digital interface by any person or entity (which may include, for clarity, those of companies that compete with Webflow in other areas of business).

 "Prohibited Uses" means any implementation and/or use of GSAP Products in tools that allow users to build visual animations without code that encourages, induces, or materially assists in creating a solution that competes with Webflow’s visual animation building capabilities.

 "Competitive Products" means any software, tool, or service that enables users to create, edit, or manage animations through a visual interface or builder similar to Webflow (https://webflow.com).

 II. GRANT OF LICENSE

 Subject to the terms and conditions of this GSAP License, Webflow grants you a non-exclusive, worldwide license to use, reproduce, display, and implement GSAP Products solely for Permitted Uses.

 III. RESTRICTIONS

 You may not:

 Use any GSAP Products for any Prohibited Uses without prior written consent;

 Reverse engineer any GSAP Products for the purpose of creating Competitive Products;

 Remove or alter any proprietary notices or branding from GSAP Products.

 IV. OWNERSHIP AND INTELLECTUAL PROPERTY

 All intellectual property rights in GSAP Products, including but not limited to copyright, patents, trademarks, and trade secrets, remain the exclusive property of Webflow. This GSAP License does not transfer any ownership rights in GSAP Products to you.

 V. TERMINATION

 Webflow may terminate this GSAP License and revoke your access in its discretion if you fail to comply with any of these terms and conditions. Upon termination, you must cease all use of GSAP Products and destroy all copies in your possession.

 VI. MISCELLANEOUS PROVISIONS

 General: This GSAP License is incorporated into and subject to Webflow’s Terms of Service available here (https://webflow.com/legal/terms) ("Terms of Service"). In the event of any conflict or inconsistency between this GSAP License and the Terms of Service, the terms of this GSAP License shall govern in relation to your use of any GSAP Products.

 Amendments: Webflow reserves the right to update or modify this GSAP License at any time by posting the revised terms on this website, provided that any such updates or modifications shall not result in any material degradation to the security, integrity, or functionality of any GSAP Products. You understand and agree that your continued use of any GSAP Products after such revisions to this GSAP License constitutes your acceptance of this GSAP License as revised. If you do not accept the revised GSAP License, you are prohibited from using versions of the GSAP Products released after the effective date of the revised GSAP License (as well as any updates made to previous versions). Notwithstanding, you may continue using previous versions of GSAP Products under the applicable terms licensed to you prior to the effective date of the revised GSAP License (for clarity, excluding any updates made thereto).

 No Waiver: Failure of Webflow to enforce any provision of this GSAP License shall not constitute a waiver of future enforcement of that or any other provision.

 FAQ

 Is it acceptable for AI tools like ChatGPT, Cursor, Lovable, Webstudio, etc. to generate GSAP code?
 Absolutely! AI-generated code is not a "Prohibited Use".

 What if a WordPress plugin or theme or other niche tool allows users to create GSAP-driven effects through a visual interface? Is that prohibited?
 We want to encourage developers to build on top of GSAP, including visual tools that don't directly compete with Webflow's rich animation-building capabilities. If you are not sure if your product might be considered a "Prohibited Use", feel free to contact us (https://gsap.com/contact) so we can talk through it!

 Can I really use GSAP in commercial projects without paying anything?
 Yes, really! Commercial usage is covered under the standard license. All of GSAP including the plugins that were formerly "members-only" like SplitText (https://gsap.com/docs/v3/Plugins/SplitText/) and MorphSVG (https://gsap.com/docs/v3/Plugins/MorphSVGPlugin) can be used in commercial projects at no charge. Enjoy! 💚

 Effective date: April 30, 2025

 Last modified date: May 30, 2025

 Copyright (©) 2025, Webflow