react-textmotion/dist/index.cjs.js

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

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