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