Create script.js

script.js

@@ -0,0 +1,57 @@
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const modeSelect = document.getElementById("mode");
+const intensitySlider = document.getElementById("intensity");
+
+function resize() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+}
+window.addEventListener("resize", resize);
+resize();
+
+let t = 0;
+
+const modes = {
+  delta: { freq: 1.2, amp: 140, hue: 220 },
+  theta: { freq: 3.5, amp: 110, hue: 190 },
+  alpha: { freq: 8, amp: 90, hue: 160 },
+  beta: { freq: 18, amp: 70, hue: 40 },
+  gamma: { freq: 32, amp: 100, hue: 300 }
+};
+
+function draw() {
+  ctx.fillStyle = "rgba(0, 0, 0, 0.12)";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  const { freq, amp, hue } = modes[modeSelect.value];
+  const intensity = intensitySlider.value;
+  const centerY = canvas.height / 2;
+
+  for (let layer = 0; layer < 7; layer++) {
+    ctx.beginPath();
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = `hsla(
+      ${hue + layer * 15 + t * 10},
+      100%,
+      60%,
+      0.85
+    )`;
+
+    for (let x = 0; x <= canvas.width; x++) {
+      const y =
+        centerY +
+        Math.sin(x * 0.008 * freq + t + layer) *
+        amp *
+        intensity *
+        Math.sin(t * 0.5 + layer);
+      ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+  }
+
+  t += 0.025;
+  requestAnimationFrame(draw);
+}
+
+draw();