custom-cursor/dist/cdn.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,i="position: fixed; pointer-events: none; top: 0; left: 0;",c=n.targets||!1;function l(){let t=Array.from({length:a},(e,o)=>o);for(let[e]of t.entries()){let o=document.createElement("div");d(o,e)}}function d(t,e){t.setAttribute("data-cursor",`${e}`),t.setAttribute("style",i),s.append(t)}function f(){let t=document.querySelectorAll("[data-cursor]");document.addEventListener("mousemove",e=>{let{clientX:o,clientY:g}=e;for(let p of t)m(p,o,g)})}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}`)}l(),f(),v()}window.Cursor=r;})();