react-creative-cursor/dist/react-creative-cursor.cjs.production.min.js

A creative and customizable React cursor component.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("gsap"),o={};function i(e){void 0===e&&(e={});var n=t.useRef(o);return n.current===o&&(n.current="function"==typeof e?e():e),n.current}exports.Cursor=function(e){var o=e.isGelly,u=void 0!==o&&o,a=e.animationDuration,c=void 0===a?1.25:a,s=e.animationEase,d=void 0===s?r.Expo.easeOut:s,f=e.gellyAnimationAmount,l=void 0===f?50:f,m=e.stickAnimationAmount,v=void 0===m?.09:m,g=e.stickAnimationDuration,E=void 0===g?.7:g,y=e.stickAnimationEase,p=void 0===y?r.Power4.easeOut:y,L=e.magneticAnimationAmount,h=void 0===L?.2:L,x=e.magneticAnimationDuration,k=void 0===x?.7:x,A=e.magneticAnimationEase,M=void 0===A?r.Power4.easeOut:A,b=e.colorAnimationEase,q=void 0===b?r.Power4.easeOut:b,w=e.colorAnimationDuration,S=void 0===w?.2:w,T=e.backgroundImageAnimationEase,H=void 0===T?void 0:T,C=e.backgroundImageAnimationDuration,B=void 0===C?0:C,O=e.sizeAnimationEase,D=void 0===O?r.Expo.easeOut:O,z=e.sizeAnimationDuration,I=void 0===z?.5:z,P=e.textAnimationEase,X=void 0===P?r.Expo.easeOut:P,Y=e.textAnimationDuration,R=void 0===Y?1:Y,_=e.cursorSize,W=void 0===_?48:_,j=e.cursorBackgrounColor,N=void 0===j?"#000":j,U=e.exclusionBackgroundColor,G=void 0===U?"#fff":U,F=e.cursorInnerColor,J=void 0===F?"#fff":F,K=t.useRef(null),Q=t.useRef(null),V=i((function(){return{x:0,y:0}})),Z=i((function(){return{x:0,y:0}})),$=i();t.useLayoutEffect((function(){$.x=r.gsap.quickSetter(K.current,"x","px"),$.y=r.gsap.quickSetter(K.current,"y","px"),u&&($.r=r.gsap.quickSetter(K.current,"rotate","deg"),$.sx=r.gsap.quickSetter(K.current,"scaleX"),$.sy=r.gsap.quickSetter(K.current,"scaleY"),$.width=r.gsap.quickSetter(K.current,"width","px"),$.rt=r.gsap.quickSetter(Q.current,"rotate","deg"))}));var ee,te=t.useCallback((function(){var e,t=function(e,t){if(e&&t)return 180*Math.atan2(t,e)/Math.PI}(Z.x,Z.y),n=function(e,t){if(e&&t){var n=Math.sqrt(Math.pow(e,2)+Math.pow(t,2));return Math.min(n/735,.35)}}(Z.x,Z.y);$.x(V.x),$.y(V.y),u&&n&&t&&K.current&&($.width((null==(e=K.current)?void 0:e.style.height)+n*l),$.r(t),$.sx(1+n),$.sy(1-n),$.rt(-t))}),[l,u,V.x,V.y,$,Z.x,Z.y]);return t.useLayoutEffect((function(){var e=document.querySelectorAll("[data-cursor-size]"),t=document.querySelectorAll("[data-cursor-text]"),n=document.querySelectorAll("[data-cursor-color]"),o=document.querySelectorAll("[data-cursor-background-image]"),i=document.querySelectorAll("[data-cursor-magnetic]"),u=document.querySelectorAll("[data-cursor-stick]"),a=document.querySelectorAll("[data-cursor-exclusion]"),s=!1,f=!1,l=function(e){var t,n,o,i=e.target,u=e.clientX,a=e.clientY,f=c,l=d;s&&(n=null==(o=t=i.querySelector(i.dataset.cursorStick))?void 0:o.getBoundingClientRect(),t&&n&&(a=n.top+t.clientHeight/2-(n.top+t.clientHeight/2-e.clientY)*v,u=n.left+t.clientWidth/2-(n.left+t.clientWidth/2-e.clientX)*v,f=E,l=p)),r.gsap.set(V,{});var m=r.gsap.quickTo(V,"x",{duration:f,ease:l,onUpdate:function(){V.x&&(Z.x=u-V.x)}}),g=r.gsap.quickTo(V,"y",{duration:f,ease:l,onUpdate:function(){V.y&&(Z.y=a-V.y)}});m(u),g(a),te()};return window.addEventListener("mousemove",(function(e){l(e)})),document.body.addEventListener("mouseenter",(function(e){e.target instanceof HTMLElement&&K.current&&r.gsap.to("#"+K.current.id,{opacity:1,duration:c,ease:d})})),document.body.addEventListener("mouseleave",(function(e){e.target instanceof HTMLElement&&K.current&&r.gsap.to("#"+K.current.id,{opacity:0,duration:c,ease:d})})),e.forEach((function(e){e.addEventListener("mouseenter",(function(e){e.target instanceof HTMLElement&&K.current&&r.gsap.to("#"+K.current.id,{width:""+e.target.dataset.cursorSize,height:""+e.target.dataset.cursorSize,duration:I,ease:D})}))})),e.forEach((function(e){e.addEventListener("mouseleave",(function(e){e.target instanceof HTMLElement&&K.current&&r.gsap.to("#"+K.current.id,{width:""+W,height:""+W,duration:I,ease:D})}))})),t.forEach((function(e){e.addEventListener("mouseenter",(function(e){e.target instanceof HTMLElement&&Q.current&&(Q.current.textContent=""+e.target.dataset.cursorText,r.gsap.to("#"+Q.current.id,{scale:1,opacity:1,duration:R,ease:X}))}))})),t.forEach((function(e){e.addEventListener("mouseleave",(function(e){e.target instanceof HTMLElement&&Q.current&&(Q.current.textContent="",r.gsap.to("#"+Q.current.id,{scale:0,opacity:0,duration:R,ease:X}))}))})),n.forEach((function(e){e.addEventListener("mouseenter",(function(e){e.target instanceof HTMLElement&&K.current&&r.gsap.to("#"+K.current.id,{backgroundColor:""+e.target.dataset.cursorColor,duration:S,ease:q})}))})),n.forEach((function(e){e.addEventListener("mouseleave",(function(e){e.target instanceof HTMLElement&&K.current&&r.gsap.to("#"+K.current.id,{backgroundColor:""+N,duration:S,ease:q})}))})),a.forEach((function(e){e.addEventListener("mouseenter",(function(e){e.target instanceof HTMLElement&&K.current&&(K.current.style.mixBlendMode="exclusion",K.current.style.background=""+G)}))})),a.forEach((function(e){e.addEventListener("mouseleave",(function(e){e.target instanceof HTMLElement&&K.current&&(K.current.style.mixBlendMode="",K.current.style.background=""+N)}))})),o.forEach((function(e){e.addEventListener("mouseenter",(function(e){e.target instanceof HTMLElement&&Q.current&&(K.current&&("exclusion"===K.current.style.mixBlendMode&&(f=!0),K.current.style.mixBlendMode="exclusion",K.current.style.backgroundColor="transform"),r.gsap.to("#"+Q.current.id,{scale:1,opacity:1,background:'url("'+e.target.dataset.cursorBackgroundImage+'")',filter:"invert(1)",duration:B,ease:H}))}))})),o.forEach((function(e){e.addEventListener("mouseleave",(function(e){e.target instanceof HTMLElement&&Q.current&&(K.current&&(f?K.current.style.backgroundColor=""+G:(K.current.style.mixBlendMode="",K.current.style.backgroundColor=""+N)),r.gsap.to("#"+Q.current.id,{scale:0,opacity:0,background:"",filter:"none",duration:B}))}))})),i.forEach((function(e){e.addEventListener("mousemove",(function(e){var t=e.target;r.gsap.to(t,{x:(e.clientX-(t.offsetLeft-window.pageXOffset)-t.clientWidth/2)*h,y:(e.clientY-(t.offsetTop-window.pageYOffset)-t.clientHeight/2)*h,duration:k,ease:M})}))})),i.forEach((function(e){e.addEventListener("mouseleave",(function(e){r.gsap.to(e.target,{x:0,y:0,duration:k,ease:M})}))})),u.forEach((function(e){e.addEventListener("mouseenter",(function(){return s=!0}))})),u.forEach((function(e){e.addEventListener("mouseleave",(function(){return s=!1}))})),function(){window.removeEventListener("mousemove",l),document.body.removeEventListener("mouseenter",(function(){})),document.body.removeEventListener("mouseleave",(function(){})),e.forEach((function(e){e.removeEventListener("mouseenter",(function(){})),e.removeEventListener("mouseleave",(function(){}))})),t.forEach((function(e){e.removeEventListener("mouseenter",(function(){})),e.removeEventListener("mouseleave",(function(){}))})),n.forEach((function(e){e.removeEventListener("mouseenter",(function(){})),e.removeEventListener("mouseleave",(function(){}))})),a.forEach((function(e){e.removeEventListener("mouseenter",(function(){})),e.removeEventListener("mouseleave",(function(){}))})),o.forEach((function(e){e.removeEventListener("mouseenter",(function(){})),e.removeEventListener("mouseleave",(function(){}))})),i.forEach((function(e){e.removeEventListener("mousemove",(function(){})),e.removeEventListener("mouseleave",(function(){}))})),u.forEach((function(e){e.removeEventListener("mouseenter",(function(){})),e.removeEventListener("mouseleave",(function(){}))}))}})),t.useLayoutEffect((function(){return ee&&r.gsap.ticker.add(ee),function(){r.gsap.ticker.remove(ee)}}),[ee=te,void 0]),n.createElement("div",{ref:K,id:"c-cursor",className:"c-cursor",style:{width:W,height:W,background:N}},n.createElement("div",{style:{color:J},ref:Q,id:"c-cursorInner",className:"c-cursor__inner"}))};
//# sourceMappingURL=react-creative-cursor.cjs.production.min.js.map