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{useMemo as r,Children as e,isValidElement as n,cloneElement as a,useRef as o,useState as i,useEffect as s,memo as l}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 u(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 d(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){u(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 p(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,a,o,i,s=[],l=!0,c=!1;try{if(o=(e=e.call(t)).next,0===r){if(Object(e)!==e)return;l=!1}else for(;!(l=(n=o.call(e)).done)&&(s.push(n.value),s.length!==r);l=!0);}catch(t){c=!0,a=t}finally{try{if(!l&&null!=e.return&&(i=e.return(),Object(i)!==i))return}finally{if(c)throw a}}return s}}(t,r)||v(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 m(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)||v(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 v(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 y(t,r){void 0===r&&(r={});var e=r.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}y("@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))}}");y(".node-motion span,.text-motion span{display:inline-block;white-space:pre}");var h=function(r){var e=r.text,n=r.style;return"\n"===e?t("br",{}):t("span",{style:n,"aria-hidden":"true",children:e})},b=["variant","duration","delay","easing"],g=function(t,r,e){var n=Object.entries(t).reduce(function(t,n){var a=p(n,2),o=a[0],i=a[1];if(!i||!("variant"in i))return t;var s=i.variant,l=i.duration,c=i.delay,u=i.easing,f=void 0===u?"ease-out":u,m=function(t,r){if(null==t)return{};var e,n,a=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 o=Object.getOwnPropertySymbols(t);for(n=0;n<o.length;n++)e=o[n],-1===r.indexOf(e)&&{}.propertyIsEnumerable.call(t,e)&&(a[e]=t[e])}return a}(i,b),v=r*c+e,y="".concat(o,"-").concat(s," ").concat(l,"s ").concat(f," ").concat(v,"s both");t.animations.push(y);var h=Object.entries(m).reduce(function(t,r){var e=p(r,2),n=e[0],a=e[1];return null!=a&&(t["--".concat(o,"-").concat(n)]=a),t},{});return t.style=d(d({},t.style),h),t},{animations:[],style:{}}),a=n.animations,o=n.style;return{style:d({animation:a.join(", ")},o)}},w=function(t){return e.toArray(t).reduce(function(t,r){return n(r)?t+1+w(e.toArray(r.props.children)):t+1},0)},O=function(r,o,i,s,l,c){return r.map(function(r){var u=c.current++,f="last-to-first"===i?l-1-u:u;if("string"==typeof r||"number"==typeof r)return[String(r)].map(function(r){var e=g(s,f,o).style;return t(h,{text:r,style:e},u)});if(n(r)){var p=e.toArray(r.props.children),m=O(p,o,i,s,l,c);return a(r,d(d({},r.props),{},{children:m,key:u}))}return r})},x=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=t.threshold,e=void 0===r?0:r,n=t.root,a=void 0===n?null:n,l=t.rootMargin,c=void 0===l?"0%":l,u=t.repeat,f=void 0===u||u,d=o(null),m=p(i(!1),2),v=m[0],y=m[1];return s(function(){var t=d.current;if(t){var r=new IntersectionObserver(function(e){p(e,1)[0].isIntersecting?(y(!0),f||r.unobserve(t)):f&&y(!1)},{threshold:e,root:a,rootMargin:c});return r.observe(t),function(){r.unobserve(t)}}},[d,e,a,c,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}}},A=function(t,e){return r(function(){return e?e.reduce(function(t,r){return d(d({},t),S[r])},{}):t&&Object.keys(t).length>0?t:{}},[t,e])},N=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("")}},P=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:N(e,r),text:e}}if(Array.isArray(t))return t.reduce(function(t,e){var n,a=P(e,r),o=a.splittedNode,i=a.text;return(n=t.splittedNode).push.apply(n,m(o)),t.text+=i,t},{splittedNode:[],text:""});if(n(t)){var o=P(t.props.children,r),i=o.splittedNode,s=o.text;return{splittedNode:[a(t,{children:i})],text:s}}return{splittedNode:[t],text:""}},X=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)},E=function(t){var r=[],e=[];return Object.entries(t).forEach(function(t){var n=p(t,2),a=n[0],o=n[1];o&&(o.duration<=0&&r.push("".concat(a,".duration must be greater than 0")),o.delay<0&&r.push("".concat(a,".delay must be non-negative")),o.duration>10&&e.push("".concat(a,".duration is very long (").concat(o.duration,"s)")))}),{errors:r,warnings:e}},T=l(function(e){var n=e.as,a=void 0===n?"span":n,o=e.children,i=e.split,s=void 0===i?"character":i,l=e.trigger,c=void 0===l?"scroll":l,u=e.repeat,f=void 0===u||u,d=e.initialDelay,v=void 0===d?0:d,y=e.animationOrder,h=void 0===y?"first-to-last":y,b=e.motion,g=e.preset,j=function(t){var r=[],e=[];if(void 0!==t.children&&null!==t.children||e.push("children prop is empty"),void 0===t.split||["character","word"].includes(t.split)||r.push("split prop must be one of: character, word"),void 0!==t.motion){var n=E(t.motion);r.push.apply(r,m(n.errors)),e.push.apply(e,m(n.warnings))}return{errors:r,warnings:e}}(e),k=j.errors,S=j.warnings;X(k,S);var N=p(x({repeat:f}),2),T=N[0],I=N[1],Y="on-load"===c||I,D=P(o,s),M=D.splittedNode,C=D.text,B=function(t,e,n,a){return r(function(){var r=w(t);return O(t,e,n,a,r,{current:0})},[t,e,n,a])}(M,v,h,A(b,g));return t(a,{ref:T,className:"node-motion","aria-label":C,children:Y?B:o})}),I=l(function(r){var e=r.as,n=void 0===e?"span":e,a=r.text,o=r.split,i=void 0===o?"character":o,s=r.trigger,l=void 0===s?"scroll":s,c=r.repeat,u=void 0===c||c,f=r.initialDelay,d=void 0===f?0:f,v=r.animationOrder,y=void 0===v?"first-to-last":v,b=r.motion,w=r.preset,O=function(t){var r=[],e=[];if(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"),void 0===t.split||["character","word","line"].includes(t.split)||r.push("split prop must be one of: character, word, line"),void 0!==t.motion){var n=E(t.motion);r.push.apply(r,m(n.errors)),e.push.apply(e,m(n.warnings))}return{errors:r,warnings:e}}(r),j=O.errors,k=O.warnings;X(j,k);var S=p(x({repeat:u}),2),P=S[0],T=S[1],I="on-load"===l||T,Y=N(a,i),D=A(b,w),M=Y.map(function(r,e){var n="first-to-last"===y?e:Y.length-(e+1),a=g(D,n,d).style;return t(h,{text:r,style:a},e)});return t(n,{ref:P,className:"text-motion","aria-label":a,children:I?M:a})});export{T as NodeMotion,I as TextMotion};
//# sourceMappingURL=index.esm.js.map