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 u}from"react";function c(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 f(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 d(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?d(Object(e),!0).forEach(function(r){f(t,r,e[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):d(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,u=!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){u=!0,o=t}finally{try{if(!l&&null!=e.return&&(i=e.return(),Object(i)!==i))return}finally{if(u)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 c(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 c(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)?c(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}");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(!i||!("variant"in i))return t;var s=i.variant,l=i.duration,u=i.delay,c=i.easing,f=void 0===c?"ease-out":c,d=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),v=r*u+e,y="".concat(a,"-").concat(s," ").concat(l,"s ").concat(f," ").concat(v,"s both");t.animations.push(y);var h=Object.entries(d).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},{});return t.style=p(p({},t.style),h),t},{animations:[],style:{}}),o=n.animations,a=n.style;return{style:p({animation:o.join(", ")},a)}},O=function(t){return o.toArray(t).reduce(function(t,r){return a(r)?t+1+O(o.toArray(r.props.children)):t+1},0)},x=function(r,e,n,s,l,u,c){var f="first-to-last"===n?l-1:0;return r.map(function(r){var d=u.current++,m="first-to-last"===n?d:l-d-1,v=m===f?c:void 0;if("string"==typeof r||"number"==typeof r)return[String(r)].map(function(r){var n=w(s,m,e).style;return t(b,{text:r,style:n,onAnimationEnd:v},d)});if(a(r)){var y=o.toArray(r.props.children),h=x(y,e,n,s,l,u,c);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,u=void 0===i?"0%":i,c=t.repeat,f=void 0===c||c,d=r(null),p=m(s(!1),2),v=p[0],y=p[1];return l(function(){var t=d.current;if(t){var r=new IntersectionObserver(function(e){m(e,1)[0].isIntersecting?(y(!0),f||r.unobserve(t)):f&&y(!1)},{threshold:n,root:a,rootMargin:u});return r.observe(t),function(){r.unobserve(t)}}},[d,n,a,u,f]),[d,v]},j=.25,k=.025,S={"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}}},E=function(t,r){return n(function(){return r?r.reduce(function(t,r){return p(p({},t),S[r])},{}):t&&Object.keys(t).length>0?t:{}},[t,r])},N=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];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)")))}),{errors:r,warnings:e}},X=function(t,r){l(function(){var e="TextMotion"===t?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=N(t);return r.push.apply(r,v(n.errors)),e.push.apply(e,v(n.warnings)),{errors:r,warnings:e}}(r):function(t){var r=[],e=[];void 0!==t.children&&null!==t.children||e.push("children prop is empty");var n=N(t);return r.push.apply(r,v(n.errors)),e.push.apply(e,v(n.warnings)),{errors:r,warnings:e}}(r),n=e.errors,o=e.warnings;(n.length>0||o.length>0)&&T(n,o)},[r,t])},T=function(t,r){if(t.length>0)throw console.error("TextMotion validation errors:",t),new Error("TextMotion: ".concat(t.join(", ")));r.length>0&&console.warn("TextMotion validation warnings:",r)},D=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("")}},M=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:D(e,r),text:e}}if(Array.isArray(t))return t.reduce(function(t,e){var n,o=M(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=M(t.props.children,r),o=n.splittedNode,s=n.text;return{splittedNode:[i(t,{children:o})],text:s}}return{splittedNode:[t],text:""}},I=u(function(r){var e=r.children,o=r.as,a=void 0===o?"span":o,i=r.split,s=void 0===i?"character":i,u=r.trigger,c=void 0===u?"scroll":u,f=r.repeat,d=void 0===f||f,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;X("NodeMotion",r);var k=m(A({repeat:d}),2),S=k[0],N=k[1],P="on-load"===c||N;l(function(){P&&(null==w||w())},[P,w]);var T=M(e,s),D=T.splittedNode,I=T.text,Y=function(t,r,e,o,a){return n(function(){var n=O(t);return x(t,r,e,o,n,{current:0},a)},[t,r,e,o,a])}(D,v,h,E(b,g),j);return t(a,{ref:S,className:"node-motion","aria-label":I,children:P?Y:e})}),Y=u(function(r){var e=r.text,n=r.as,o=void 0===n?"span":n,a=r.split,i=void 0===a?"character":a,s=r.trigger,u=void 0===s?"scroll":s,c=r.repeat,f=void 0===c||c,d=r.initialDelay,p=void 0===d?0:d,v=r.animationOrder,y=void 0===v?"first-to-last":v,h=r.motion,g=r.preset,O=r.onAnimationStart,x=r.onAnimationEnd;X("TextMotion",r);var j=m(A({repeat:f}),2),k=j[0],S=j[1],N="on-load"===u||S;l(function(){N&&(null==O||O())},[N,O]);var P=D(e,i),T=E(h,g),M="first-to-last"===y?P.length-1:0,I=P.map(function(r,e){var n="first-to-last"===y?e:P.length-(e+1),o=w(T,n,p).style;return t(b,{text:r,style:o,onAnimationEnd:e===M?x:void 0},e)});return t(o,{ref:k,className:"text-motion","aria-label":e,children:N?I:e})});export{I as NodeMotion,Y as TextMotion};
//# sourceMappingURL=index.esm.js.map