cursor-style/dist/cjs/index.js

Multiple prebuilt cursor styles to choose from

"use strict";var e=require("react/jsx-runtime"),t=require("react");let n=!1;const r=(e,t,r,o="white",s=1.5,a=300)=>{if("undefined"==typeof window)return;(()=>{if(n)return;const e=document.createElement("style");e.textContent="\n    @keyframes cursor-pulse {\n      0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }\n      100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }\n    }\n    @keyframes cursor-ripple {\n      0% { \n        transform: translate(-50%, -50%) scale(0.5); \n        opacity: 0.8;\n      }\n      50% { \n        transform: translate(-50%, -50%) scale(1.5); \n        opacity: 0.4;\n      }\n      100% { \n        transform: translate(-50%, -50%) scale(3); \n        opacity: 0; \n      }\n    }\n    @keyframes cursor-fade {\n      0% { \n        transform: translate(-50%, -50%) scale(1.2); \n        opacity: 0.8;\n      }\n      100% { \n        transform: translate(-50%, -50%) scale(1.2); \n        opacity: 0; \n      }\n    }\n    .cursor-click-effect {\n      position: fixed;\n      border-radius: 50%;\n      pointer-events: none;\n    }\n    .cursor-click-effect.pulse {\n      animation: cursor-pulse ease-out forwards;\n    }\n    .cursor-click-effect.ripple {\n      border: 2px solid;\n      background-color: transparent !important;\n      animation: cursor-ripple ease-out forwards;\n    }\n    .cursor-click-effect.fade {\n      animation: cursor-fade ease-out forwards;\n    }\n  ",document.head.appendChild(e),n=!0})();const i=document.createElement("div"),c=2*s;i.className=`cursor-click-effect ${r}`,"pulse"===r?i.style.cssText=`\n      left: ${e}px;\n      top: ${t}px;\n      width: ${c}px;\n      height: ${c}px;\n      background-color: ${o};\n      animation-duration: ${a}ms;\n      transform: translate(-50%, -50%);\n      z-index: 2147483647;\n    `:"ripple"===r?i.style.cssText=`\n      left: ${e}px;\n      top: ${t}px;\n      width: ${c}px;\n      height: ${c}px;\n      border-color: ${o};\n      animation-duration: ${a}ms;\n      transform: translate(-50%, -50%);\n      z-index: 2147483647;\n    `:"fade"===r&&(i.style.cssText=`\n      left: ${e}px;\n      top: ${t}px;\n      width: ${c}px;\n      height: ${c}px;\n      background-color: ${o};\n      animation-duration: ${a}ms;\n      transform: translate(-50%, -50%);\n      z-index: 2147483647;\n    `),document.body.appendChild(i),setTimeout((()=>{i.parentNode&&i.parentNode.removeChild(i)}),a)},o=(e,t,n,r)=>new MouseEvent(e,{bubbles:"mouseleave"!==e&&"mouseenter"!==e,cancelable:!0,clientX:t,clientY:n,relatedTarget:r}),s={position:"fixed",borderRadius:"50%",pointerEvents:"none",cursor:"none",transition:"transform 0.2s ease, opacity 0.3s ease",zIndex:2147483647};exports.CustomCursor=n=>{const{delay:a=("five"===n.type?9:0),useMixBlendDifference:i=!0,scaleOnHover:c=1.5,clickEffect:u,clickEffectColor:l="white",clickEffectSize:d=1.5,clickEffectDuration:m=300,magnetEffect:p=!1,magnetStrength:f=20,magnetRange:x=100,magnetClassName:y="cursor-magnet",magnetType:h="attract"}=n,g=Math.max(0,Math.min(a,1e3)),{position:v}=((e=0,n)=>{const[r,o]=t.useState(n),s=t.useRef(0),a=t.useRef(n);return t.useEffect((()=>{const t=t=>{a.current={x:t.clientX,y:t.clientY},0===e&&o(a.current)};return window.addEventListener("mousemove",t),()=>window.removeEventListener("mousemove",t)}),[e]),t.useEffect((()=>{if(0===e)return;const t=()=>{const n=1-.09*e,i=(1-n)*r.x+n*a.current.x,c=(1-n)*r.y+n*a.current.y;o({x:i,y:c}),s.current=requestAnimationFrame(t)};return s.current=requestAnimationFrame(t),()=>cancelAnimationFrame(s.current)}),[r,e]),{position:r}})(g,{x:0,y:0}),[b,$]=t.useState(!0),E=((e,n,r,s,a,i)=>{const[c,u]=t.useState({x:0,y:0}),[l,d]=t.useState({x:0,y:0}),m=t.useRef(),p=t.useRef(null);return t.useEffect((()=>{if(!n)return void d({x:0,y:0});const t=document.querySelectorAll(`.${a}`);let o=0,c=0,u=1/0,l={x:0,y:0};t.forEach((t=>{const n=t.getBoundingClientRect(),a=n.left+.5*n.width,d=n.top+.5*n.height,m=Math.max(n.left,Math.min(e.x,n.right)),p=Math.max(n.top,Math.min(e.y,n.bottom)),f=e.x-m,x=e.y-p,y=Math.sqrt(f*f+x*x);if(y<=s){const t=a-e.x,n=d-e.y,m=Math.sqrt(t*t+n*n);if(m>0){const e=("attract"===i?r:-r)*(1-y/s)**2,a=t/m*e,d=n/m*e;y<u&&(u=y,l={x:1.5*a,y:1.5*d}),o+=a,c+=d}}}));const m=u<.3*s?.7:.3,p=o*(1-m)+l.x*m,f=c*(1-m)+l.y*m,x=60*Math.tanh(p/60),y=60*Math.tanh(f/60);d({x:x,y:y})}),[e.x,e.y,n,r,s,a,i]),t.useEffect((()=>{if(!n)return;let t;const r=()=>{const n=Math.abs(c.x)>5||Math.abs(c.y)>5,s=n?e.x+c.x:e.x,a=n?e.y+c.y:e.y,i=n?document.elementFromPoint(s,a):null;p.current!==i&&(p.current&&(p.current.dispatchEvent(o("mouseout",s,a,i)),p.current.dispatchEvent(o("mouseleave",s,a,i))),i&&(i.dispatchEvent(o("mouseenter",s,a,p.current)),i.dispatchEvent(o("mouseover",s,a,p.current))),p.current=i),t=requestAnimationFrame(r)};return t=requestAnimationFrame(r),()=>{t&&cancelAnimationFrame(t),p.current&&(p.current.dispatchEvent(o("mouseout",e.x,e.y)),p.current.dispatchEvent(o("mouseleave",e.x,e.y)),p.current=null)}}),[n,c.x,c.y,e.x,e.y]),t.useEffect((()=>{if(!n)return;const t=t=>{const n=e.x+c.x,r=e.y+c.y,o=document.elementFromPoint(n,r);if(o&&(Math.abs(c.x)>5||Math.abs(c.y)>5)){t.preventDefault(),t.stopPropagation();const e=new MouseEvent("click",{bubbles:!0,cancelable:!0,clientX:n,clientY:r,screenX:t.screenX+c.x,screenY:t.screenY+c.y});o.dispatchEvent(e)}};return document.addEventListener("click",t,!0),()=>{document.removeEventListener("click",t,!0)}}),[n,c.x,c.y,e.x,e.y]),t.useEffect((()=>{const e=()=>{u((e=>{const t=l.x-e.x,n=l.y-e.y;return Math.sqrt(t*t+n*n)<.5?l:{x:e.x+.15*t,y:e.y+.15*n}})),m.current=requestAnimationFrame(e)};return m.current=requestAnimationFrame(e),()=>{m.current&&cancelAnimationFrame(m.current)}}),[l.x,l.y,e.x,e.y,n]),c})(v,p,f,x,y,h),w={x:v.x+E.x,y:v.y+E.y},k=function(e){const[n,r]=t.useState(!1);return t.useEffect((()=>{const t=t=>{const n=e?.x??t.clientX,o=e?.y??t.clientY,s=document.elementFromPoint(n,o);if(!s)return void r(!1);const a=s.matches("a, button, input, textarea, [role='button'], .hoverable");r(a)};return document.addEventListener("mousemove",t),()=>document.removeEventListener("mousemove",t)}),[e?.x,e?.y]),n}(p?w:void 0);t.useEffect((()=>{const e=()=>$(!0),t=()=>$(!1);return document.addEventListener("mouseenter",e),document.addEventListener("mouseleave",t),()=>{document.removeEventListener("mouseenter",e),document.removeEventListener("mouseleave",t)}}),[]);const C=i?"difference":"normal",M=k?c:1;if(((e,n,o,s,a)=>{t.useEffect((()=>{if(!e)return;const t=t=>{const i=a?.x??t.clientX,c=a?.y??t.clientY;r(i,c,e,n||"white",o||1.5,s||300)};return window.addEventListener("click",t),()=>window.removeEventListener("click",t)}),[e,n,o,s,a])})(u,l,d,m,p?w:void 0),"one"===n.type){const{size:t=35,bgColor:r="white"}=n;return e.jsx("div",{className:"cursor",style:{...s,width:`${t}px`,height:`${t}px`,left:`${w.x}px`,top:`${w.y}px`,backgroundColor:r,mixBlendMode:C,opacity:b?1:0,transform:`translate(-50%, -50%) scale(${M})`}})}if("three"===n.type){const{size:t=35,bgColor:r="white"}=n;return e.jsx("div",{className:"cursor",style:{...s,width:`${t}px`,height:`${t}px`,left:`${w.x}px`,top:`${w.y}px`,border:`2px solid ${r}`,backgroundColor:"transparent",mixBlendMode:C,transform:`translate(-50%, -50%) scale(${M})`}})}if("two"===n.type){const{size:r=10,sizeDot:o=r,sizeOutline:a=4.5*r,bgColorDot:i="white",bgColorOutline:c="white"}=n,[u,l]=t.useState({x:0,y:0});return t.useEffect((()=>{const e=e=>{l({x:e.clientX,y:e.clientY})};return window.addEventListener("mousemove",e),()=>window.removeEventListener("mousemove",e)}),[]),e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"cursor",style:{...s,width:`${o}px`,height:`${o}px`,left:`${u.x}px`,top:`${u.y}px`,backgroundColor:i,mixBlendMode:C,opacity:b?1:0,zIndex:9999,transform:`translate(-50%, -50%) scale(${M})`}}),e.jsx("div",{className:"cursor",style:{...s,width:`${a}px`,height:`${a}px`,left:`${w.x}px`,top:`${w.y}px`,border:`2px solid ${c}`,backgroundColor:"transparent",mixBlendMode:C,opacity:b?1:0,zIndex:9998,transform:`translate(-50%, -50%) scale(${M})`}})]})}if("four"===n.type){const{lineColor:r="white",lineThickness:o=2,lineLength:a=30,rotateAnimation:i=!1,tiltEffect:c=!1,tiltIntensity:u=15,hoverTransform:l=!1}=n,[d,m]=t.useState(0),p=t.useRef({x:w.x,y:w.y}),f=t.useRef(null);t.useEffect((()=>{if(c){const e=w.x-p.current.x,t=w.y-p.current.y;if(Math.abs(e)>.1||Math.abs(t)>.1){const n=Math.atan2(t,e)*(180/Math.PI);m(n),f.current&&clearTimeout(f.current),f.current=setTimeout((()=>{m(0)}),150)}p.current={x:w.x,y:w.y}}return()=>{f.current&&clearTimeout(f.current)}}),[w.x,w.y,c]);const x=i?{animation:"crosshair-rotate 2s linear infinite",animationFillMode:"forwards"}:{};t.useEffect((()=>{let e=null;return i&&(e=document.createElement("style"),e.textContent=`\n          @keyframes crosshair-rotate {\n            from { transform: translate(-50%, -50%) scale(${M}) rotate(0deg); }\n            to { transform: translate(-50%, -50%) scale(${M}) rotate(360deg); }\n          }\n        `,document.head.appendChild(e)),()=>{e&&document.head.removeChild(e)}}),[i,M]);const y=()=>i?"none":l&&k?`translate(-50%, -50%) scale(${M}) rotate(45deg)`:c?`translate(-50%, -50%) scale(${M}) rotate(${d*(u/100)}deg)`:`translate(-50%, -50%) scale(${M})`,h=()=>i?"transform 0.2s ease":c&&!i||l?"transform 0.3s ease-out":s.transition;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"cursor",style:{...s,width:`${o}px`,height:`${a}px`,left:`${w.x}px`,top:`${w.y}px`,backgroundColor:r,borderRadius:"0",mixBlendMode:C,opacity:b?1:0,transform:y(),transition:h(),...x}}),e.jsx("div",{className:"cursor",style:{...s,width:`${a}px`,height:`${o}px`,left:`${w.x}px`,top:`${w.y}px`,backgroundColor:r,borderRadius:"0",mixBlendMode:C,opacity:b?1:0,transform:y(),transition:h(),...x}})]})}if("six"===n.type){const{baseSize:r=20,bgColor:o="white",morphDuration:a=200,morphScale:i=.69}=n,c="button, a, input, textarea, select, [role='button'], [tabindex]:not([tabindex='-1']), .hoverable, [data-cursor-hover]",u="cubic-bezier(0.25, 0.46, 0.45, 0.94)",[l,d]=t.useState(null),[m,p]=t.useState({width:r,height:r,borderRadius:"50%",x:0,y:0});t.useEffect((()=>{const e=e=>{const t=e.target;if(t.classList.contains("cursor")||t===document.body||t===document.documentElement||"HTML"===t.tagName||"BODY"===t.tagName)return;if(!t.matches(c))return;const n=t.getBoundingClientRect(),r=window.getComputedStyle(t),o=n.left+n.width/2,s=n.top+n.height/2,a=n.width*i,u=n.height*i;d(t),p({width:a,height:u,borderRadius:r.borderRadius||"0px",x:o,y:s})},t=e=>{e.target===l&&(d(null),p({width:r,height:r,borderRadius:"50%",x:0,y:0}))};return document.addEventListener("mouseover",e),document.addEventListener("mouseout",t),()=>{document.removeEventListener("mouseover",e),document.removeEventListener("mouseout",t)}}),[c,r,l]);const f=l?{x:m.x,y:m.y}:w;return e.jsx("div",{className:"cursor",style:{...s,width:`${m.width}px`,height:`${m.height}px`,left:`${f.x}px`,top:`${f.y}px`,backgroundColor:"transparent",border:`2px solid ${o}`,borderRadius:m.borderRadius,mixBlendMode:C,opacity:b?1:0,transform:`translate(-50%, -50%) scale(${M})`,transition:`width ${a}ms ${u}, height ${a}ms ${u}, border-radius ${a}ms ${u}, left ${a}ms ${u}, top ${a}ms ${u}, transform 0.2s ease, opacity 0.3s ease`}})}if("five"===n.type){const{size:r=35,bgColor:o="white",showImages:a=!1,imageSize:i=300,imageFadeDuration:c=300}=n,[u,l]=t.useState(null),[d,m]=t.useState(!1),[p,f]=t.useState(new Set),x=t.useRef(null),y=t.useRef(null),h=t.useRef(null);return t.useEffect((()=>{if(!a)return;const e=document.createElement("style");return e.textContent="\n        @keyframes image-popup {\n          0% {\n            opacity: 0;\n            transform: translate(-50%, -50%) scale(0.5);\n          }\n          100% {\n            opacity: 1;\n            transform: translate(-50%, -50%) scale(1);\n          }\n        }\n        \n        @keyframes image-exit {\n          0% {\n            opacity: 1;\n            transform: translate(-50%, -50%) scale(1);\n          }\n          100% {\n            opacity: 0;\n            transform: translate(-50%, -50%) scale(0.5);\n          }\n        }\n        \n        @keyframes text-background-popup {\n          0% {\n            background-size: 0% 100%;\n            background-position: 0% 100%;\n          }\n          100% {\n            background-size: 100% 100%;\n            background-position: 0% 100%;\n          }\n        }\n      ",document.head.appendChild(e),()=>{document.head.removeChild(e)}}),[a]),t.useEffect((()=>{if(!a)return;const e=()=>{const e=document.querySelectorAll("[data-cursor-image]"),t=Array.from(e).map((e=>e.getAttribute("data-cursor-image"))).filter((e=>Boolean(e)));[...new Set(t)].forEach((e=>{if(!p.has(e)){const t=new Image;t.onload=()=>{f((t=>new Set(t).add(e)))},t.src=e}}))};e();const t=setInterval(e,2e3);return()=>clearInterval(t)}),[a,p]),t.useEffect((()=>{if(!a)return;const e=e=>{const t=e.target,n=t.getAttribute("data-cursor-image");if(n)if(y.current&&(clearTimeout(y.current),y.current=null),h.current&&(clearTimeout(h.current),h.current=null),p.has(n))h.current=setTimeout((()=>{l(n),m(!0),t.style.position="relative",t.style.zIndex="9999",t.style.background="linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%)",t.style.backgroundRepeat="no-repeat",t.style.borderRadius="4px",t.style.color="white",t.style.animation=`text-background-popup ${c}ms ease forwards`,t.style.backgroundSize="100% 100%",t.style.backgroundPosition="0% 100%",h.current=null}),50);else{const e=new Image;e.onload=()=>{f((e=>new Set(e).add(n))),l(n),m(!0),t.style.position="relative",t.style.zIndex="9999",t.style.background="linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%)",t.style.backgroundRepeat="no-repeat",t.style.borderRadius="4px",t.style.color="white",t.style.animation=`text-background-popup ${c}ms ease forwards`,t.style.backgroundSize="100% 100%",t.style.backgroundPosition="0% 100%"},e.src=n}},t=e=>{const t=e.target;h.current&&(clearTimeout(h.current),h.current=null),h.current=setTimeout((()=>{m(!1),t.style.zIndex="",t.style.background="",t.style.borderRadius="",t.style.color="",t.style.animation="",t.style.backgroundSize="",t.style.backgroundPosition="",y.current&&clearTimeout(y.current),y.current=setTimeout((()=>{l(null),y.current=null}),c),h.current=null}),50)},n=document.querySelectorAll("[data-cursor-image]");return n.forEach((n=>{n.addEventListener("mouseenter",e),n.addEventListener("mouseleave",t),n.addEventListener("mouseover",e),n.addEventListener("mouseout",t)})),()=>{n.forEach((n=>{n.removeEventListener("mouseenter",e),n.removeEventListener("mouseleave",t),n.removeEventListener("mouseover",e),n.removeEventListener("mouseout",t)})),y.current&&(clearTimeout(y.current),y.current=null)}}),[a,p]),e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"cursor",style:{...s,width:`${r}px`,height:`${r}px`,left:`${w.x}px`,top:`${w.y}px`,border:`2px solid ${o}`,backgroundColor:"transparent",mixBlendMode:C,opacity:b?1:0,transform:`translate(-50%, -50%) scale(${M})`}}),a&&u&&e.jsx("img",{ref:x,src:u,alt:"",style:{position:"fixed",left:`${w.x}px`,top:`${w.y}px`,width:`${i}px`,height:"auto",maxHeight:`${i}px`,objectFit:"cover",borderRadius:"8px",pointerEvents:"none",zIndex:1e3,opacity:b?1:0,transform:"translate(-50%, -50%)",transition:"opacity 0.3s ease",animation:d?`image-popup ${c}ms ease forwards`:`image-exit ${c}ms ease forwards`}},u)]})}return null};
//# sourceMappingURL=index.js.map