Animated component built with motion and tailwind.css to animate a series of letters with a staggered effect. ### Props - `words`: An array of strings representing the words to be animated. - `stagger`: Optional, A number representing the delay between the animations of each letter, if not provided it will be 0.05s between each letter. - `transition`: Optional, object defining the transition properties for the animation. - `direction`: Optional, A string indicating the direction of the animation, if not provided it will animate from bottom. - `className`: An optional string to apply additional tailwind classes. - `props`: any prop associated with "<div>" element. ### Behavior - When the component is in view, it triggers the animation to change from the `hidden` state to the `visible` state in an orchestration pattern. ### Example Usage ```tsx <StaggerText words={['Hello', 'world']} stagger={0.1} transition={{ duration: 0.5 }} direction=""top" className="my-custom-class" />