@izhann/react-cursor-fx
Version:
Interactive cursor effects for React and Next.js applications — zero runtime dependencies
4 lines (3 loc) • 31.5 kB
JavaScript
"use client";
import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{createContext as n,useState as o,useCallback as i,useEffect as a,useMemo as s,useContext as l,useRef as c}from"react";let u=0,d=0,h=!1;const f=new Set;const p={get x(){return u},get y(){return d},subscribe:e=>(h||"undefined"==typeof window||(h=!0,window.addEventListener("mousemove",(e=>{u=e.clientX,d=e.clientY,f.size>0&&f.forEach((e=>e(u,d)))}),{passive:!0})),f.add(e),()=>{f.delete(e)})},g={default:{width:24,height:24,scale:1,shape:"circle",color:"rgba(255, 255, 255, 0.8)",opacity:1,borderColor:"rgba(0, 0, 0, 0)",borderWidth:0,borderStyle:"solid",label:"",fontSize:"12px",fontWeight:"bold",labelColor:"#000",transition:{stiffness:800,damping:80,mass:1}}},b=n({cursorState:Object.assign(Object.assign({},g.default),{variant:"default"}),setCursorVariant:()=>{},config:g,mousePosition:{x:0,y:0},resetCursorToDefault:()=>{},setGlobalCursorVariant:()=>{},clearGlobalCursorVariant:()=>{}}),m=()=>l(b),v=({children:t,config:r=g,hideNativeCursor:n=!0})=>{const[l,c]=o(["default"]),[u,d]=o(null),h=i(((e,t="push")=>{c("reset"===t?["default"]:"push"===t?t=>[...t,e]:e=>{const t=e.slice(0,-1);return t.length?t:["default"]})}),[]),f=i((()=>{c(["default"])}),[]),m=i((e=>{d(e)}),[]),v=i((()=>{d(null)}),[]);a((()=>{if(!n)return;const e=document.createElement("style");return e.textContent='body,a,button,[role="button"],*{cursor:none!important}',document.head.appendChild(e),()=>{document.head.removeChild(e)}}),[n]);const x=s((()=>{var e;const t=null!=u?u:l[l.length-1],n=null!==(e=r[t])&&void 0!==e?e:r.default;return{cursorState:Object.assign(Object.assign({},n),{variant:t}),setCursorVariant:h,resetCursorToDefault:f,config:r,mousePosition:{x:p.x,y:p.y},setGlobalCursorVariant:m,clearGlobalCursorVariant:v}}),[l,u,r,h,f,m,v]);return e(b.Provider,{value:x,children:t})};function x(e,t,r,n,o,i,a){const s=(-n*(e-r)-o*t)/i;return[e+t*a+.5*s*a*a,t+s*a]}const w=({zIndex:r=9999,showOnTouch:n=!1,trailLength:i=10,elongate:s=!1})=>{const{cursorState:l}=m(),[u,d]=o(!1),[h,f]=o(!1),[g,b]=o(!1),v=c(null),w=c([]),y=c({x:0,y:0,vx:0,vy:0}),M=c({x:0,y:0}),C=c(null),E=c(null),S=c({stiffness:800,damping:80,mass:1}),k=c(!1),A=c(s),W=c(0),q=c({shape:l.shape,label:l.label}),z=c([]);if(a((()=>{var e,t,r,n,o,i;S.current={stiffness:null!==(t=null===(e=l.transition)||void 0===e?void 0:e.stiffness)&&void 0!==t?t:800,damping:null!==(n=null===(r=l.transition)||void 0===r?void 0:r.damping)&&void 0!==n?n:80,mass:null!==(i=null===(o=l.transition)||void 0===o?void 0:o.mass)&&void 0!==i?i:1}}),[l.transition]),a((()=>{A.current=s}),[s]),a((()=>{q.current={shape:l.shape,label:l.label}}),[l.shape,l.label]),a((()=>p.subscribe(((e,t)=>{M.current={x:e,y:t},w.current=[{x:e,y:t},...w.current.slice(0,i-1)]}))),[i]),a((()=>{const e=t=>{if(null!==E.current)if(k.current){const{x:e,y:t}=M.current;y.current={x:e,y:t,vx:0,vy:0},v.current&&(v.current.style.transform=`translate(${e}px, ${t}px)`)}else{const e=Math.min((t-E.current)/1e3,.064),{stiffness:r,damping:n,mass:o}=S.current,{x:i,y:a,vx:s,vy:l}=y.current,{x:c,y:u}=M.current,d=.008,h=Math.max(1,Math.ceil(e/d)),f=e/h;let p=i,g=s,b=a,m=l;for(let e=0;e<h;e++)[p,g]=x(p,g,c,r,n,o,f),[b,m]=x(b,m,u,r,n,o,f);if(y.current={x:p,y:b,vx:g,vy:m},v.current){if(A.current&&"square"!==q.current.shape&&!q.current.label){const e=Math.sqrt(g*g+m*m),t=Math.min(1+e/800,1.35),r=1/Math.sqrt(t);e>30&&(W.current=Math.atan2(m,g)*(180/Math.PI)),v.current.style.transform=`translate(${p}px, ${b}px) rotate(${W.current}deg) scaleX(${t}) scaleY(${r})`}else v.current.style.transform=`translate(${p}px, ${b}px)`}const C=z.current;if(C.length>0){const e=M.current;for(let t=0;t<C.length;t++){const r=C[t];if(!r)continue;const n=w.current[Math.min(t+1,w.current.length-1)]||e,o=.5*-(e.x-n.x),i=.5*-(e.y-n.y);r.style.transform=`translate(calc(-50% + ${o}px), calc(-50% + ${i}px))`}}}E.current=t,C.current=requestAnimationFrame(e)};return C.current=requestAnimationFrame(e),()=>{null!==C.current&&cancelAnimationFrame(C.current)}}),[]),a((()=>{const e=window.matchMedia("(pointer: coarse)");f(e.matches);const t=window.matchMedia("(prefers-reduced-motion: reduce)");k.current=t.matches,b(t.matches);const r=e=>{k.current=e.matches,b(e.matches)};t.addEventListener("change",r);const n=setTimeout((()=>d(!0)),50);return()=>{t.removeEventListener("change",r),clearTimeout(n)}}),[]),h&&!n)return null;const{width:L=24,height:I=24,scale:$=1,shape:P="circle",color:T="rgba(255, 255, 255, 0.8)",opacity:F=1,borderColor:O="rgba(0, 0, 0, 0)",borderWidth:R=0,borderStyle:V="solid",mixBlendMode:j="normal",label:B,fontSize:X="12px",fontWeight:Y="bold",labelColor:G="#000",customElement:D,innerElements:H,borderRadius:J}=l,N="circle"===P?"50%":"square"===P?`${null!=J?J:0}px`:"0",U="custom"===P?"transparent":T,K=g?"none":"width 0.2s ease, height 0.2s ease, border-radius 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease";return z.current=H?z.current.slice(0,H.length):[],e("div",{ref:v,"aria-hidden":"true",style:{position:"fixed",left:0,top:0,zIndex:r,pointerEvents:"none",opacity:u?1:0,willChange:"transform",mixBlendMode:j,transformOrigin:"0 0"},children:t("div",{style:{width:L,height:I,borderRadius:N,backgroundColor:U,opacity:F,borderColor:O,borderWidth:R,borderStyle:V,display:"flex",justifyContent:"center",alignItems:"center",transform:`translate(-50%, -50%) scale(${$})`,transition:K,willChange:"width, height, background-color, transform"},children:["custom"===P&&D,B&&e("div",{style:{fontSize:X,fontWeight:Y,color:G,textAlign:"center",userSelect:"none",whiteSpace:"nowrap",pointerEvents:"none"},children:B}),null==H?void 0:H.map(((t,r)=>e("div",{ref:e=>{z.current[r]=e},style:{position:"absolute",left:"50%",top:"50%",transform:"translate(-50%, -50%)",transition:g?"none":"transform 0.12s ease"},children:t.element},`inner-${r}`)))]})})};"function"==typeof SuppressedError&&SuppressedError;const y=({variant:e,onEnter:t,onLeave:r})=>{const{setCursorVariant:n}=m(),o=c(!1);return{onMouseEnter(){o.current||(o.current=!0,n(e,"push")),null==t||t()},onMouseLeave(){o.current&&(o.current=!1,n("","pop")),null==r||r()},onFocus(){o.current||(o.current=!0,n(e,"push")),null==t||t()},onBlur(){o.current&&(o.current=!1,n("","pop")),null==r||r()},"data-cursor-target":!0}};function M(t){var{as:r,children:n,variant:o,onEnter:i,onLeave:a}=t,s=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(t,["as","children","variant","onEnter","onLeave"]);const l=null!=r?r:"div",c=y({variant:o,onEnter:i,onLeave:a});return e(l,Object.assign({},s,c,{"data-cursor-variant":o,children:n}))}const C=()=>{const[e,t]=o({x:0,y:0}),r=c(null);return a((()=>p.subscribe((()=>{null===r.current&&(r.current=requestAnimationFrame((()=>{t({x:p.x,y:p.y}),r.current=null})))}))),[]),"undefined"!=typeof window?e:{x:0,y:0}},E=()=>{const{setCursorVariant:e,resetCursorToDefault:t,setGlobalCursorVariant:r,clearGlobalCursorVariant:n}=m();return{setVariant:i((t=>{e(t,"push")}),[e]),resetVariant:i((()=>{t()}),[t]),setGlobalVariant:i((e=>{null==r||r(e)}),[r]),clearGlobalVariant:i((()=>{null==n||n()}),[n])}},S=({timeout:e=2e3,variant:t="spot",onIdle:r,onWake:n}={})=>{const{setCursorVariant:o}=m(),i=c(null),s=c(!1),l=c(r),u=c(n);a((()=>{l.current=r}),[r]),a((()=>{u.current=n}),[n]),a((()=>{const r=()=>{var r;i.current&&clearTimeout(i.current),s.current&&(s.current=!1,o("","pop"),null===(r=u.current)||void 0===r||r.call(u)),i.current=setTimeout((()=>{var e;s.current=!0,o(t,"push"),null===(e=l.current)||void 0===e||e.call(l)}),e)},n=p.subscribe(r);return r(),()=>{n(),i.current&&clearTimeout(i.current),s.current&&(s.current=!1,o("","pop"))}}),[e,t,o])};function k({variant:e,threshold:t=.5}){const r=c(null),{setCursorVariant:n}=m(),o=c(!1);return a((()=>{const i=r.current;if(!i)return;const a=new IntersectionObserver((([t])=>{t.isIntersecting&&!o.current?(o.current=!0,n(e,"push")):!t.isIntersecting&&o.current&&(o.current=!1,n("","pop"))}),{threshold:t});return a.observe(i),()=>{a.disconnect(),o.current&&(o.current=!1,n("","pop"))}}),[e,t,n]),r}function A({idleThreshold:e=50}={}){const[t,r]=o({speed:0,angle:0,vx:0,vy:0,isMoving:!1}),n=c({vx:0,vy:0,lastX:0,lastY:0,lastTime:0}),i=c({vx:0,vy:0}),s=c(0);return a((()=>{n.current.lastTime=performance.now();let t=0;const o=()=>{performance.now()-n.current.lastTime>60&&(n.current.vx*=.8,n.current.vy*=.8);const a=i.current;a.vx+=.12*(n.current.vx-a.vx),a.vy+=.12*(n.current.vy-a.vy);const l=Math.sqrt(a.vx*a.vx+a.vy*a.vy),c=l>1?Math.atan2(a.vy,a.vx)*(180/Math.PI):0;if(r((t=>{const r=l>e;return Math.abs(t.speed-l)<1&&t.isMoving===r?t:{speed:Math.round(l),angle:Math.round(c),vx:Math.round(a.vx),vy:Math.round(a.vy),isMoving:r}})),l<1){if(t++,t>=180)return void(s.current=0)}else t=0;s.current=requestAnimationFrame(o)},a=p.subscribe(((e,r)=>{const i=performance.now(),a=Math.max((i-n.current.lastTime)/1e3,.001);n.current.vx=(e-n.current.lastX)/a,n.current.vy=(r-n.current.lastY)/a,n.current.lastX=e,n.current.lastY=r,n.current.lastTime=i,0===s.current&&(t=0,s.current=requestAnimationFrame(o))}));return s.current=requestAnimationFrame(o),()=>{a(),0!==s.current&&cancelAnimationFrame(s.current)}}),[e]),t}const W=({count:t=12,color:r="rgba(255,255,255,0.6)",size:n=8,zIndex:o=9998,type:i="dots",fadeTime:s=1800,spread:l=60})=>{const u=c(null),d=c([]),h=c(null);return a((()=>{const e=u.current;if(!e)return;const o=e.getContext("2d");if(!o)return;const a=()=>{e.width=window.innerWidth,e.height=window.innerHeight};let c;if(a(),window.addEventListener("resize",a,{passive:!0}),"dots"===i||"line"===i||"glow"===i){let a=!1;const s=()=>{if(a){o.clearRect(0,0,e.width,e.height);const t=d.current;t.length>0&&("dots"===i?function(e,t,r,n){for(let o=0;o<t.length;o++){const i=1-o/t.length;e.beginPath(),e.arc(t[o].x,t[o].y,Math.max(n*i*.5,.5),0,2*Math.PI),e.fillStyle=r,e.globalAlpha=i,e.fill()}e.globalAlpha=1}(o,t,r,n):"line"===i?function(e,t,r,n){if(t.length<2)return;for(let o=0;o<t.length-1;o++){const i=1-o/t.length;if(e.beginPath(),e.moveTo(t[o].x,t[o].y),o<t.length-2){const r=(t[o+1].x+t[o+2].x)/2,n=(t[o+1].y+t[o+2].y)/2;e.quadraticCurveTo(t[o+1].x,t[o+1].y,r,n)}else e.lineTo(t[o+1].x,t[o+1].y);e.strokeStyle=r,e.globalAlpha=i,e.lineWidth=Math.max(n*i,.5),e.lineCap="round",e.lineJoin="round",e.stroke()}e.globalAlpha=1}(o,t,r,n):function(e,t,r,n){for(let o=0;o<t.length;o++){const i=1-o/t.length,a=Math.max(n*i*2,.5),{x:s,y:l}=t[o],c=e.createRadialGradient(s,l,0,s,l,a);c.addColorStop(0,r),c.addColorStop(1,"rgba(0,0,0,0)"),e.beginPath(),e.arc(s,l,a,0,2*Math.PI),e.fillStyle=c,e.globalAlpha=i,e.fill()}e.globalAlpha=1}(o,t,r,n)),a=!1,h.current=requestAnimationFrame(s)}else h.current=null},l=p.subscribe(((e,r)=>{d.current=[{x:e,y:r},...d.current.slice(0,t-1)],a=!0,null===h.current&&(h.current=requestAnimationFrame(s))}));c=l}if("ink"===i){const t=[],i=a=>{for(o.clearRect(0,0,e.width,e.height);t.length&&a-t[0].born>s;)t.shift();if(t.length>=2){o.lineCap="round",o.lineJoin="round";const e=80;let i=0;for(let l=1;l<=t.length;l++){const c=l===t.length,u=!c&&t[l].born-t[l-1].born>e;if(c||u){const e=t.slice(i,l);if(e.length>=2){const t=a-e[0].born,i=Math.pow(Math.max(0,1-t/s),1.5);o.beginPath(),o.moveTo(e[0].x,e[0].y);for(let t=1;t<e.length-1;t++){const r=(e[t].x+e[t+1].x)/2,n=(e[t].y+e[t+1].y)/2;o.quadraticCurveTo(e[t].x,e[t].y,r,n)}o.lineTo(e[e.length-1].x,e[e.length-1].y),o.strokeStyle=r,o.lineWidth=Math.max(.85*n,1),o.globalAlpha=i,o.stroke()}i=l}}}o.globalAlpha=1,t.length>0?h.current=requestAnimationFrame(i):h.current=null},a=p.subscribe(((e,r)=>{t.push({x:e,y:r,born:performance.now()}),null===h.current&&(h.current=requestAnimationFrame(i))}));c=a}if("spark"===i){const t=[];let i=performance.now();const a=s,u=120,d=s=>{const l=Math.min((s-i)/1e3,.05);i=s,o.clearRect(0,0,e.width,e.height);for(let e=t.length-1;e>=0;e--){const i=t[e],c=s-i.born;if(c>a){t.splice(e,1);continue}i.x+=i.vx*l,i.y+=i.vy*l,i.vy+=u*l;const d=1-c/a,h=Math.max(n*d*.45,.5);o.beginPath(),o.arc(i.x,i.y,h,0,2*Math.PI),o.fillStyle=r,o.globalAlpha=d,o.fill()}o.globalAlpha=1,t.length>0?h.current=requestAnimationFrame(d):h.current=null},f=p.subscribe(((e,r)=>{const n=Math.random()*Math.PI*2;t.push({x:e,y:r,vx:Math.cos(n)*l*(.5+Math.random()),vy:Math.sin(n)*l*(.5+Math.random())-.4*l,born:performance.now()}),null===h.current&&(h.current=requestAnimationFrame(d))}));c=f}return()=>{window.removeEventListener("resize",a),null==c||c(),null!==h.current&&cancelAnimationFrame(h.current)}}),[r,t,n,i,s,l]),e("canvas",{ref:u,"aria-hidden":"true",style:{position:"fixed",top:0,left:0,pointerEvents:"none",zIndex:o}})};const q=2*Math.PI,z=["#ff6b6b","#ffd93d","#6bcb77","#4d96ff","#c77dff","#ff9a3c"],L=({size:t=50,duration:r=600,color:n="rgba(255, 255, 255, 0.8)",strokeWidth:o=2,zIndex:i=9997,type:s="ripple",particleCount:l=12,palette:u})=>{const d=c(null),h=c([]),f=c(0),p=c(null);return a((()=>{const e=d.current;if(!e)return;const i=e.getContext("2d");if(!i)return;const a=()=>{e.width=window.innerWidth,e.height=window.innerHeight};a(),window.addEventListener("resize",a,{passive:!0});const c=null!=u?u:z,g=a=>{i.clearRect(0,0,e.width,e.height),h.current=h.current.filter((e=>{const l=Math.max(0,a-e.startTime);if(l>=r)return!1;const c=l/r;return"ripple"===s?function(e,t,r,n,o,i){const a=Math.max(n/2*(1-Math.pow(1-r,3)),.5);e.beginPath(),e.arc(t.x,t.y,a,0,q),e.strokeStyle=o,e.globalAlpha=1-r,e.lineWidth=i,e.stroke()}(i,e,c,t,n,o):"burst"===s?function(e,t,r,n,o,i){const a=1-Math.pow(1-r,2);e.fillStyle=o,t.particles.forEach((o=>{const s=a*(n/2)*o.speedMult,l=t.x+Math.cos(o.angle)*s,c=t.y+Math.sin(o.angle)*s;e.beginPath(),e.arc(l,c,Math.max((1-r)*i*2.5,.5),0,q),e.globalAlpha=.9*(1-r),e.fill()}))}(i,e,c,t,n,o):"sparkle"===s?function(e,t,r,n,o,i){const a=1-Math.pow(1-r,2);e.strokeStyle=o,e.lineCap="round",t.particles.forEach((o=>{const s=t.x+Math.cos(o.angle)*a*(n/2)*.25,l=t.y+Math.sin(o.angle)*a*(n/2)*.25,c=t.x+Math.cos(o.angle)*a*(n/2)*o.speedMult,u=t.y+Math.sin(o.angle)*a*(n/2)*o.speedMult;e.beginPath(),e.moveTo(s,l),e.lineTo(c,u),e.globalAlpha=.85*(1-r),e.lineWidth=Math.max(i*(1-.5*r),.5),e.stroke()})),e.beginPath(),e.arc(t.x,t.y,Math.max(3*(1-r),.5),0,q),e.fillStyle=o,e.globalAlpha=1-r,e.fill()}(i,e,c,t,n,o):"shockwave"===s?function(e,t,r,n,o,i,a){const s=r/n;e.beginPath(),e.arc(t.x,t.y,Math.max(o/2*(1-Math.pow(1-s,3)),.5),0,q),e.strokeStyle=i,e.globalAlpha=.85*(1-s),e.lineWidth=1.5*a,e.stroke();const l=.15;if(r>n*l){const i=Math.min((r-n*l)/(n*(1-l)),1);e.beginPath(),e.arc(t.x,t.y,Math.max(o/2*.65*(1-Math.pow(1-i,3)),.5),0,q),e.globalAlpha=.5*(1-i),e.lineWidth=a,e.stroke()}}(i,e,l,r,t,n,o):"confetti"===s?function(e,t,r,n,o){const i=r/1e3;t.particles.forEach((a=>{const s=4*o+3.5*o*a.speedMult,l=Math.cos(a.angle)*s,c=Math.sin(a.angle)*s*.5-7.5*o,u=Math.exp(-1.5*i),d=t.x+l*i*u,h=t.y+c*i+450*i*i,f=Math.max(0,1-Math.pow(r/n,1.5)),p=a.rotSpeed*i;e.save(),e.translate(d,h),e.rotate(p),e.fillStyle=a.confettiColor,e.globalAlpha=f,e.fillRect(-a.pw/2,-a.ph/2,a.pw,a.ph),e.restore()}))}(i,e,l,r,t):"implode"===s&&function(e,t,r,n,o,i){const a=.3,s=n/2;if(r<a){const n=r/a,l=n*n;e.fillStyle=o,t.particles.forEach((r=>{const n=s*(1-l)*r.speedMult,o=t.x+Math.cos(r.angle)*n,a=t.y+Math.sin(r.angle)*n;e.beginPath(),e.arc(o,a,Math.max(2*i,.5),0,q),e.globalAlpha=.7+.3*l,e.fill()})),e.beginPath(),e.arc(t.x,t.y,Math.max(6*l,.5),0,q),e.globalAlpha=l,e.fill()}else{const n=(r-a)/(1-a),l=1-Math.pow(1-n,2);e.fillStyle=o,t.particles.forEach((r=>{const o=l*s*r.speedMult,a=t.x+Math.cos(r.angle)*o,c=t.y+Math.sin(r.angle)*o;e.beginPath(),e.arc(a,c,Math.max((1-n)*i*2.5,.5),0,q),e.globalAlpha=.9*(1-n),e.fill()}))}}(i,e,c,t,n,o),i.globalAlpha=1,!0})),h.current.length>0?p.current=requestAnimationFrame(g):p.current=null},b=(e,t)=>{const r=Array.from({length:l},((e,t)=>({angle:t/l*q+(Math.random()-.5)*(q/l),speedMult:.6+.4*Math.random(),confettiColor:c[t%c.length],rotSpeed:18*(Math.random()-.5),pw:8+10*Math.random(),ph:4+6*Math.random()})));h.current.push({x:e,y:t,startTime:performance.now(),id:f.current++,particles:r}),null===p.current&&(p.current=requestAnimationFrame(g))},m=e=>b(e.clientX,e.clientY),v=e=>{const{x:t,y:r}=e.detail;b(t,r)};return window.addEventListener("click",m),window.addEventListener("cursor:click",v),()=>{window.removeEventListener("resize",a),window.removeEventListener("click",m),window.removeEventListener("cursor:click",v),null!==p.current&&cancelAnimationFrame(p.current)}}),[n,r,u,l,t,o,s]),e("canvas",{ref:d,"aria-hidden":"true",style:{position:"fixed",top:0,left:0,pointerEvents:"none",zIndex:i}})};function I({strength:e=.35,distance:t=80}={}){const r=c(null);return a((()=>{const n=r.current;if(!n)return;const o=p.subscribe(((r,o)=>{const i=n.getBoundingClientRect(),a=r-(i.left+i.width/2),s=o-(i.top+i.height/2),l=Math.sqrt(a*a+s*s);if(l<t){const r=(1-l/t)*e;n.style.transform=`translate(${a*r}px, ${s*r}px)`,n.style.transition="transform 0.08s linear"}else n.style.transform="translate(0px, 0px)",n.style.transition="transform 0.4s ease"}));return()=>{o(),r.current&&(r.current.style.transform="",r.current.style.transition="")}}),[e,t]),r}const $=({color:t="rgba(255,255,255,0.06)",size:r=400,zIndex:n=0,blend:o="normal"})=>{const i=c(null);return a((()=>{const e=i.current;if(!e)return;const n=r/2;return p.subscribe(((r,o)=>{e.style.background=`radial-gradient(circle at ${r}px ${o}px, ${t} 0px, transparent ${n}px)`}))}),[t,r]),e("div",{ref:i,"aria-hidden":"true",style:{position:"fixed",inset:0,pointerEvents:"none",zIndex:n,mixBlendMode:o,willChange:"background"}})},P=({children:r,size:n=180,overlay:o="rgba(9,9,11,0.92)",blur:i=0,className:s,style:l})=>{const u=c(null),d=c(null);return a((()=>{const e=u.current,t=d.current;if(!e||!t)return;const r=n/2,o=n=>{const o=e.getBoundingClientRect(),i=n.clientX-o.left,a=n.clientY-o.top,s=`radial-gradient(circle ${r}px at ${i}px ${a}px, transparent 0%, black ${r}px)`;t.style.maskImage=s,t.style.webkitMaskImage=s},i=()=>{t.style.maskImage="",t.style.webkitMaskImage=""};return e.addEventListener("mousemove",o,{passive:!0}),e.addEventListener("mouseleave",i),()=>{e.removeEventListener("mousemove",o),e.removeEventListener("mouseleave",i)}}),[n]),t("div",{ref:u,className:s,style:Object.assign({position:"relative",overflow:"hidden"},l),children:[r,e("div",{ref:d,"aria-hidden":"true",style:{position:"absolute",inset:0,background:o,backdropFilter:i?`blur(${i}px)`:void 0,WebkitBackdropFilter:i?`blur(${i}px)`:void 0,pointerEvents:"none"}})]})},T=({color:t="rgba(255,255,255,0.85)",width:r=2,zIndex:n=9996,fadeTime:o=0,enabled:i=!0,eraseWidth:s=20,onStroke:l})=>{const u=c(null),d=c([]),h=c(null),f=c(!1),g=c(!1),b=c(null),m=c(i);return a((()=>{m.current=i,i||(f.current=!1,h.current&&h.current.length>1&&d.current.push({points:h.current,color:t,width:r,createdAt:performance.now(),erase:!1}),h.current=null)}),[i,t,r]),a((()=>{const e=u.current;if(!e)return;const n=e.getContext("2d");if(!n)return;const i=()=>{e.width=window.innerWidth,e.height=window.innerHeight};i(),window.addEventListener("resize",i,{passive:!0});const a=(e,t,r,o)=>{if(!(e.length<2)){n.beginPath(),n.moveTo(e[0].x,e[0].y);for(let t=1;t<e.length-1;t++){const r=(e[t].x+e[t+1].x)/2,o=(e[t].y+e[t+1].y)/2;n.quadraticCurveTo(e[t].x,e[t].y,r,o)}n.lineTo(e[e.length-1].x,e[e.length-1].y),n.strokeStyle=r,n.globalAlpha=o,n.lineWidth=t,n.lineCap="round",n.lineJoin="round",n.stroke()}},c=i=>{n.clearRect(0,0,e.width,e.height);const l=window.scrollX,u=window.scrollY;if(n.save(),n.translate(-l,-u),o>0&&(d.current=d.current.filter((e=>i-e.createdAt<o+800))),d.current.forEach((e=>{const t=o>0?Math.max(0,i-e.createdAt-o):0,r=o>0?Math.max(0,1-t/800):1;e.erase?(n.globalCompositeOperation="destination-out",a(e.points,e.width,"rgba(0,0,0,1)",r||1),n.globalCompositeOperation="source-over"):a(e.points,e.width,e.color,r)})),h.current&&h.current.length>0)if(g.current){n.globalCompositeOperation="destination-out",a(h.current,s,"rgba(0,0,0,1)",1),n.globalCompositeOperation="source-over";const e=h.current[h.current.length-1];n.beginPath(),n.arc(e.x,e.y,s/2,0,2*Math.PI),n.setLineDash([3,3]),n.strokeStyle="rgba(255,255,255,0.5)",n.lineWidth=1,n.globalAlpha=.7,n.stroke(),n.setLineDash([])}else a(h.current,r,t,1);n.restore(),n.globalAlpha=1;const f=null!==h.current,p=o>0&&d.current.length>0;b.current=f||p?requestAnimationFrame(c):null},v=()=>{(d.current.length>0||null!==h.current)&&null===b.current&&(b.current=requestAnimationFrame(c))},x=e=>{m.current&&(0!==e.button&&2!==e.button||(g.current=2===e.button,f.current=!0,document.body.style.userSelect="none",document.body.style.webkitUserSelect="none",h.current=[{x:e.clientX+window.scrollX,y:e.clientY+window.scrollY}],null===b.current&&(b.current=requestAnimationFrame(c))))},w=e=>{if((0===e.button||2===e.button)&&(document.body.style.userSelect="",document.body.style.webkitUserSelect="",f.current&&h.current)){if(f.current=!1,h.current.length>1){const e={points:h.current,color:t,width:g.current?s:r,createdAt:performance.now(),erase:g.current};d.current.push(e),g.current||null==l||l(e.points),o>0&&null===b.current&&(b.current=requestAnimationFrame(c))}h.current=null,g.current=!1}},y=()=>{m.current&&(d.current=[],h.current=null,f.current=!1,n.clearRect(0,0,e.width,e.height),null!==b.current&&(cancelAnimationFrame(b.current),b.current=null))},M=e=>{m.current&&e.preventDefault()},C=p.subscribe(((e,t)=>{m.current&&f.current&&h.current&&h.current.push({x:e+window.scrollX,y:t+window.scrollY})}));return window.addEventListener("mousedown",x),window.addEventListener("mouseup",w),window.addEventListener("dblclick",y),window.addEventListener("contextmenu",M),window.addEventListener("scroll",v,{passive:!0}),()=>{window.removeEventListener("resize",i),window.removeEventListener("mousedown",x),window.removeEventListener("mouseup",w),window.removeEventListener("dblclick",y),window.removeEventListener("contextmenu",M),window.removeEventListener("scroll",v),document.body.style.userSelect="",document.body.style.webkitUserSelect="",C(),null!==b.current&&cancelAnimationFrame(b.current)}}),[t,s,o,r]),e("canvas",{ref:u,"aria-hidden":"true",style:{position:"fixed",top:0,left:0,pointerEvents:"none",zIndex:n}})},F=({size:n=140,scale:o=2.2,border:i="1.5px solid rgba(255,255,255,0.25)",zIndex:s=9995,children:l})=>{const u=c(null),d=c(null),h=c(null);return a((()=>{const e=u.current,t=d.current,r=h.current;if(!e||!t||!r)return;const i=p.subscribe(((i,a)=>{const s=e.getBoundingClientRect();if(i<s.left||i>s.right||a<s.top||a>s.bottom)return void(t.style.opacity="0");const l=i-s.left,c=a-s.top;t.style.left=`${i}px`,t.style.top=`${a}px`,t.style.opacity="1",r.style.width=`${s.width}px`,r.style.height=`${s.height}px`,r.style.left=n/2-l*o+"px",r.style.top=n/2-c*o+"px"})),a=()=>{t.style.opacity="0"};return document.addEventListener("mouseleave",a),()=>{i(),document.removeEventListener("mouseleave",a)}}),[n,o]),t(r,{children:[e("div",{ref:u,style:{position:"relative"},children:l}),t("div",{ref:d,"aria-hidden":"true",style:{position:"fixed",width:n,height:n,borderRadius:"50%",border:i,boxShadow:"0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3)",overflow:"hidden",pointerEvents:"none",zIndex:s,opacity:0,transform:"translate(-50%, -50%)",transition:"opacity 0.14s ease"},children:[e("div",{ref:h,"aria-hidden":"true",style:{position:"absolute",transformOrigin:"0 0",transform:`scale(${o})`,pointerEvents:"none"},children:l}),e("div",{style:{position:"absolute",inset:0,borderRadius:"50%",background:"radial-gradient(ellipse at 35% 30%, rgba(255,255,255,0.07) 0%, transparent 60%)",pointerEvents:"none"}}),e("div",{style:{position:"absolute",top:"50%",left:0,right:0,height:1,background:"rgba(255,255,255,0.12)",transform:"translateY(-0.5px)",pointerEvents:"none"}}),e("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,background:"rgba(255,255,255,0.12)",transform:"translateX(-0.5px)",pointerEvents:"none"}}),t("div",{style:{position:"absolute",bottom:8,right:10,fontSize:9,fontFamily:"monospace",color:"rgba(255,255,255,0.35)",letterSpacing:"0.08em",pointerEvents:"none"},children:[o,"×"]})]})]})};function O(e,t={}){var r,n;if("undefined"==typeof window)return;const o=null!==(r=t.x)&&void 0!==r?r:window.innerWidth/2,i=null!==(n=t.y)&&void 0!==n?n:window.innerHeight/2;window.dispatchEvent(new CustomEvent("cursor:click",{detail:{x:o,y:i}}))}const R={minimal:{default:{width:6,height:6,shape:"circle",color:"rgba(255,255,255,0.9)",transition:{stiffness:1100,damping:95,mass:.6}},link:{width:36,height:36,shape:"circle",color:"transparent",borderColor:"rgba(255,255,255,0.45)",borderWidth:1,transition:{stiffness:440,damping:40,mass:.9}},button:{width:46,height:46,shape:"circle",color:"transparent",borderColor:"rgba(255,255,255,0.35)",borderWidth:1,label:"click",fontSize:"9px",labelColor:"rgba(255,255,255,0.55)",transition:{stiffness:440,damping:40,mass:.9}},text:{width:1.5,height:24,shape:"square",borderRadius:1,color:"rgba(255,255,255,0.75)",transition:{stiffness:1400,damping:110,mass:.5}},view:{width:68,height:68,shape:"circle",color:"transparent",borderColor:"rgba(255,255,255,0.25)",borderWidth:1,label:"view",fontSize:"10px",labelColor:"rgba(255,255,255,0.5)",transition:{stiffness:200,damping:24,mass:1.6}},drag:{width:56,height:56,shape:"circle",color:"transparent",borderColor:"rgba(255,255,255,0.35)",borderWidth:1,label:"drag",fontSize:"9px",labelColor:"rgba(255,255,255,0.5)",transition:{stiffness:280,damping:30,mass:1.2}},close:{width:36,height:36,shape:"circle",color:"transparent",borderColor:"rgba(255,255,255,0.4)",borderWidth:1,label:"✕",fontSize:"12px",labelColor:"rgba(255,255,255,0.6)",transition:{stiffness:700,damping:55,mass:.8}},spot:{width:110,height:110,shape:"circle",color:"rgba(255,255,255,0.03)",borderColor:"rgba(255,255,255,0.08)",borderWidth:1,transition:{stiffness:100,damping:16,mass:2.5}}},neon:{default:{width:10,height:10,shape:"circle",color:"#00ffff",opacity:.9,transition:{stiffness:900,damping:80,mass:.7}},link:{width:48,height:48,shape:"circle",color:"rgba(0,255,255,0.06)",borderColor:"#00ffff",borderWidth:1.5,transition:{stiffness:360,damping:36,mass:1}},button:{width:56,height:56,shape:"circle",color:"rgba(255,0,255,0.08)",borderColor:"#ff00ff",borderWidth:1.5,label:"click",fontSize:"10px",labelColor:"#ff00ff",transition:{stiffness:380,damping:38,mass:1}},text:{width:2,height:28,shape:"square",color:"#00ffff",transition:{stiffness:1400,damping:110,mass:.5}},view:{width:80,height:80,shape:"circle",color:"rgba(0,255,255,0.04)",borderColor:"rgba(0,255,255,0.6)",borderWidth:1.5,label:"view",fontSize:"11px",labelColor:"#00ffff",transition:{stiffness:200,damping:24,mass:1.8}},drag:{width:58,height:58,shape:"circle",color:"rgba(0,255,128,0.08)",borderColor:"#00ff80",borderWidth:1.5,label:"drag",fontSize:"10px",labelColor:"#00ff80",transition:{stiffness:280,damping:30,mass:1.2}},close:{width:48,height:48,shape:"circle",color:"rgba(255,0,80,0.12)",borderColor:"#ff0050",borderWidth:1.5,label:"✕",fontSize:"14px",labelColor:"#ff0050",transition:{stiffness:650,damping:52,mass:.8}},invert:{width:56,height:56,shape:"circle",color:"rgba(255,0,255,1)",mixBlendMode:"difference",transition:{stiffness:520,damping:46,mass:.8}},spot:{width:130,height:130,shape:"circle",color:"rgba(0,255,255,0.04)",borderColor:"rgba(0,255,255,0.1)",borderWidth:1,transition:{stiffness:100,damping:14,mass:2.8}},square:{width:38,height:38,shape:"square",borderRadius:4,color:"rgba(255,255,0,0.15)",borderColor:"#ffff00",borderWidth:1.5,transition:{stiffness:520,damping:46,mass:.8}}},glassmorphism:{default:{width:14,height:14,shape:"circle",color:"rgba(255,255,255,0.55)",borderColor:"rgba(255,255,255,0.35)",borderWidth:1,transition:{stiffness:780,damping:72,mass:.85}},link:{width:52,height:52,shape:"circle",color:"rgba(255,255,255,0.08)",borderColor:"rgba(255,255,255,0.38)",borderWidth:1,transition:{stiffness:320,damping:32,mass:1.3}},button:{width:64,height:64,shape:"circle",color:"rgba(255,255,255,0.1)",borderColor:"rgba(255,255,255,0.42)",borderWidth:1,label:"click",fontSize:"10px",labelColor:"rgba(255,255,255,0.65)",transition:{stiffness:340,damping:34,mass:1.3}},text:{width:2,height:28,shape:"square",color:"rgba(255,255,255,0.65)",transition:{stiffness:1400,damping:110,mass:.5}},view:{width:82,height:82,shape:"circle",color:"rgba(255,255,255,0.06)",borderColor:"rgba(255,255,255,0.28)",borderWidth:1,label:"view",fontSize:"11px",labelColor:"rgba(255,255,255,0.58)",transition:{stiffness:190,damping:22,mass:1.9}},drag:{width:62,height:62,shape:"circle",color:"rgba(255,255,255,0.08)",borderColor:"rgba(255,255,255,0.32)",borderWidth:1,label:"drag",fontSize:"10px",labelColor:"rgba(255,255,255,0.6)",transition:{stiffness:270,damping:28,mass:1.3}},close:{width:46,height:46,shape:"circle",color:"rgba(255,120,120,0.1)",borderColor:"rgba(255,120,120,0.45)",borderWidth:1,label:"✕",fontSize:"14px",labelColor:"rgba(255,120,120,0.85)",transition:{stiffness:650,damping:52,mass:.8}},invert:{width:58,height:58,shape:"circle",color:"rgba(255,255,255,1)",mixBlendMode:"difference",transition:{stiffness:500,damping:44,mass:.9}},spot:{width:130,height:130,shape:"circle",color:"rgba(255,255,255,0.04)",borderColor:"rgba(255,255,255,0.1)",borderWidth:1,transition:{stiffness:110,damping:16,mass:2.6}},square:{width:40,height:40,shape:"square",borderRadius:8,color:"rgba(255,255,255,0.1)",borderColor:"rgba(255,255,255,0.35)",borderWidth:1,transition:{stiffness:500,damping:44,mass:.9}}},brutalist:{default:{width:8,height:8,shape:"square",color:"#ffffff",transition:{stiffness:2200,damping:160,mass:.45}},link:{width:40,height:40,shape:"square",color:"#ffffff",mixBlendMode:"difference",transition:{stiffness:1400,damping:100,mass:.6}},button:{width:72,height:10,shape:"square",color:"#ffffff",label:"CLICK",fontSize:"8px",fontWeight:"900",labelColor:"#000000",transition:{stiffness:1400,damping:100,mass:.6}},text:{width:2,height:24,shape:"square",color:"#ffffff",transition:{stiffness:2200,damping:160,mass:.4}},view:{width:64,height:64,shape:"square",color:"transparent",borderColor:"#ffffff",borderWidth:2,label:"VIEW",fontSize:"9px",fontWeight:"800",labelColor:"#ffffff",transition:{stiffness:1e3,damping:75,mass:.8}},drag:{width:12,height:52,shape:"square",color:"#00ff00",transition:{stiffness:1400,damping:100,mass:.6}},close:{width:36,height:36,shape:"square",color:"#ff0000",label:"✕",fontSize:"16px",fontWeight:"900",labelColor:"#ffffff",transition:{stiffness:1400,damping:100,mass:.6}},spot:{width:100,height:100,shape:"square",color:"transparent",borderColor:"rgba(255,255,255,0.2)",borderWidth:2,transition:{stiffness:120,damping:18,mass:2.5}},square:{width:38,height:38,shape:"square",color:"#ffff00",transition:{stiffness:1400,damping:100,mass:.6}},invert:{width:48,height:48,shape:"square",color:"#ffffff",mixBlendMode:"difference",transition:{stiffness:1400,damping:100,mass:.6}}}};export{w as Cursor,L as CursorClickEffect,T as CursorDraw,F as CursorLens,v as CursorProvider,P as CursorReveal,$ as CursorSpotlight,M as CursorTarget,W as CursorTrail,O as emitCursorEvent,p as mouseStore,R as themes,y as useCursor,S as useCursorIdle,E as useCursorVariant,k as useCursorZone,I as useMagnetic,C as useMousePosition,A as useVelocityCursor};
//# sourceMappingURL=index.esm.js.map