@szum-tech/design-system
Version:
Szum-Tech design system with tailwindcss support
1 lines • 2.04 kB
JavaScript
import {a}from'./chunk-JUNHRB4B.js';import*as t from'react';import {useInView,motion}from'motion/react';import {jsx}from'react/jsx-runtime';function P({words:e,duration:l=1500,animationStyle:m="fade",loop:i=true,className:I,containerClassName:b,pauseDuration:n=300,startOnView:h=true,once:a$1=false,inViewMargin:w,...V}){let c=t.useRef(null),v=useInView(c,{once:a$1,margin:w}),[u,S]=t.useState(false),[d,T]=t.useState(0),[W,y]=t.useState(true),O={fade:{initial:{opacity:0},animate:{opacity:1,transition:{duration:.4,ease:[.4,0,.2,1]}},exit:{opacity:0,transition:{duration:.3,ease:[.4,0,1,1]}}},"slide-up":{initial:{opacity:0,y:24},animate:{opacity:1,y:0,transition:{type:"spring",stiffness:300,damping:25,mass:.8}},exit:{opacity:0,y:-24,transition:{duration:.25,ease:[.4,0,1,1]}}},"slide-down":{initial:{opacity:0,y:-24},animate:{opacity:1,y:0,transition:{type:"spring",stiffness:300,damping:25,mass:.8}},exit:{opacity:0,y:24,transition:{duration:.25,ease:[.4,0,1,1]}}},scale:{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1,transition:{type:"spring",stiffness:400,damping:30,mass:.6}},exit:{opacity:0,scale:.9,transition:{duration:.2,ease:[.4,0,1,1]}}},flip:{initial:{opacity:0,rotateX:90},animate:{opacity:1,rotateX:0,transition:{type:"spring",stiffness:200,damping:20,mass:1}},exit:{opacity:0,rotateX:-90,transition:{duration:.3,ease:[.4,0,1,1]}}}},f=!h||v&&(!a$1||!u);return t.useEffect(()=>{if(!f||e.length===0)return;let o,s;return o=setInterval(()=>{y(false),s=setTimeout(()=>{T(g=>{let r=g+1;return !i&&r>=e.length?(clearInterval(o),clearTimeout(s),g):i?r%e.length:r}),y(true),S(true);},n);},l+n),()=>{clearInterval(o),clearTimeout(s);}},[f,l,n,e.length,i,a$1,u]),jsx(motion.span,{ref:c,"data-slot":"word-rotate",className:a("inline-block overflow-hidden align-bottom leading-none",b),...V,children:jsx(motion.span,{initial:"initial",animate:W?"animate":"exit",exit:"exit",variants:O[m],transition:{duration:.5},style:{perspective:m==="flip"?1e3:void 0},className:a("inline-block",I),children:e[d]},d)})}export{P as a};