A text component that reveals the text with a cut reveal effect. First, the text gets split into smaller chunks based on the splitBy prop: • words: Splits into individual words (e.g., "Hello world" → ["Hello", "world"]) • characters: Splits into individual characters (e.g., "Hi" → ["H", "i"]) • lines: Splits by newline characters (\n) • string: Splits by any custom string delimiter Each text piece is wrapped in two <span> elements: • An outer <span> acts as a container, set to position: relative and overflow: hidden. • An inner <span> holds the actual text, initially positioned off-screen using y: 100 (or -100 if reverse is true). When the animation kicks off: • The inner <span> elements smoothly transition from their off-screen position (y: 100) to their final position (y: 0). • This creates a "cutting" or "revealing" effect as each text piece slides into view. You can stagger the animation from different directions (first, last, center, or random) using the staggerFrom prop. A key detail is that the component always keeps word boundaries, even when splitting by characters. Here are two reasons why: 1. When dealing with multi-line text, each line starts its own reveal animation. So, if you have text that spans multiple lines, each line animates independently from its own baseline, instead of all elements animating from one point (like the bottom of the entire paragraph). 2. In characters mode, characters from the same word stick together in a word container. This stops unwanted line breaks in the middle of words. If a word needs to wrap to the next line, it wraps as a complete unit, keeping some characters from one line and others from the next. This keeps the text flowing and readable while still allowing character-by-character animation within each word.