Cursor Ripple Field
Home
Snippets
Cursor Ripple Field
HTML
CSS
JS
<canvas id="ripple"></canvas>
* { margin: 0; padding: 0; } body { height: 100vh; background: radial-gradient(circle at center, #0b1c2d, #000); overflow: hidden; } canvas { display: block; }
const canvas = document.getElementById("ripple"); const ctx = canvas.getContext("2d"); let w, h; function resize() { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; } window.addEventListener("resize", resize); resize(); const ripples = []; document.addEventListener("mousemove", e => { ripples.push({ x: e.clientX, y: e.clientY, r: 0, alpha: 0.6 }); }); function animate() { ctx.fillStyle = "rgba(0,0,0,0.15)"; ctx.fillRect(0, 0, w, h); ripples.forEach((r, i) => { r.r += 1.5; r.alpha -= 0.005; ctx.beginPath(); ctx.arc(r.x, r.y, r.r, 0, Math.PI * 2); ctx.strokeStyle = `rgba(120,200,255,${r.alpha})`; ctx.lineWidth = 2; ctx.stroke(); if (r.alpha <= 0) ripples.splice(i, 1); }); requestAnimationFrame(animate); } animate();
Ad #1
Ad #2
Scroll to Top