custom-cursor/dist/esm.min.js

Create your own custom cursor with minimal JavaScript. Easy to implement, customizable, and lightweight solution for interactive web experiences 👆

function r(n={}){let s=document.body,a=n.count||1,l="position: fixed; pointer-events: none; top: 0; left: 0;",c=n.targets||!1;function i(){let t=Array.from({length:a},(e,o)=>o);for(let[e]of t.entries()){let o=document.createElement("div");f(o,e)}}function f(t,e){t.setAttribute("data-cursor",`${e}`),t.setAttribute("style",l),s.append(t)}function d(){let t=document.querySelectorAll("[data-cursor]");document.addEventListener("mousemove",e=>{let{clientX:o,clientY:p}=e;for(let g of t)m(g,o,p)})}function m(t,e,o){t.style.transform=`translate3d(calc(${e}px - 50%), calc(${o}px - 50%), 0)`}function v(){if(Array.isArray(c))for(let t of c){let e=document.querySelectorAll(t);for(let o of e)o.addEventListener("mouseover",()=>{u(t)}),o.addEventListener("mouseleave",()=>{u(t)})}}function u(t){let e=t.replace(/[.#!]/g,"");s.classList.toggle(`cursor-hover--${e}`)}i(),d(),v()}var A=r;export{A as default};