animated-cursor - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

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),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,hideNativeCursor:!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,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,o,n;"undefined"!=typeof window&&("ontouchstart"in window||window.DocumentTouch&&"undefined"!=typeof document&&document instanceof window.DocumentTouch)||"undefined"!=typeof navigator&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)||(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(),e=r(s.color),o=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",e),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"),s.hideNativeCursor&&(document.querySelector("body").style.cursor="none",document.querySelector("html").style.cursor="none"),s.hasRequiredStyles&&(t(s.cursorInnerSelector,n={"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,n)),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",s.outerBorderSize+"px solid "+s.color))}}}n.options=o;export{n 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),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,hideNativeCursor:!0,color:"#D3245C",outerAlpha:.3,outerBorderSize:0,hasOuterBlendMode:!1,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,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.setProperty("transform","translate(-50%, -50%) scale("+s.clickScale.inner+")"),i.cursorOuter.style.setProperty("transform","translate(-50%, -50%) scale("+s.clickScale.outer+")")):i.isScaled?(i.cursorInner.style.setProperty("transform","translate(-50%, -50%) scale("+s.hoverScale.inner+")"),i.cursorOuter.style.setProperty("transform","translate(-50%, -50%) scale("+s.hoverScale.outer+")")):(i.cursorInner.style.setProperty("transform","translate(-50%, -50%) scale(1)"),i.cursorOuter.style.setProperty("transform","translate(-50%, -50%) scale(1)"))}return{init:function(){var e,o,n,u;"undefined"!=typeof window&&("ontouchstart"in window||window.DocumentTouch&&"undefined"!=typeof document&&document instanceof window.DocumentTouch)||"undefined"!=typeof navigator&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)||(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(),e=r(s.color),o=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",e),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"),s.hideNativeCursor&&(document.querySelector("body").style.cursor="none",document.querySelector("html").style.cursor="none"),s.hasRequiredStyles&&(t(s.cursorInnerSelector,n={"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,n)),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",s.outerBorderSize+"px solid "+s.color),s.hasOuterBlendMode>0&&(u=i.cursorOuter.parentElement)&&u.style.setProperty("mix-blend-mode","exclusion"))}}}n.options=o;export{n 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),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,hideNativeCursor:!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,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,o,n;"undefined"!=typeof window&&("ontouchstart"in window||window.DocumentTouch&&"undefined"!=typeof document&&document instanceof window.DocumentTouch)||"undefined"!=typeof navigator&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)||(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(),e=r(s.color),o=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",e),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"),s.hideNativeCursor&&(document.querySelector("body").style.cursor="none",document.querySelector("html").style.cursor="none"),s.hasRequiredStyles&&(t(s.cursorInnerSelector,n={"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,n)),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",s.outerBorderSize+"px solid "+s.color))}}}n.options=o,module.exports=n;
+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,hideNativeCursor:!0,color:"#D3245C",outerAlpha:.3,outerBorderSize:0,hasOuterBlendMode:!1,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,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.setProperty("transform","translate(-50%, -50%) scale("+s.clickScale.inner+")"),i.cursorOuter.style.setProperty("transform","translate(-50%, -50%) scale("+s.clickScale.outer+")")):i.isScaled?(i.cursorInner.style.setProperty("transform","translate(-50%, -50%) scale("+s.hoverScale.inner+")"),i.cursorOuter.style.setProperty("transform","translate(-50%, -50%) scale("+s.hoverScale.outer+")")):(i.cursorInner.style.setProperty("transform","translate(-50%, -50%) scale(1)"),i.cursorOuter.style.setProperty("transform","translate(-50%, -50%) scale(1)"))}return{init:function(){var e,o,n,u;"undefined"!=typeof window&&("ontouchstart"in window||window.DocumentTouch&&"undefined"!=typeof document&&document instanceof window.DocumentTouch)||"undefined"!=typeof navigator&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)||(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(),e=r(s.color),o=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",e),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"),s.hideNativeCursor&&(document.querySelector("body").style.cursor="none",document.querySelector("html").style.cursor="none"),s.hasRequiredStyles&&(t(s.cursorInnerSelector,n={"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,n)),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",s.outerBorderSize+"px solid "+s.color),s.hasOuterBlendMode>0&&(u=i.cursorOuter.parentElement)&&u.style.setProperty("mix-blend-mode","exclusion"))}}}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),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]}const o={cursorInnerSelector:"#cursor-inner",cursorOuterSelector:"#cursor-outer",hasRequiredStyles:!0,hideNativeCursor:!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){let 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,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(){"undefined"!=typeof window&&("ontouchstart"in window||window.DocumentTouch&&"undefined"!=typeof document&&document instanceof window.DocumentTouch)||"undefined"!=typeof navigator&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)||(window.addEventListener("mousemove",c),document.querySelectorAll(s.clickables.join(",")).forEach(e=>function(e){e.style.cursor="none",e.addEventListener("mouseover",()=>{i.isScaled=!0,l()}),e.addEventListener("mouseout",()=>{i.isScaled=!1,l()})}(e)),document.addEventListener("mousedown",()=>{i.isClicking=!0,l()}),document.addEventListener("mouseup",()=>{i.isScaled=!1,i.isClicking=!1,l()}),document.addEventListener("mouseleave",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(),function(){const e=r(s.color),t=r(s.color,s.outerAlpha);i.cursorInner.style.setProperty("background-color",e),i.cursorOuter.style.setProperty("background-color",t)}(),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`),s.hideNativeCursor&&(document.querySelector("body").style.cursor="none",document.querySelector("html").style.cursor="none"),s.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(s.cursorInnerSelector,e),t(s.cursorOuterSelector,e)}(),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",`${s.outerBorderSize}px solid ${s.color}`))}}}n.options=o;export{n 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),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]}const o={cursorInnerSelector:"#cursor-inner",cursorOuterSelector:"#cursor-outer",hasRequiredStyles:!0,hideNativeCursor:!0,color:"#D3245C",outerAlpha:.3,outerBorderSize:0,hasOuterBlendMode:!1,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){let 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.setProperty("transform",`translate(-50%, -50%) scale(${s.clickScale.inner})`),i.cursorOuter.style.setProperty("transform",`translate(-50%, -50%) scale(${s.clickScale.outer})`)):i.isScaled?(i.cursorInner.style.setProperty("transform",`translate(-50%, -50%) scale(${s.hoverScale.inner})`),i.cursorOuter.style.setProperty("transform",`translate(-50%, -50%) scale(${s.hoverScale.outer})`)):(i.cursorInner.style.setProperty("transform","translate(-50%, -50%) scale(1)"),i.cursorOuter.style.setProperty("transform","translate(-50%, -50%) scale(1)"))}return{init:function(){"undefined"!=typeof window&&("ontouchstart"in window||window.DocumentTouch&&"undefined"!=typeof document&&document instanceof window.DocumentTouch)||"undefined"!=typeof navigator&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)||(window.addEventListener("mousemove",c),document.querySelectorAll(s.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(),function(){const e=r(s.color),t=r(s.color,s.outerAlpha);i.cursorInner.style.setProperty("background-color",e),i.cursorOuter.style.setProperty("background-color",t)}(),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`),s.hideNativeCursor&&(document.querySelector("body").style.cursor="none",document.querySelector("html").style.cursor="none"),s.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(s.cursorInnerSelector,e),t(s.cursorOuterSelector,e)}(),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",`${s.outerBorderSize}px solid ${s.color}`),s.hasOuterBlendMode>0&&function(){const e=i.cursorOuter.parentElement;e&&e.style.setProperty("mix-blend-mode","exclusion")}())}}}n.options=o;export{n 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),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,hideNativeCursor:!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,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,o,n;"undefined"!=typeof window&&("ontouchstart"in window||window.DocumentTouch&&"undefined"!=typeof document&&document instanceof window.DocumentTouch)||"undefined"!=typeof navigator&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)||(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(),e=r(s.color),o=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",e),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"),s.hideNativeCursor&&(document.querySelector("body").style.cursor="none",document.querySelector("html").style.cursor="none"),s.hasRequiredStyles&&(t(s.cursorInnerSelector,n={"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,n)),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",s.outerBorderSize+"px solid "+s.color))}}}return n.options=o,n});
+!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),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,hideNativeCursor:!0,color:"#D3245C",outerAlpha:.3,outerBorderSize:0,hasOuterBlendMode:!1,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(c),cursorVisible:!0,isScaled:!1,isClicking:!1};function u(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(c))}function c(){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(c)}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.setProperty("transform","translate(-50%, -50%) scale("+s.clickScale.inner+")"),i.cursorOuter.style.setProperty("transform","translate(-50%, -50%) scale("+s.clickScale.outer+")")):i.isScaled?(i.cursorInner.style.setProperty("transform","translate(-50%, -50%) scale("+s.hoverScale.inner+")"),i.cursorOuter.style.setProperty("transform","translate(-50%, -50%) scale("+s.hoverScale.outer+")")):(i.cursorInner.style.setProperty("transform","translate(-50%, -50%) scale(1)"),i.cursorOuter.style.setProperty("transform","translate(-50%, -50%) scale(1)"))}return{init:function(){var e,o,n,c;"undefined"!=typeof window&&("ontouchstart"in window||window.DocumentTouch&&"undefined"!=typeof document&&document instanceof window.DocumentTouch)||"undefined"!=typeof navigator&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)||(window.addEventListener("mousemove",u),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(),e=r(s.color),o=r(s.color,s.outerAlpha),i.cursorInner.style.setProperty("background-color",e),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"),s.hideNativeCursor&&(document.querySelector("body").style.cursor="none",document.querySelector("html").style.cursor="none"),s.hasRequiredStyles&&(t(s.cursorInnerSelector,n={"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,n)),s.outerBorderSize>0&&i.cursorOuter.style.setProperty("border",s.outerBorderSize+"px solid "+s.color),s.hasOuterBlendMode>0&&(c=i.cursorOuter.parentElement)&&c.style.setProperty("mix-blend-mode","exclusion"))}}}return n.options=o,n});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "animated-cursor",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Create a custom, animated cursor in pure JS.",
@@ -5,0 +5,0 @@ "repository": {

readme.md

@@ -15,3 +15,5 @@ # Animated Cursor
 5. [🕹️ Usage](#-usage)
-6. [📅 To Dos](#-to-dos)
+6. [🎨 Cursor Types](#-cursor-types)
+7. [📓 Notes](#-notes)
+8. [📅 To Dos](#-to-dos)
 
@@ -31,3 +33,3 @@ <br/>
 
-### Cursor is comprised of 
+### More the specifically, the cursor is made of
 - An inner dot (`cursorInner`)
@@ -37,2 +39,4 @@ - An outer, outlining circle (`cursorOuter`), with slight opacity based on the inner cursor's color
 - An inversely scaling effect between the inner and outer cursor parts on click or link hover
+- Outer cursor can also be just a border to create a Donut style cursor.
+- Outer cursor can have a blend-mode applied for an exlusion effect over hovered text / elements.
 
@@ -83,2 +87,3 @@ <br>
 | `outerBorderSize`         | `Number`          | Applies a border to the outer cursor.               | `0.3`    |
+| `hasOuterBlendMode`       | `Boolean`         | Applies a blend-mode to the outer cursor                       | `0.3`    |
 | `size`                    | `Object`          | Defines inner `size.inner` and Outer `size.outer` cursor sizes | `size: { inner: 8, outer: 40 }` |
@@ -189,2 +194,6 @@ | `hoverScale`              | `Object`          | Defines amounts inner/outer cursors scale on hover             | `hoverScale: { inner: 0.75, outer: 1.5 }` |
 
+
+## 🎨 Cursor Types
+
+You can use the options to create various cursor types / styles. (At some point I might organize cursor types as presets.)
 ### Create a Donut Cursor 
@@ -198,4 +207,4 @@
 ```
-// cursor options
-let acOptions = {
+// Options to create a Donut cursor
+let donutOpts = {
   color: '#0ff',
@@ -211,3 +220,26 @@ outerAlpha: 0,
 
+### Create a Blend-mode Cursor 
 
+You can create a neat Blend-mode cursor that filters the hovered text through the cursor. This probably works best with White / Black cursors.
+
+1. Set `hasOuterBlendMode: true`, 
+2. Set `outerAlpha` to `1` or close to `1`.
+3. Probs use a cursor color like `#fff` or `#000`.  
+
+Note, make sure your inner and outer cursor elements are wrapped inside a parent (as show in the examples) as the `parentElement` of outer cursor is targets for the `blend-mode` filter.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     lkkklllklwhere the outer cursor is a ring, apply a border to the outer cursor and set the outerAlphd0 (or close to 0)
+
+```
+// Options to create a blend-mode cursor.
+// Cursor is white, page background-color is dark.
+ let blendOpts = {
+    hasOuterBlendMode: true,
+    color: '#fff',
+    outerAlpha: 1
+ }
+```
+
+[Check out the Blend-mode Cursor Demo](https://stephenscaff.github.io/animated-cursor/blend.html)
+
+## 📓 Notes
+
 ### useRequiredStyles
@@ -232,2 +264,3 @@
 ```
+<br/>
 
@@ -241,3 +274,3 @@ ###  hideNativeCursor
 
-## 📅 ToDos
+## 📅 To Dos
 
@@ -250,2 +283,3 @@ - ~~Provide ability to create Donut style cursor~~
 - ~~Limit to non touch or non mobile devices.~~
-- Provide a destory method
+- Provide a destory method
+- Maybe make different cursor types available as presets?

No alert changes

Improved metrics

Total package byte prevSize

96202

increased by7.27%

Number of package files

11

increased by10%

Lines of code

77

increased by5.48%

Number of lines in readme file

275

increased by14.11%

No dependency changes