add js to background

1 files changed, 53 insertions, 0 deletions

diff --git a/js/gradient.js b/js/gradient.js
new file mode 100644
index 0000000..1fe1e63
--- /dev/null
+++ b/js/gradient.js
@@ -0,0 +1,53 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Get the body element to update the cursor position
+    const body = document.documentElement;
+    let mouseX = 0;
+    let mouseY = 0;
+    let smoothX = 0;
+    let smoothY = 0;
+    
+    // Smoothing factor (lower = smoother, higher = snappier)
+    const smoothing = 0.1;
+    
+    // Handle mouse movement
+    const handleMouseMove = (e) => {
+        mouseX = e.clientX;
+        mouseY = e.clientY;
+    };
+    
+    // Smooth the cursor movement
+    const updateCursorLight = () => {
+        // Apply smoothing
+        smoothX += (mouseX - smoothX) * smoothing;
+        smoothY += (mouseY - smoothY) * smoothing;
+        
+        // Update CSS variables for the cursor position
+        body.style.setProperty('--cursor-x', `${smoothX}px`);
+        body.style.setProperty('--cursor-y', `${smoothY}px`);
+        
+        // Continue the animation loop
+        requestAnimationFrame(updateCursorLight);
+    };
+    
+    // Add event listeners
+    window.addEventListener('mousemove', handleMouseMove);
+    
+    // Handle touch events for mobile
+    window.addEventListener('touchmove', (e) => {
+        e.preventDefault();
+        const touch = e.touches[0];
+        handleMouseMove({
+            clientX: touch.clientX,
+            clientY: touch.clientY
+        });
+    }, { passive: false });
+    
+    // Initialize cursor position to center of screen
+    mouseX = window.innerWidth / 2;
+    mouseY = window.innerHeight / 2;
+    smoothX = mouseX;
+    smoothY = mouseY;
+    
+    // Start the animation loop
+    updateCursorLight();
+});