animated-cursor - npm Package Compare versions

Comparing version 1.0.1 to 1.0.3

dist/index.esm.js

@@ -1,2 +0,2 @@
-function e(e,r,t){return(1-t)*e+t*r}function r(e,r){e=e.replace("#","");var t=parseInt(3==e.length?e.slice(0,1).repeat(2):e.slice(0,2),16),n=parseInt(3==e.length?e.slice(1,2).repeat(2):e.slice(2,4),16),s=parseInt(3==e.length?e.slice(2,3).repeat(2):e.slice(4,6),16);return r?"rgba("+t+", "+n+", "+s+", "+r+")":"rgb("+t+", "+n+", "+s+")"}function t(e,r){var t=document.querySelector(e);for(var n in r)t.style[n]=r[n]}var n={cursorInnerSelector:"#cursor-inner",cursorOuterSelector:"#cursor-outer",hasRequiredStyles:!0,color:"#D3245C",outerAlpha:.3,size:{inner:8,outer:40},hoverScale:{inner:.75,outer:1.5},clickScale:{inner:1.5,outer:.13},trailingSpeed:.2,clickables:["a",'input[type="text"]','input[type="email"]','input[type="number"]','input[type="submit"]','input[type="image"]',"label[for]","select","textarea","button",".link"]};function s(s){var o=Object.assign({},n,s),i={cursorInner:document.querySelector(o.cursorInnerSelector),cursorOuter:document.querySelector(o.cursorOuterSelector),hasRequiredStyles:o.hasRequiredStyles,targetPos:{x:.5,y:.5},cursorPos:{x:.5,y:.5},endX:window.innerWidth/2,endY:window.innerHeight/2,raf:requestAnimationFrame(u),cursorVisible:!0,isScaled:!1,isClicking:!1};function c(e){var r;i.isVisible=!0,a(),i.targetPos.x=e.clientX,i.targetPos.y=e.clientY,r=e.clientX,i.cursorInner.style.top=e.clientY+"px",i.cursorInner.style.left=r+"px",i.raf||(i.raf=requestAnimationFrame(u))}function u(){if(i.cursorPos.x=e(i.cursorPos.x,i.targetPos.x,o.trailingSpeed),i.cursorPos.y=e(i.cursorPos.y,i.targetPos.y,o.trailingSpeed),i.cursorOuter.style.top=i.cursorPos.y+"px",i.cursorOuter.style.left=i.cursorPos.x+"px",Math.sqrt(Math.pow(i.targetPos.x-i.cursorPos.x,2)+Math.pow(i.targetPos.y-i.cursorPos.y,2))<.001)return window.cancelAnimationFrame(i.raf),void(i.raf=null);i.raf=requestAnimationFrame(u)}function a(){i.isVisible?(i.cursorInner.style.opacity=1,i.cursorOuter.style.opacity=1):(i.cursorInner.style.opacity=0,i.cursorOuter.style.opacity=0)}function l(){i.isClicking?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+o.clickScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+o.clickScale.outer+")"):i.isScaled?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+o.hoverScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+o.hoverScale.outer+")"):(i.cursorInner.style.transform="translate(-50%, -50%) scale(1)",i.cursorOuter.style.transform="translate(-50%, -50%) scale(1)")}return{init:function(){var e,n,s;window.addEventListener("mousemove",c),document.querySelectorAll(o.clickables.join(",")).forEach(function(e){return function(e){e.style.cursor="none",e.addEventListener("mouseover",function(){i.isScaled=!0,l()}),e.addEventListener("mouseout",function(){i.isScaled=!1,l()})}(e)}),document.addEventListener("mousedown",function(){i.isClicking=!0,l()}),document.addEventListener("mouseup",function(){i.isScaled=!1,i.isClicking=!1,l()}),document.addEventListener("mouseleave",function(e){var r;((r=e).clientY<=0||r.clientX<=0||r.clientX>=window.innerWidth||r.clientY>=window.innerHeight)&&(i.isVisible=!1,a())}),i.isVisible=!1,a(),o.hasRequiredStyles&&(t(o.cursorInnerSelector,e={"pointer-events":"none",position:"fixed","border-radius":"50%",opacity:0,transform:"translate(-50%, -50%)",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out"}),t(o.cursorOuterSelector,e)),n=r(o.color),s=r(o.color,o.outerAlpha),i.cursorInner.style.setProperty("background-color",n),i.cursorOuter.style.setProperty("background-color",s),i.cursorInner.style.setProperty("width",o.size.inner+"px"),i.cursorInner.style.setProperty("height",o.size.inner+"px"),i.cursorOuter.style.setProperty("width",o.size.outer+"px"),i.cursorOuter.style.setProperty("height",o.size.outer+"px")}}}s.options=n;export{s as default};
+function e(e,r,t){return(1-t)*e+t*r}function r(e,r){e=e.replace("#","");var t=parseInt(3==e.length?e.slice(0,1).repeat(2):e.slice(0,2),16),n=parseInt(3==e.length?e.slice(1,2).repeat(2):e.slice(2,4),16),o=parseInt(3==e.length?e.slice(2,3).repeat(2):e.slice(4,6),16);return 0===r?"rgba("+t+", "+n+", "+o+", 0)":r?"rgba("+t+", "+n+", "+o+", "+r+")":"rgb("+t+", "+n+", "+o+")"}function t(e,r){var t=document.querySelector(e);for(var n in r)t.style[n]=r[n]}var n={cursorInnerSelector:"#cursor-inner",cursorOuterSelector:"#cursor-outer",hasRequiredStyles:!0,color:"#D3245C",outerAlpha:.3,outerBorderSize:0,size:{inner:8,outer:40},hoverScale:{inner:.75,outer:1.5},clickScale:{inner:1.5,outer:.13},trailingSpeed:.2,clickables:["a",'input[type="text"]','input[type="email"]','input[type="number"]','input[type="submit"]','input[type="image"]',"label[for]","select","textarea","button",".link"]};function o(o){var s=Object.assign({},n,o),i={cursorInner:document.querySelector(s.cursorInnerSelector),cursorOuter:document.querySelector(s.cursorOuterSelector),hasRequiredStyles:s.hasRequiredStyles,targetPos:{x:.5,y:.5},cursorPos:{x:.5,y:.5},endX:window.innerWidth/2,endY:window.innerHeight/2,raf:requestAnimationFrame(u),cursorVisible:!0,isScaled:!1,isClicking:!1};function c(e){var r;i.isVisible=!0,a(),i.targetPos.x=e.clientX,i.targetPos.y=e.clientY,r=e.clientX,i.cursorInner.style.top=e.clientY+"px",i.cursorInner.style.left=r+"px",i.raf||(i.raf=requestAnimationFrame(u))}function u(){if(i.cursorPos.x=e(i.cursorPos.x,i.targetPos.x,s.trailingSpeed),i.cursorPos.y=e(i.cursorPos.y,i.targetPos.y,s.trailingSpeed),i.cursorOuter.style.top=i.cursorPos.y+"px",i.cursorOuter.style.left=i.cursorPos.x+"px",Math.sqrt(Math.pow(i.targetPos.x-i.cursorPos.x,2)+Math.pow(i.targetPos.y-i.cursorPos.y,2))<.001)return window.cancelAnimationFrame(i.raf),void(i.raf=null);i.raf=requestAnimationFrame(u)}function a(){i.isVisible?(i.cursorInner.style.opacity=1,i.cursorOuter.style.opacity=1):(i.cursorInner.style.opacity=0,i.cursorOuter.style.opacity=0)}function l(){i.isClicking?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+s.clickScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+s.clickScale.outer+")"):i.isScaled?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+s.hoverScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+s.hoverScale.outer+")"):(i.cursorInner.style.transform="translate(-50%, -50%) scale(1)",i.cursorOuter.style.transform="translate(-50%, -50%) scale(1)")}return{init:function(){var e,n,o;window.addEventListener("mousemove",c),document.querySelectorAll(s.clickables.join(",")).forEach(function(e){return function(e){e.style.cursor="none",e.addEventListener("mouseover",function(){i.isScaled=!0,l()}),e.addEventListener("mouseout",function(){i.isScaled=!1,l()})}(e)}),document.addEventListener("mousedown",function(){i.isClicking=!0,l()}),document.addEventListener("mouseup",function(){i.isScaled=!1,i.isClicking=!1,l()}),document.addEventListener("mouseleave",function(e){var r;((r=e).clientY<=0||r.clientX<=0||r.clientX>=window.innerWidth||r.clientY>=window.innerHeight)&&(i.isVisible=!1,a())}),i.isVisible=!1,a(),s.hasRequiredStyles&&(t(s.cursorInnerSelector,e={"pointer-events":"none",position:"fixed","border-radius":"50%",opacity:0,transform:"translate(-50%, -50%)",transition:"opacity 0.25s ease-in-out, transform 0.25s ease-in-out"}),t(s.cursorOuterSelector,e)),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",s.outerBorderSize+"px solid "+s.color),n=r(s.color),o=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",n),i.cursorOuter.style.setProperty("background-color",o),i.cursorInner.style.setProperty("width",s.size.inner+"px"),i.cursorInner.style.setProperty("height",s.size.inner+"px"),i.cursorOuter.style.setProperty("width",s.size.outer+"px"),i.cursorOuter.style.setProperty("height",s.size.outer+"px")}}}o.options=n;export{o as default};
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -1,2 +0,2 @@
-function e(e,r,t){return(1-t)*e+t*r}function r(e,r){e=e.replace("#","");var t=parseInt(3==e.length?e.slice(0,1).repeat(2):e.slice(0,2),16),n=parseInt(3==e.length?e.slice(1,2).repeat(2):e.slice(2,4),16),o=parseInt(3==e.length?e.slice(2,3).repeat(2):e.slice(4,6),16);return r?"rgba("+t+", "+n+", "+o+", "+r+")":"rgb("+t+", "+n+", "+o+")"}function t(e,r){var t=document.querySelector(e);for(var n in r)t.style[n]=r[n]}var n={cursorInnerSelector:"#cursor-inner",cursorOuterSelector:"#cursor-outer",hasRequiredStyles:!0,color:"#D3245C",outerAlpha:.3,size:{inner:8,outer:40},hoverScale:{inner:.75,outer:1.5},clickScale:{inner:1.5,outer:.13},trailingSpeed:.2,clickables:["a",'input[type="text"]','input[type="email"]','input[type="number"]','input[type="submit"]','input[type="image"]',"label[for]","select","textarea","button",".link"]};function o(o){var s=Object.assign({},n,o),i={cursorInner:document.querySelector(s.cursorInnerSelector),cursorOuter:document.querySelector(s.cursorOuterSelector),hasRequiredStyles:s.hasRequiredStyles,targetPos:{x:.5,y:.5},cursorPos:{x:.5,y:.5},endX:window.innerWidth/2,endY:window.innerHeight/2,raf:requestAnimationFrame(u),cursorVisible:!0,isScaled:!1,isClicking:!1};function c(e){var r;i.isVisible=!0,a(),i.targetPos.x=e.clientX,i.targetPos.y=e.clientY,r=e.clientX,i.cursorInner.style.top=e.clientY+"px",i.cursorInner.style.left=r+"px",i.raf||(i.raf=requestAnimationFrame(u))}function u(){if(i.cursorPos.x=e(i.cursorPos.x,i.targetPos.x,s.trailingSpeed),i.cursorPos.y=e(i.cursorPos.y,i.targetPos.y,s.trailingSpeed),i.cursorOuter.style.top=i.cursorPos.y+"px",i.cursorOuter.style.left=i.cursorPos.x+"px",Math.sqrt(Math.pow(i.targetPos.x-i.cursorPos.x,2)+Math.pow(i.targetPos.y-i.cursorPos.y,2))<.001)return window.cancelAnimationFrame(i.raf),void(i.raf=null);i.raf=requestAnimationFrame(u)}function a(){i.isVisible?(i.cursorInner.style.opacity=1,i.cursorOuter.style.opacity=1):(i.cursorInner.style.opacity=0,i.cursorOuter.style.opacity=0)}function l(){i.isClicking?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+s.clickScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+s.clickScale.outer+")"):i.isScaled?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+s.hoverScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+s.hoverScale.outer+")"):(i.cursorInner.style.transform="translate(-50%, -50%) scale(1)",i.cursorOuter.style.transform="translate(-50%, -50%) scale(1)")}return{init:function(){var e,n,o;window.addEventListener("mousemove",c),document.querySelectorAll(s.clickables.join(",")).forEach(function(e){return function(e){e.style.cursor="none",e.addEventListener("mouseover",function(){i.isScaled=!0,l()}),e.addEventListener("mouseout",function(){i.isScaled=!1,l()})}(e)}),document.addEventListener("mousedown",function(){i.isClicking=!0,l()}),document.addEventListener("mouseup",function(){i.isScaled=!1,i.isClicking=!1,l()}),document.addEventListener("mouseleave",function(e){var r;((r=e).clientY<=0||r.clientX<=0||r.clientX>=window.innerWidth||r.clientY>=window.innerHeight)&&(i.isVisible=!1,a())}),i.isVisible=!1,a(),s.hasRequiredStyles&&(t(s.cursorInnerSelector,e={"pointer-events":"none",position:"fixed","border-radius":"50%",opacity:0,transform:"translate(-50%, -50%)",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out"}),t(s.cursorOuterSelector,e)),n=r(s.color),o=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",n),i.cursorOuter.style.setProperty("background-color",o),i.cursorInner.style.setProperty("width",s.size.inner+"px"),i.cursorInner.style.setProperty("height",s.size.inner+"px"),i.cursorOuter.style.setProperty("width",s.size.outer+"px"),i.cursorOuter.style.setProperty("height",s.size.outer+"px")}}}o.options=n,module.exports=o;
+function e(e,r,t){return(1-t)*e+t*r}function r(e,r){e=e.replace("#","");var t=parseInt(3==e.length?e.slice(0,1).repeat(2):e.slice(0,2),16),o=parseInt(3==e.length?e.slice(1,2).repeat(2):e.slice(2,4),16),n=parseInt(3==e.length?e.slice(2,3).repeat(2):e.slice(4,6),16);return 0===r?"rgba("+t+", "+o+", "+n+", 0)":r?"rgba("+t+", "+o+", "+n+", "+r+")":"rgb("+t+", "+o+", "+n+")"}function t(e,r){var t=document.querySelector(e);for(var o in r)t.style[o]=r[o]}var o={cursorInnerSelector:"#cursor-inner",cursorOuterSelector:"#cursor-outer",hasRequiredStyles:!0,color:"#D3245C",outerAlpha:.3,outerBorderSize:0,size:{inner:8,outer:40},hoverScale:{inner:.75,outer:1.5},clickScale:{inner:1.5,outer:.13},trailingSpeed:.2,clickables:["a",'input[type="text"]','input[type="email"]','input[type="number"]','input[type="submit"]','input[type="image"]',"label[for]","select","textarea","button",".link"]};function n(n){var s=Object.assign({},o,n),i={cursorInner:document.querySelector(s.cursorInnerSelector),cursorOuter:document.querySelector(s.cursorOuterSelector),hasRequiredStyles:s.hasRequiredStyles,targetPos:{x:.5,y:.5},cursorPos:{x:.5,y:.5},endX:window.innerWidth/2,endY:window.innerHeight/2,raf:requestAnimationFrame(u),cursorVisible:!0,isScaled:!1,isClicking:!1};function c(e){var r;i.isVisible=!0,l(),i.targetPos.x=e.clientX,i.targetPos.y=e.clientY,r=e.clientX,i.cursorInner.style.top=e.clientY+"px",i.cursorInner.style.left=r+"px",i.raf||(i.raf=requestAnimationFrame(u))}function u(){if(i.cursorPos.x=e(i.cursorPos.x,i.targetPos.x,s.trailingSpeed),i.cursorPos.y=e(i.cursorPos.y,i.targetPos.y,s.trailingSpeed),i.cursorOuter.style.top=i.cursorPos.y+"px",i.cursorOuter.style.left=i.cursorPos.x+"px",Math.sqrt(Math.pow(i.targetPos.x-i.cursorPos.x,2)+Math.pow(i.targetPos.y-i.cursorPos.y,2))<.001)return window.cancelAnimationFrame(i.raf),void(i.raf=null);i.raf=requestAnimationFrame(u)}function l(){i.isVisible?(i.cursorInner.style.opacity=1,i.cursorOuter.style.opacity=1):(i.cursorInner.style.opacity=0,i.cursorOuter.style.opacity=0)}function a(){i.isClicking?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+s.clickScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+s.clickScale.outer+")"):i.isScaled?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+s.hoverScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+s.hoverScale.outer+")"):(i.cursorInner.style.transform="translate(-50%, -50%) scale(1)",i.cursorOuter.style.transform="translate(-50%, -50%) scale(1)")}return{init:function(){var e,o,n;window.addEventListener("mousemove",c),document.querySelectorAll(s.clickables.join(",")).forEach(function(e){return function(e){e.style.cursor="none",e.addEventListener("mouseover",function(){i.isScaled=!0,a()}),e.addEventListener("mouseout",function(){i.isScaled=!1,a()})}(e)}),document.addEventListener("mousedown",function(){i.isClicking=!0,a()}),document.addEventListener("mouseup",function(){i.isScaled=!1,i.isClicking=!1,a()}),document.addEventListener("mouseleave",function(e){var r;((r=e).clientY<=0||r.clientX<=0||r.clientX>=window.innerWidth||r.clientY>=window.innerHeight)&&(i.isVisible=!1,l())}),i.isVisible=!1,l(),s.hasRequiredStyles&&(t(s.cursorInnerSelector,e={"pointer-events":"none",position:"fixed","border-radius":"50%",opacity:0,transform:"translate(-50%, -50%)",transition:"opacity 0.25s ease-in-out, transform 0.25s ease-in-out"}),t(s.cursorOuterSelector,e)),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",s.outerBorderSize+"px solid "+s.color),o=r(s.color),n=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",o),i.cursorOuter.style.setProperty("background-color",n),i.cursorInner.style.setProperty("width",s.size.inner+"px"),i.cursorInner.style.setProperty("height",s.size.inner+"px"),i.cursorOuter.style.setProperty("width",s.size.outer+"px"),i.cursorOuter.style.setProperty("height",s.size.outer+"px")}}}n.options=o,module.exports=n;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,2 +0,2 @@
-function e(e,r,t){return(1-t)*e+t*r}function r(e,r){e=e.replace("#","");const t=parseInt(3==e.length?e.slice(0,1).repeat(2):e.slice(0,2),16),n=parseInt(3==e.length?e.slice(1,2).repeat(2):e.slice(2,4),16),s=parseInt(3==e.length?e.slice(2,3).repeat(2):e.slice(4,6),16);return r?`rgba(${t}, ${n}, ${s}, ${r})`:`rgb(${t}, ${n}, ${s})`}function t(e,r){var t=document.querySelector(e);for(var n in r)t.style[n]=r[n]}const n={cursorInnerSelector:"#cursor-inner",cursorOuterSelector:"#cursor-outer",hasRequiredStyles:!0,color:"#D3245C",outerAlpha:.3,size:{inner:8,outer:40},hoverScale:{inner:.75,outer:1.5},clickScale:{inner:1.5,outer:.13},trailingSpeed:.2,clickables:["a",'input[type="text"]','input[type="email"]','input[type="number"]','input[type="submit"]','input[type="image"]',"label[for]","select","textarea","button",".link"]};function s(s){let o=Object.assign({},n,s),i={cursorInner:document.querySelector(o.cursorInnerSelector),cursorOuter:document.querySelector(o.cursorOuterSelector),hasRequiredStyles:o.hasRequiredStyles,targetPos:{x:.5,y:.5},cursorPos:{x:.5,y:.5},endX:window.innerWidth/2,endY:window.innerHeight/2,raf:requestAnimationFrame(u),cursorVisible:!0,isScaled:!1,isClicking:!1};function c(e){var r;i.isVisible=!0,l(),i.targetPos.x=e.clientX,i.targetPos.y=e.clientY,r=e.clientX,i.cursorInner.style.top=`${e.clientY}px`,i.cursorInner.style.left=`${r}px`,i.raf||(i.raf=requestAnimationFrame(u))}function u(){if(i.cursorPos.x=e(i.cursorPos.x,i.targetPos.x,o.trailingSpeed),i.cursorPos.y=e(i.cursorPos.y,i.targetPos.y,o.trailingSpeed),i.cursorOuter.style.top=`${i.cursorPos.y}px`,i.cursorOuter.style.left=`${i.cursorPos.x}px`,Math.sqrt(Math.pow(i.targetPos.x-i.cursorPos.x,2)+Math.pow(i.targetPos.y-i.cursorPos.y,2))<.001)return window.cancelAnimationFrame(i.raf),void(i.raf=null);i.raf=requestAnimationFrame(u)}function l(){i.isVisible?(i.cursorInner.style.opacity=1,i.cursorOuter.style.opacity=1):(i.cursorInner.style.opacity=0,i.cursorOuter.style.opacity=0)}function a(){i.isClicking?(i.cursorInner.style.transform=`translate(-50%, -50%) scale(${o.clickScale.inner})`,i.cursorOuter.style.transform=`translate(-50%, -50%) scale(${o.clickScale.outer})`):i.isScaled?(i.cursorInner.style.transform=`translate(-50%, -50%) scale(${o.hoverScale.inner})`,i.cursorOuter.style.transform=`translate(-50%, -50%) scale(${o.hoverScale.outer})`):(i.cursorInner.style.transform="translate(-50%, -50%) scale(1)",i.cursorOuter.style.transform="translate(-50%, -50%) scale(1)")}return{init:function(){window.addEventListener("mousemove",c),document.querySelectorAll(o.clickables.join(",")).forEach(e=>function(e){e.style.cursor="none",e.addEventListener("mouseover",()=>{i.isScaled=!0,a()}),e.addEventListener("mouseout",()=>{i.isScaled=!1,a()})}(e)),document.addEventListener("mousedown",()=>{i.isClicking=!0,a()}),document.addEventListener("mouseup",()=>{i.isScaled=!1,i.isClicking=!1,a()}),document.addEventListener("mouseleave",e=>{var r;((r=e).clientY<=0||r.clientX<=0||r.clientX>=window.innerWidth||r.clientY>=window.innerHeight)&&(i.isVisible=!1,l())}),i.isVisible=!1,l(),o.hasRequiredStyles&&function(){const e={"pointer-events":"none",position:"fixed","border-radius":"50%",opacity:0,transform:"translate(-50%, -50%)",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out"};t(o.cursorInnerSelector,e),t(o.cursorOuterSelector,e)}(),function(){const e=r(o.color),t=r(o.color,o.outerAlpha);i.cursorInner.style.setProperty("background-color",e),i.cursorOuter.style.setProperty("background-color",t)}(),i.cursorInner.style.setProperty("width",`${o.size.inner}px`),i.cursorInner.style.setProperty("height",`${o.size.inner}px`),i.cursorOuter.style.setProperty("width",`${o.size.outer}px`),i.cursorOuter.style.setProperty("height",`${o.size.outer}px`)}}}s.options=n;export{s as default};
+function e(e,r,t){return(1-t)*e+t*r}function r(e,r){e=e.replace("#","");const t=parseInt(3==e.length?e.slice(0,1).repeat(2):e.slice(0,2),16),o=parseInt(3==e.length?e.slice(1,2).repeat(2):e.slice(2,4),16),s=parseInt(3==e.length?e.slice(2,3).repeat(2):e.slice(4,6),16);return 0===r?`rgba(${t}, ${o}, ${s}, 0)`:r?`rgba(${t}, ${o}, ${s}, ${r})`:`rgb(${t}, ${o}, ${s})`}function t(e,r){var t=document.querySelector(e);for(var o in r)t.style[o]=r[o]}const o={cursorInnerSelector:"#cursor-inner",cursorOuterSelector:"#cursor-outer",hasRequiredStyles:!0,color:"#D3245C",outerAlpha:.3,outerBorderSize:0,size:{inner:8,outer:40},hoverScale:{inner:.75,outer:1.5},clickScale:{inner:1.5,outer:.13},trailingSpeed:.2,clickables:["a",'input[type="text"]','input[type="email"]','input[type="number"]','input[type="submit"]','input[type="image"]',"label[for]","select","textarea","button",".link"]};function s(s){let n=Object.assign({},o,s),i={cursorInner:document.querySelector(n.cursorInnerSelector),cursorOuter:document.querySelector(n.cursorOuterSelector),hasRequiredStyles:n.hasRequiredStyles,targetPos:{x:.5,y:.5},cursorPos:{x:.5,y:.5},endX:window.innerWidth/2,endY:window.innerHeight/2,raf:requestAnimationFrame(u),cursorVisible:!0,isScaled:!1,isClicking:!1};function c(e){var r;i.isVisible=!0,l(),i.targetPos.x=e.clientX,i.targetPos.y=e.clientY,r=e.clientX,i.cursorInner.style.top=`${e.clientY}px`,i.cursorInner.style.left=`${r}px`,i.raf||(i.raf=requestAnimationFrame(u))}function u(){if(i.cursorPos.x=e(i.cursorPos.x,i.targetPos.x,n.trailingSpeed),i.cursorPos.y=e(i.cursorPos.y,i.targetPos.y,n.trailingSpeed),i.cursorOuter.style.top=`${i.cursorPos.y}px`,i.cursorOuter.style.left=`${i.cursorPos.x}px`,Math.sqrt(Math.pow(i.targetPos.x-i.cursorPos.x,2)+Math.pow(i.targetPos.y-i.cursorPos.y,2))<.001)return window.cancelAnimationFrame(i.raf),void(i.raf=null);i.raf=requestAnimationFrame(u)}function l(){i.isVisible?(i.cursorInner.style.opacity=1,i.cursorOuter.style.opacity=1):(i.cursorInner.style.opacity=0,i.cursorOuter.style.opacity=0)}function a(){i.isClicking?(i.cursorInner.style.transform=`translate(-50%, -50%) scale(${n.clickScale.inner})`,i.cursorOuter.style.transform=`translate(-50%, -50%) scale(${n.clickScale.outer})`):i.isScaled?(i.cursorInner.style.transform=`translate(-50%, -50%) scale(${n.hoverScale.inner})`,i.cursorOuter.style.transform=`translate(-50%, -50%) scale(${n.hoverScale.outer})`):(i.cursorInner.style.transform="translate(-50%, -50%) scale(1)",i.cursorOuter.style.transform="translate(-50%, -50%) scale(1)")}return{init:function(){window.addEventListener("mousemove",c),document.querySelectorAll(n.clickables.join(",")).forEach(e=>function(e){e.style.cursor="none",e.addEventListener("mouseover",()=>{i.isScaled=!0,a()}),e.addEventListener("mouseout",()=>{i.isScaled=!1,a()})}(e)),document.addEventListener("mousedown",()=>{i.isClicking=!0,a()}),document.addEventListener("mouseup",()=>{i.isScaled=!1,i.isClicking=!1,a()}),document.addEventListener("mouseleave",e=>{var r;((r=e).clientY<=0||r.clientX<=0||r.clientX>=window.innerWidth||r.clientY>=window.innerHeight)&&(i.isVisible=!1,l())}),i.isVisible=!1,l(),n.hasRequiredStyles&&function(){const e={"pointer-events":"none",position:"fixed","border-radius":"50%",opacity:0,transform:"translate(-50%, -50%)",transition:"opacity 0.25s ease-in-out, transform 0.25s ease-in-out"};t(n.cursorInnerSelector,e),t(n.cursorOuterSelector,e)}(),n.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",`${n.outerBorderSize}px solid ${n.color}`),function(){const e=r(n.color),t=r(n.color,n.outerAlpha);i.cursorInner.style.setProperty("background-color",e),i.cursorOuter.style.setProperty("background-color",t)}(),i.cursorInner.style.setProperty("width",`${n.size.inner}px`),i.cursorInner.style.setProperty("height",`${n.size.inner}px`),i.cursorOuter.style.setProperty("width",`${n.size.outer}px`),i.cursorOuter.style.setProperty("height",`${n.size.outer}px`)}}}s.options=o;export{s as default};
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(e||self).animatedCursor=r()}(this,function(){function e(e,r,t){return(1-t)*e+t*r}function r(e,r){e=e.replace("#","");var t=parseInt(3==e.length?e.slice(0,1).repeat(2):e.slice(0,2),16),n=parseInt(3==e.length?e.slice(1,2).repeat(2):e.slice(2,4),16),o=parseInt(3==e.length?e.slice(2,3).repeat(2):e.slice(4,6),16);return r?"rgba("+t+", "+n+", "+o+", "+r+")":"rgb("+t+", "+n+", "+o+")"}function t(e,r){var t=document.querySelector(e);for(var n in r)t.style[n]=r[n]}var n={cursorInnerSelector:"#cursor-inner",cursorOuterSelector:"#cursor-outer",hasRequiredStyles:!0,color:"#D3245C",outerAlpha:.3,size:{inner:8,outer:40},hoverScale:{inner:.75,outer:1.5},clickScale:{inner:1.5,outer:.13},trailingSpeed:.2,clickables:["a",'input[type="text"]','input[type="email"]','input[type="number"]','input[type="submit"]','input[type="image"]',"label[for]","select","textarea","button",".link"]};function o(o){var s=Object.assign({},n,o),i={cursorInner:document.querySelector(s.cursorInnerSelector),cursorOuter:document.querySelector(s.cursorOuterSelector),hasRequiredStyles:s.hasRequiredStyles,targetPos:{x:.5,y:.5},cursorPos:{x:.5,y:.5},endX:window.innerWidth/2,endY:window.innerHeight/2,raf:requestAnimationFrame(u),cursorVisible:!0,isScaled:!1,isClicking:!1};function c(e){var r;i.isVisible=!0,l(),i.targetPos.x=e.clientX,i.targetPos.y=e.clientY,r=e.clientX,i.cursorInner.style.top=e.clientY+"px",i.cursorInner.style.left=r+"px",i.raf||(i.raf=requestAnimationFrame(u))}function u(){if(i.cursorPos.x=e(i.cursorPos.x,i.targetPos.x,s.trailingSpeed),i.cursorPos.y=e(i.cursorPos.y,i.targetPos.y,s.trailingSpeed),i.cursorOuter.style.top=i.cursorPos.y+"px",i.cursorOuter.style.left=i.cursorPos.x+"px",Math.sqrt(Math.pow(i.targetPos.x-i.cursorPos.x,2)+Math.pow(i.targetPos.y-i.cursorPos.y,2))<.001)return window.cancelAnimationFrame(i.raf),void(i.raf=null);i.raf=requestAnimationFrame(u)}function l(){i.isVisible?(i.cursorInner.style.opacity=1,i.cursorOuter.style.opacity=1):(i.cursorInner.style.opacity=0,i.cursorOuter.style.opacity=0)}function a(){i.isClicking?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+s.clickScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+s.clickScale.outer+")"):i.isScaled?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+s.hoverScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+s.hoverScale.outer+")"):(i.cursorInner.style.transform="translate(-50%, -50%) scale(1)",i.cursorOuter.style.transform="translate(-50%, -50%) scale(1)")}return{init:function(){var e,n,o;window.addEventListener("mousemove",c),document.querySelectorAll(s.clickables.join(",")).forEach(function(e){return function(e){e.style.cursor="none",e.addEventListener("mouseover",function(){i.isScaled=!0,a()}),e.addEventListener("mouseout",function(){i.isScaled=!1,a()})}(e)}),document.addEventListener("mousedown",function(){i.isClicking=!0,a()}),document.addEventListener("mouseup",function(){i.isScaled=!1,i.isClicking=!1,a()}),document.addEventListener("mouseleave",function(e){var r;((r=e).clientY<=0||r.clientX<=0||r.clientX>=window.innerWidth||r.clientY>=window.innerHeight)&&(i.isVisible=!1,l())}),i.isVisible=!1,l(),s.hasRequiredStyles&&(t(s.cursorInnerSelector,e={"pointer-events":"none",position:"fixed","border-radius":"50%",opacity:0,transform:"translate(-50%, -50%)",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out"}),t(s.cursorOuterSelector,e)),n=r(s.color),o=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",n),i.cursorOuter.style.setProperty("background-color",o),i.cursorInner.style.setProperty("width",s.size.inner+"px"),i.cursorInner.style.setProperty("height",s.size.inner+"px"),i.cursorOuter.style.setProperty("width",s.size.outer+"px"),i.cursorOuter.style.setProperty("height",s.size.outer+"px")}}}return o.options=n,o});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(e||self).animatedCursor=r()}(this,function(){function e(e,r,t){return(1-t)*e+t*r}function r(e,r){e=e.replace("#","");var t=parseInt(3==e.length?e.slice(0,1).repeat(2):e.slice(0,2),16),n=parseInt(3==e.length?e.slice(1,2).repeat(2):e.slice(2,4),16),o=parseInt(3==e.length?e.slice(2,3).repeat(2):e.slice(4,6),16);return 0===r?"rgba("+t+", "+n+", "+o+", 0)":r?"rgba("+t+", "+n+", "+o+", "+r+")":"rgb("+t+", "+n+", "+o+")"}function t(e,r){var t=document.querySelector(e);for(var n in r)t.style[n]=r[n]}var n={cursorInnerSelector:"#cursor-inner",cursorOuterSelector:"#cursor-outer",hasRequiredStyles:!0,color:"#D3245C",outerAlpha:.3,outerBorderSize:0,size:{inner:8,outer:40},hoverScale:{inner:.75,outer:1.5},clickScale:{inner:1.5,outer:.13},trailingSpeed:.2,clickables:["a",'input[type="text"]','input[type="email"]','input[type="number"]','input[type="submit"]','input[type="image"]',"label[for]","select","textarea","button",".link"]};function o(o){var s=Object.assign({},n,o),i={cursorInner:document.querySelector(s.cursorInnerSelector),cursorOuter:document.querySelector(s.cursorOuterSelector),hasRequiredStyles:s.hasRequiredStyles,targetPos:{x:.5,y:.5},cursorPos:{x:.5,y:.5},endX:window.innerWidth/2,endY:window.innerHeight/2,raf:requestAnimationFrame(u),cursorVisible:!0,isScaled:!1,isClicking:!1};function c(e){var r;i.isVisible=!0,l(),i.targetPos.x=e.clientX,i.targetPos.y=e.clientY,r=e.clientX,i.cursorInner.style.top=e.clientY+"px",i.cursorInner.style.left=r+"px",i.raf||(i.raf=requestAnimationFrame(u))}function u(){if(i.cursorPos.x=e(i.cursorPos.x,i.targetPos.x,s.trailingSpeed),i.cursorPos.y=e(i.cursorPos.y,i.targetPos.y,s.trailingSpeed),i.cursorOuter.style.top=i.cursorPos.y+"px",i.cursorOuter.style.left=i.cursorPos.x+"px",Math.sqrt(Math.pow(i.targetPos.x-i.cursorPos.x,2)+Math.pow(i.targetPos.y-i.cursorPos.y,2))<.001)return window.cancelAnimationFrame(i.raf),void(i.raf=null);i.raf=requestAnimationFrame(u)}function l(){i.isVisible?(i.cursorInner.style.opacity=1,i.cursorOuter.style.opacity=1):(i.cursorInner.style.opacity=0,i.cursorOuter.style.opacity=0)}function a(){i.isClicking?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+s.clickScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+s.clickScale.outer+")"):i.isScaled?(i.cursorInner.style.transform="translate(-50%, -50%) scale("+s.hoverScale.inner+")",i.cursorOuter.style.transform="translate(-50%, -50%) scale("+s.hoverScale.outer+")"):(i.cursorInner.style.transform="translate(-50%, -50%) scale(1)",i.cursorOuter.style.transform="translate(-50%, -50%) scale(1)")}return{init:function(){var e,n,o;window.addEventListener("mousemove",c),document.querySelectorAll(s.clickables.join(",")).forEach(function(e){return function(e){e.style.cursor="none",e.addEventListener("mouseover",function(){i.isScaled=!0,a()}),e.addEventListener("mouseout",function(){i.isScaled=!1,a()})}(e)}),document.addEventListener("mousedown",function(){i.isClicking=!0,a()}),document.addEventListener("mouseup",function(){i.isScaled=!1,i.isClicking=!1,a()}),document.addEventListener("mouseleave",function(e){var r;((r=e).clientY<=0||r.clientX<=0||r.clientX>=window.innerWidth||r.clientY>=window.innerHeight)&&(i.isVisible=!1,l())}),i.isVisible=!1,l(),s.hasRequiredStyles&&(t(s.cursorInnerSelector,e={"pointer-events":"none",position:"fixed","border-radius":"50%",opacity:0,transform:"translate(-50%, -50%)",transition:"opacity 0.25s ease-in-out, transform 0.25s ease-in-out"}),t(s.cursorOuterSelector,e)),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",s.outerBorderSize+"px solid "+s.color),n=r(s.color),o=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",n),i.cursorOuter.style.setProperty("background-color",o),i.cursorInner.style.setProperty("width",s.size.inner+"px"),i.cursorInner.style.setProperty("height",s.size.inner+"px"),i.cursorOuter.style.setProperty("width",s.size.outer+"px"),i.cursorOuter.style.setProperty("height",s.size.outer+"px")}}}return o.options=n,o});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "animated-cursor",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Create a custom, animated cursor in pure JS.",
@@ -35,3 +35,3 @@ "repository": {
     "dev": "npm run demo:start && microbundle watch",
-    "demo:start": "parcel ./demo/src/index.html --dist-dir ./demo/dist",
+    "demo:start": "parcel ./demo/src/*.html --dist-dir ./demo/dist",
     "demo:build": "parcel build ./demo/src/index.html --dist-dir ./demo/dist --public-url ./",
@@ -38,0 +38,0 @@ "demo:deploy": "npm run demo:build && gh-pages -d ./demo/dist",

readme.md

@@ -15,2 +15,3 @@ # Animated Cursor
 5. [🕹️ Usage](#-usage)
+6. [📅 To Dos](#-to-dos)
 
@@ -76,9 +77,10 @@ <br/>
 | `useRequiredStyles`       | `Boolean`         | If lib should add required styles to element.                  | `true`            |
-| `color`                   | `String`          | Hex value of desired color.                                     | `#D3245C`       |
-| `outerAlpha`              | `String`          | Alpha transparency level of outer cursor (0 - 1).               | `0.3`       |
+| `color`                   | `String`          | Hex value of desired color.                                    | `#D3245C`       |
+| `outerAlpha`              | `Number`          | Alpha transparency level of outer cursor (0 - 1).              | `0.3`       |
+| `outerBorderSize`         | `Number`          | Applies a border to the outer cursor.               | `0.3`    |
 | `size`                    | `Object`          | Defines inner `size.inner` and Outer `size.outer` cursor sizes | `size: { inner: 8, outer: 40 }` |
 | `hoverScale`              | `Object`          | Defines amounts inner/outer cursors scale on hover             | `hoverScale: { inner: 0.75, outer: 1.5 }` |
 | `clickScale`              | `Object`          | Defines amounts inner/outer cursors scale on click             | `clickScale: { inner: 1.5, outer: 0.13 }` |
-| `trailingSpeed`           | `Number`          | Speed of outer cursor's lerp'd trailing animation               | `0.2`           |
-| `clickables`              | `Array`           | Array of clickable elements.                                    | `['a', 'input[type="text"]', 'input[type="email"]', 'input[type="number"]', 'input[type="submit"]', 'input[type="image"]', 'label[for]', 'select', 'textarea', 'button', '.link']` |
+| `trailingSpeed`           | `Number`          | Speed of outer cursor's lerp'd trailing animation              | `0.2`           |
+| `clickables`              | `Array`           | Array of clickable elements.                                   d| `['a', 'input[type="text"]', 'input[type="email"]', 'input[type="number"]', 'input[type="submit"]', 'input[type="image"]', 'label[for]', 'select', 'textarea', 'button', '.link']` |
 
@@ -147,12 +149,24 @@ <br>
 // cursor options
-let options = {
-  color: '#fff',
-  outerAlpha: 0.3,
-  trailingSpeed: 0.2,
-  cursorSize: { inner: 8, outer: 38 }
+let acOptions = {
+  color: '#0ff',
+  outerAlpha: 0.25,
+  size: { 
+    inner: 8, 
+    outer: 38 
+  },
+  hoverScale: {
+    inner: 0.5,
+    outer: 1.4
+  },
+  clickScale: {
+    inner: 1.4,
+    outer: 0.1
+  }
 }
 
-const ac = AnimatedCursor(options)
+// Create Cursor instance
+const cursor = AnimatedCursor(acOptions)
 
-ac.init()
+// Init Cursor
+cursor.init()
 ```
@@ -166,2 +180,4 @@
 
+This action would also allow you to modify the transition speed and easings of the cursors scaling (transform) animation.
+
 ```
@@ -177,2 +193,29 @@ #cursor-inner,
 }
-```
+```
+
+### Create a Donut Cursor 
+
+The outerBorderSize option applies a border to the outer cursor. You can leverage this to create a Donut style cursor: 
+
+1. Set `outerAlpha` to `0`s (or almost 0), 
+2. Provide a numeric value for `outerBorderSize`                                                                                                                                                                                                                                                                                                                                                                                                                                                                         lkkklllklwhere the outer cursor is a ring, apply a border to the outer cursor and set the outerAlphd0 (or close to 0)
+
+```
+// cursor options
+let acOptions = {
+  color: '#0ff',
+  outerAlpha: 0,
+  outerBorderSize: 3
+}
+```
+
+<br/>
+
+## 📅 ToDos
+
+- ~~Provide ability to create Donut style cursor~~
+- ~~Add a demo for Donut-style cursor~~
+- ~~Make clickables an option.~~dsss
+- ~~Make hybrid npm module to support `import` and `require`~~.
+- Limit to non touch or non mobile devices.
+- Provide a destory method

No alert changes

Improved metrics

Total package byte prevSize

82685

increased by5.78%

Lines of code

68

increased by4.62%

Number of lines in readme file

216

increased by24.86%

No dependency changes