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