Magnetic Grid
Home
Snippets
Magnetic Grid
HTML
CSS
JS
<div class="grid"></div>
body{ margin:0; height:100vh; background:#0f172a; overflow:hidden; } .grid{ display:grid; grid-template-columns:repeat(20,1fr); gap:15px; width:90vw; margin:auto; margin-top:5vh; } .dot{ width:10px; height:10px; background:#38bdf8; border-radius:50%; transition:0.2s; } .dot{ box-shadow:0 0 8px #38bdf8; }
const grid = document.querySelector(".grid"); for(let i=0;i<400;i++){ const dot = document.createElement("div"); dot.classList.add("dot"); grid.appendChild(dot); } document.addEventListener("mousemove",(e)=>{ const dots = document.querySelectorAll(".dot"); dots.forEach(dot=>{ const rect = dot.getBoundingClientRect(); const dx = e.clientX - rect.left; const dy = e.clientY - rect.top; const distance = Math.sqrt(dx*dx + dy*dy); if(distance < 80){ dot.style.transform = "scale(2)"; dot.style.background = "#f472b6"; } else{ dot.style.transform = "scale(1)"; dot.style.background = "#38bdf8"; } }); });
Ad #1
Ad #2
Scroll to Top