react-one-cursor/build/index.js

A lightweight cursor-following animation component for React JS by Vaibhaw Mishra

(()=>{"use strict";var e={626:(e,t,n)=>{n.d(t,{A:()=>c});var r=n(601),o=n.n(r),a=n(314),i=n.n(a)()(o());i.push([e.id,"/* Shared styles for both circles */\n.small-circle,\n.big-circle {\n  position: fixed;\n  pointer-events: none; /* Ensure the cursor isn't obstructed */\n  will-change: transform; /* Optimize for smoother animations */\n  transition: transform 0.2s ease-out, opacity 0.3s ease-out; /* Ensure smooth transitions for both size and opacity */\n}\n\n/* Small Circle */\n.small-circle {\n  width: 6px;\n  height: 6px;\n  background-color: #00bcd4;\n  border-radius: 50%;\n}\n\n/* Big Circle */\n.big-circle {\n  width: 30px; /* Big enough to wrap around the small circle */\n  height: 30px;\n  border: 1px solid #00bcd4;\n  border-radius: 50%;\n}\n\n/* Hover effect on circles when hovering over links or buttons */\n.small-circle.hovering {\n  transform: scale(12); /* Make small circle much bigger smoothly */\n  opacity: 0.2; /* Slight transparency */\n}\n\n.big-circle.hovering {\n  opacity: 0; /* Fade away the big circle smoothly */\n}\n\n/* Hide the cursor-following circles on touch devices */\n@media (pointer: coarse) {\n  .small-circle,\n  .big-circle {\n    display: none;\n  }\n}\n",""]);const c=i},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(i[s]=!0)}for(var u=0;u<e.length;u++){var l=[].concat(e[u]);r&&i[l[0]]||(void 0!==a&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=a),n&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=n):l[2]=n),o&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=o):l[4]="".concat(o)),t.push(l))}},t}},601:e=>{e.exports=function(e){return e[1]}},72:e=>{var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var a={},i=[],c=0;c<e.length;c++){var s=e[c],u=r.base?s[0]+r.base:s[0],l=a[u]||0,d="".concat(u," ").concat(l);a[u]=l+1;var f=n(d),p={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==f)t[f].references++,t[f].updater(p);else{var m=o(p,r);r.byIndex=c,t.splice(c,0,{identifier:d,updater:m,references:1})}i.push(d)}return i}function o(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,o){var a=r(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=n(a[i]);t[c].references--}for(var s=r(e,o),u=0;u<a.length;u++){var l=n(a[u]);0===t[l].references&&(t[l].updater(),t.splice(l,1))}a=s}}},659:e=>{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},56:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={id:r,exports:{}};return e[r](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nc=void 0;var r={};n.r(r),n.d(r,{default:()=>S});const o=require("react");var a=n(72),i=n.n(a),c=n(825),s=n.n(c),u=n(659),l=n.n(u),d=n(56),f=n.n(d),p=n(540),m=n.n(p),v=n(113),y=n.n(v),h=n(626),b={};function g(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,c=[],s=!0,u=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=a.call(n)).done)&&(c.push(r.value),c.length!==t);s=!0);}catch(e){u=!0,o=e}finally{try{if(!s&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw o}}return c}}(e,t)||function(e,t){if(e){if("string"==typeof e)return x(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?x(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}b.styleTagTransform=y(),b.setAttributes=f(),b.insert=l().bind(null,"head"),b.domAPI=s(),b.insertStyleElement=m(),i()(h.A,b),h.A&&h.A.locals&&h.A.locals;const S=function(){var e=g((0,o.useState)({x:0,y:0}),2),t=e[0],n=e[1],r=g((0,o.useState)({x:0,y:0}),2),a=r[0],i=r[1],c=g((0,o.useState)({x:0,y:0}),2),s=c[0],u=c[1],l=g((0,o.useState)(!1),2),d=l[0],f=l[1],p=(0,o.useRef)(),m=function(e){n({x:e.clientX,y:e.clientY})},v=(0,o.useCallback)((function(){i((function(e){return{x:e.x+.38*(t.x-e.x),y:e.y+.38*(t.y-e.y)}})),u((function(e){return{x:e.x+.2*(t.x-e.x),y:e.y+.2*(t.y-e.y)}})),p.current=requestAnimationFrame(v)}),[t.x,t.y]),y=function(e){e.target.closest("a, button")&&f(!0)},h=function(e){e.target.closest("a, button")&&f(!1)};return(0,o.useEffect)((function(){return window.addEventListener("mousemove",m),p.current=requestAnimationFrame(v),document.body.addEventListener("mouseenter",y,!0),document.body.addEventListener("mouseleave",h,!0),function(){window.removeEventListener("mousemove",m),cancelAnimationFrame(p.current),document.body.removeEventListener("mouseenter",y,!0),document.body.removeEventListener("mouseleave",h,!0)}}),[v]),React.createElement(React.Fragment,null,React.createElement("div",{className:"small-circle ".concat(d?"hovering":""),style:{left:a.x-2,top:a.y-2}}),React.createElement("div",{className:"big-circle ".concat(d?"hovering":""),style:{left:s.x-14,top:s.y-14}}))};module.exports=r})();