react-textmotion/dist/index.esm.js

Lightweight yet powerful library that provides variable animation effects for React applications.

import{jsx as t}from"react/jsx-runtime";import{useRef as r,useCallback as e,useMemo as n,Children as o,isValidElement as a,cloneElement as i,useState as s,useEffect as l,memo as c}from"react";function u(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,n=Array(r);e<r;e++)n[e]=t[e];return n}function d(t,r,e){return(r=function(t){var r=function(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,r);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==typeof r?r:r+""}(r))in t?Object.defineProperty(t,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[r]=e,t}function f(t,r){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);r&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})),e.push.apply(e,n)}return e}function p(t){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{};r%2?f(Object(e),!0).forEach(function(r){d(t,r,e[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):f(Object(e)).forEach(function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})}return t}function m(t,r){return function(t){if(Array.isArray(t))return t}(t)||function(t,r){var e=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=e){var n,o,a,i,s=[],l=!0,c=!1;try{if(a=(e=e.call(t)).next,0===r){if(Object(e)!==e)return;l=!1}else for(;!(l=(n=a.call(e)).done)&&(s.push(n.value),s.length!==r);l=!0);}catch(t){c=!0,o=t}finally{try{if(!l&&null!=e.return&&(i=e.return(),Object(i)!==i))return}finally{if(c)throw o}}return s}}(t,r)||y(t,r)||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 v(t){return function(t){if(Array.isArray(t))return u(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||y(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(t,r){if(t){if("string"==typeof t)return u(t,r);var e={}.toString.call(t).slice(8,-1);return"Object"===e&&t.constructor&&(e=t.constructor.name),"Map"===e||"Set"===e?Array.from(t):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?u(t,r):void 0}}function h(t,r){void 0===r&&(r={});var e=r.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}h("@keyframes fade-in{0%{opacity:var(--fade-from,0)}to{opacity:var(--fade-to,1)}}@keyframes fade-out{0%{opacity:var(--fade-from,1)}to{opacity:var(--fade-to,0)}}@keyframes slide-up{0%{transform:translateY(var(--slide-distance,.4rem))}to{transform:translateY(0)}}@keyframes slide-down{0%{transform:translateY(var(--slide-distance,-.4rem))}to{transform:translateY(0)}}@keyframes slide-right{0%{transform:translateX(var(--slide-distance,-.4rem))}to{transform:translateX(0)}}@keyframes slide-left{0%{transform:translateX(var(--slide-distance,.4rem))}to{transform:translateX(0)}}@keyframes scale-in{0%{transform:scale(var(--scale-from,.9))}to{transform:scale(var(--scale-to,1))}}@keyframes scale-out{0%{transform:scale(var(--scale-from,1))}to{transform:scale(var(--scale-to,.9))}}@keyframes rotate-clockwise{0%{transform:var(--rotate-from,rotate(0deg))}to{transform:var(--rotate-to,rotate(1turn))}}@keyframes rotate-counterclockwise{0%{transform:var(--rotate-from,rotate(1turn))}to{transform:var(--rotate-to,rotate(0deg))}}@keyframes bounce-in{0%{transform:scale(var(--bounce-from,.5))}50%{transform:scale(var(--bounce-mid,1.05))}to{transform:scale(var(--bounce-to,1))}}@keyframes bounce-out{0%{transform:scale(var(--bounce-from,1))}50%{transform:scale(var(--bounce-mid,1.05))}to{transform:scale(var(--bounce-to,.5))}}@keyframes elastic-in{0%{transform:scaleX(var(--elastic-from,0))}60%{transform:scaleX(var(--elastic-mid1,1.2))}80%{transform:scaleX(var(--elastic-mid2,.9))}to{transform:scaleX(var(--elastic-to,1))}}@keyframes elastic-out{0%{transform:scaleX(var(--elastic-from,1))}20%{transform:scaleX(var(--elastic-mid1,.9))}40%{transform:scaleX(var(--elastic-mid2,1.2))}to{transform:scaleX(var(--elastic-to,0))}}@keyframes flip-in{0%{transform:perspective(40rem) rotateY(var(--flip-from,90deg))}to{transform:perspective(40rem) rotateY(var(--flip-to,0deg))}}@keyframes flip-out{0%{transform:perspective(40rem) rotateY(var(--flip-from,0deg))}to{transform:perspective(40rem) rotateY(var(--flip-to,90deg))}}");h(".node-motion span,.text-motion span{display:inline-block;white-space:pre}.node-motion-inanimate,.text-motion-inanimate{visibility:hidden}");var b=function(n){var o=n.text,a=n.style,i=n.onAnimationEnd,s=r(!1),l=e(function(){s.current||(s.current=!0,null==i||i())},[i]);return"\n"===o?t("br",{}):t("span",{style:a,"aria-hidden":"true",onAnimationEnd:l,children:o})},g=["variant","duration","delay","easing"],w=function(t,r,e){var n=Object.entries(t).reduce(function(t,n){var o=m(n,2),a=o[0],i=o[1];if(null==i)return t;if("custom"===a){var s=i.name,l=i.duration,c=i.delay,u=i.easing,d=void 0===u?"ease-out":u,f=r*c+e,v="".concat(s," ").concat(l,"s ").concat(d," ").concat(f,"s both");t.animations.push(v)}else if("variant"in i){var y=i.variant,h=i.duration,b=i.delay,w=i.easing,O=void 0===w?"ease-out":w,x=function(t,r){if(null==t)return{};var e,n,o=function(t,r){if(null==t)return{};var e={};for(var n in t)if({}.hasOwnProperty.call(t,n)){if(-1!==r.indexOf(n))continue;e[n]=t[n]}return e}(t,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(n=0;n<a.length;n++)e=a[n],-1===r.indexOf(e)&&{}.propertyIsEnumerable.call(t,e)&&(o[e]=t[e])}return o}(i,g),A=r*b+e,j="".concat(a,"-").concat(y," ").concat(h,"s ").concat(O," ").concat(A,"s both");t.animations.push(j);var k=Object.entries(x).reduce(function(t,r){var e=m(r,2),n=e[0],o=e[1];return null!=o&&(t["--".concat(a,"-").concat(n)]=o),t},{});t.style=p(p({},t.style),k)}return t},{animations:[],style:{}}),o=n.animations,a=n.style;return{style:p({animation:o.join(", ")},a)}},O=function(t){var r=0;return o.forEach(t,function(t){r+=1,a(t)&&(r+=O(o.toArray(t.props.children)))}),r},x=function(r,e,n,s,l,c,u){return r.map(function(r){var d=c.current++,f="first-to-last"===n?d:l-d-1,m=f===l-1?u:void 0;if("string"==typeof r||"number"==typeof r){var v=w(s,f,e).style;return t(b,{text:String(r),style:v,onAnimationEnd:m},d)}if(a(r)){var y=o.toArray(r.props.children),h=x(y,e,n,s,l,c,u);return i(r,p(p({},r.props),{},{children:h,key:d}))}return r})},A=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.threshold,n=void 0===e?0:e,o=t.root,a=void 0===o?null:o,i=t.rootMargin,c=void 0===i?"0%":i,u=t.repeat,d=void 0===u||u,f=r(null),p=m(s(!1),2),v=p[0],y=p[1];return l(function(){var t=f.current;if(t){var r=new IntersectionObserver(function(e){var n=m(e,1)[0].isIntersecting;y(n),n&&!d&&r.unobserve(t)},{threshold:n,root:a,rootMargin:c});return r.observe(t),function(){r.disconnect()}}},[n,a,c,d]),[f,v]},j=.25,k=.025,E={"fade-in":{fade:{variant:"in",duration:j,delay:k}},"fade-out":{fade:{variant:"out",duration:j,delay:k}},"slide-up":{slide:{variant:"up",duration:j,delay:k}},"slide-down":{slide:{variant:"down",duration:j,delay:k}},"slide-left":{slide:{variant:"left",duration:j,delay:k}},"slide-right":{slide:{variant:"right",duration:j,delay:k}},"scale-in":{scale:{variant:"in",duration:j,delay:k}},"scale-out":{scale:{variant:"out",duration:j,delay:k}},"rotate-clockwise":{rotate:{variant:"clockwise",duration:j,delay:k}},"rotate-counterclockwise":{rotate:{variant:"counterclockwise",duration:j,delay:k}},"bounce-in":{bounce:{variant:"in",duration:j,delay:k}},"bounce-out":{bounce:{variant:"out",duration:j,delay:k}},"elastic-in":{elastic:{variant:"in",duration:j,delay:k}},"elastic-out":{elastic:{variant:"out",duration:j,delay:k}},"flip-in":{flip:{variant:"in",duration:j,delay:k}},"flip-out":{flip:{variant:"out",duration:j,delay:k}}},N=function(t){var r=t.motion,e=t.preset;return n(function(){return e?e.reduce(function(t,r){return p(p({},t),E[r])},{}):r&&Object.keys(r).length>0?r:{}},[r,e])},S=function(t){var r=[],e=[];if(void 0===t.split||["character","word","line"].includes(t.split)||r.push("split prop must be one of: character, word, line"),void 0===t.trigger||["on-load","scroll"].includes(t.trigger)||r.push("trigger prop must be one of: on-load, scroll"),void 0!==t.repeat&&"boolean"!=typeof t.repeat&&r.push("repeat prop must be a boolean"),void 0!==t.initialDelay&&t.initialDelay<0&&r.push("initialDelay prop must be non-negative"),void 0===t.animationOrder||["first-to-last","last-to-first"].includes(t.animationOrder)||r.push("animationOrder prop must be one of: first-to-last, last-to-first"),void 0!==t.motion){var n=P(t.motion);r.push.apply(r,v(n.errors)),e.push.apply(e,v(n.warnings))}return void 0===t.preset||Array.isArray(t.preset)||r.push("preset prop must be an array"),void 0!==t.onAnimationStart&&"function"!=typeof t.onAnimationStart&&r.push("onAnimationStart prop must be a function"),void 0!==t.onAnimationEnd&&"function"!=typeof t.onAnimationEnd&&r.push("onAnimationEnd prop must be a function"),{errors:r,warnings:e}},P=function(t){var r=[],e=[];return Object.entries(t).forEach(function(t){var n=m(t,2),o=n[0],a=n[1];if(null!=a&&(a.duration<=0&&r.push("".concat(o,".duration must be greater than 0")),a.delay<0&&r.push("".concat(o,".delay must be non-negative")),a.duration>10&&e.push("".concat(o,".duration is very long (").concat(a.duration,"s)")),"custom"===o)){var i=a;"string"==typeof i.name&&""!==i.name.trim()||r.push("custom.name must be a non-empty string")}}),{errors:r,warnings:e}},D=function(t){var r=t.componentName,e=t.props;l(function(){var t="TextMotion"===r?function(t){var r=[],e=[];void 0===t.text||null===t.text?r.push("text prop is required"):"string"!=typeof t.text?r.push("text prop must be a string"):""===t.text.trim()&&e.push("text prop is empty or contains only whitespace");var n=S(t);return r.push.apply(r,v(n.errors)),e.push.apply(e,v(n.warnings)),{errors:r,warnings:e}}(e):function(t){var r=[],e=[];void 0!==t.children&&null!==t.children||e.push("children prop is empty");var n=S(t);return r.push.apply(r,v(n.errors)),e.push.apply(e,v(n.warnings)),{errors:r,warnings:e}}(e),n=t.errors,o=t.warnings;(n.length>0||o.length>0)&&X(r,n,o)},[r,e])},X=function(t,r,e){if(r.length>0)throw console.error("".concat(t," validation errors:"),r),new Error("".concat(t,": ").concat(r.join(", ")));e.length>0&&console.warn("".concat(t," validation warnings:"),e)},M=function(t,r){switch(r){case"word":return t.split(/(\s+)/).filter(Boolean);case"line":return t.split(/(\n)/).filter(Boolean);default:return t.split("")}},T=function(t,r){if(null==t||"boolean"==typeof t)return{splittedNode:[],text:""};if("string"==typeof t||"number"==typeof t){var e=String(t);return{splittedNode:M(e,r),text:e}}if(Array.isArray(t))return t.reduce(function(t,e){var n,o=T(e,r),a=o.splittedNode,i=o.text;return(n=t.splittedNode).push.apply(n,v(a)),t.text+=i,t},{splittedNode:[],text:""});if(a(t)){var n=T(t.props.children,r),o=n.splittedNode,s=n.text;return{splittedNode:[i(t,{children:o})],text:s}}return{splittedNode:[t],text:""}},I=c(function(r){var e=r.children,o=r.as,a=void 0===o?"span":o,i=r.split,s=void 0===i?"character":i,c=r.trigger,u=void 0===c?"scroll":c,d=r.repeat,f=void 0===d||d,p=r.initialDelay,v=void 0===p?0:p,y=r.animationOrder,h=void 0===y?"first-to-last":y,b=r.motion,g=r.preset,w=r.onAnimationStart,j=r.onAnimationEnd;D({componentName:"NodeMotion",props:r});var k=m(A({repeat:f}),2),E=k[0],S=k[1],P="on-load"===u||S,X=P?T(e,s):{splittedNode:[e],text:"NodeMotion"},M=X.splittedNode,I=X.text,Y=function(t){var r=t.splittedNode,e=t.initialDelay,o=t.animationOrder,a=t.resolvedMotion,i=t.onAnimationEnd;return n(function(){var t=O(r);return x(r,e,o,a,t,{current:0},i)},[r,e,o,a,i])}({splittedNode:M,initialDelay:v,animationOrder:h,resolvedMotion:N({motion:b,preset:g}),onAnimationEnd:j});return l(function(){P&&(null==w||w())},[P,w]),t(a,P?{ref:E,className:"node-motion","aria-label":I,children:Y}:{ref:E,className:"node-motion-inanimate","aria-label":I,children:e})}),Y=c(function(r){var e=r.text,o=r.as,a=void 0===o?"span":o,i=r.split,s=void 0===i?"character":i,c=r.trigger,u=void 0===c?"scroll":c,d=r.repeat,f=void 0===d||d,p=r.initialDelay,v=void 0===p?0:p,y=r.animationOrder,h=void 0===y?"first-to-last":y,g=r.motion,O=r.preset,x=r.onAnimationStart,j=r.onAnimationEnd;D({componentName:"TextMotion",props:r});var k=m(A({repeat:f}),2),E=k[0],S=k[1],P="on-load"===u||S,X=function(r){var e=r.splittedText,o=r.initialDelay,a=r.animationOrder,i=r.resolvedMotion,s=r.onAnimationEnd;return n(function(){return e.map(function(r,n){var l="first-to-last"===a?n:e.length-(n+1),c=l===e.length-1?s:void 0,u=w(i,l,o).style;return t(b,{text:r,style:u,onAnimationEnd:c},n)})},[e,a,o,i,s])}({splittedText:P?M(e,s):[e],initialDelay:v,animationOrder:h,resolvedMotion:N({motion:g,preset:O}),onAnimationEnd:j});return l(function(){P&&(null==x||x())},[P,x]),t(a,P?{ref:E,className:"text-motion","aria-label":e,children:X}:{ref:E,className:"text-motion-inanimate","aria-label":e,children:e})});export{I as NodeMotion,Y as TextMotion};
//# sourceMappingURL=index.esm.js.map