curzr/dist/index.js

Highly customizable animated cursor with dot or liquid trails for React.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");const r=e.createContext(),t=()=>{const{theme:t,isHovered:o}=e.useContext(r),[n,s]=e.useState({x:window.innerWidth/2,y:window.innerHeight/2}),[a,i]=e.useState([]),d=e.useRef(!1),u=e.useRef({x:window.innerWidth/2,y:window.innerHeight/2}),l=t.trailLength||16,c=t.trailSmoothing||.5,x=t.trailSize||16,m=t.trailColor||"rgba(255,255,255,0.5)";if(t.trailFade,e.useEffect((()=>{i(Array.from({length:l},(()=>({x:u.current.x,y:u.current.y}))))}),[l]),e.useEffect((()=>{const e=e=>{const r=e.clientX,t=e.clientY;u.current={x:r,y:t},s({x:r,y:t}),d.current||(i(Array.from({length:l},(()=>({x:r,y:t})))),d.current=!0)};let r;document.addEventListener("mousemove",e);const t=()=>{i((e=>{if(!e.length)return e;const r=[...e];r[0]={x:r[0].x+(u.current.x-r[0].x)*c,y:r[0].y+(u.current.y-r[0].y)*c};for(let e=1;e<l;e++)r[e]={x:r[e].x+(r[e-1].x-r[e].x)*c,y:r[e].y+(r[e-1].y-r[e].y)*c};return r})),r=requestAnimationFrame(t)};return t(),()=>{document.removeEventListener("mousemove",e),cancelAnimationFrame(r)}}),[l,c]),t.enableTrail&&"dots"===t.trailType)return e.createElement(e.Fragment,null,a.map(((r,o)=>{const n=2+(x-2)*(1-o/l),s=n/2;return e.createElement("div",{key:o,className:"cursor-trail-dot",style:{position:"fixed",left:0,top:0,width:`${n}px`,height:`${n}px`,borderRadius:"50%",backgroundColor:m,pointerEvents:"none",zIndex:9998,opacity:Math.pow(1-o/l,2),transform:`translate3d(${r.x-s}px, ${r.y-s}px, 0)`,transition:"opacity 0.2s, transform 0.05s ease-out",mixBlendMode:t.styles?.mixBlendMode||"normal",border:t.styles?.border||"none",boxShadow:t.styles?.boxShadow||"none"}})})));const y=o?t.baseSize*t.hoverScale:t.baseSize;return e.createElement("div",{className:"cursor",style:{...(()=>{switch(t.type){case"dot":default:return{borderRadius:"50%"};case"ring":return{borderRadius:"50%",backgroundColor:"transparent",border:t.styles?.border||"2px solid"};case"square":return{borderRadius:"4px"};case"blob":return{borderRadius:"40% 60% 60% 40% / 50% 40% 60% 50%",transition:"all 0.3s ease-out"};case"custom":return{backgroundImage:`url(${t.customShape})`,backgroundSize:"cover"}}})(),...t.styles,width:`${y}px`,height:`${y}px`,backgroundColor:t.color,position:"fixed",top:0,left:0,pointerEvents:"none",mixBlendMode:t.styles?.mixBlendMode||"normal",transform:`translate3d(${n.x}px, ${n.y}px, 0) translate(-50%, -50%)`,zIndex:t.zIndex||9999,transition:t.transition||"width 0.25s ease, height 0.25s ease, background-color 0.25s ease, transform 0.3s ease-out"}})};exports.Cursor=t,exports.CursorProvider=({theme:t,children:o})=>{const[n,s]=e.useState(!1);return e.createElement(r.Provider,{value:{theme:t,isHovered:n,setIsHovered:s}},o)},exports.default=t,exports.useCursorHover=()=>{const{setIsHovered:t}=e.useContext(r);return{onMouseEnter:()=>t(!0),onMouseLeave:()=>t(!1)}};
//# sourceMappingURL=index.js.map