FadingLettersFx creates beautiful letter-by-letter animations with precise timing control. Each letter animates independently with customizable delays, creating organic and engaging text reveals.
The component supports three distinct animation states: entering, visible, and exiting.
Letters fade in sequentially with a blur-to-focus effect and scale transformation. Each letter has a calculated delay based on its position in the word and message.
Letters remain static without animation. Use this state when no animation is active.
Letters fade out with blur and scale effects. Each letter has a random exit delay for an organic dissolution effect.
Use the messageIdx prop to create staggered animations across multiple messages. Each increment adds 2500ms of base delay.
FadingLettersFx extends the Once UI Text component, so you can use all Text props including variants, colors, and custom styles.
The animation timing follows a precise formula:
- Message Base Delay: messageIdx × 2500ms
- Word Delay: wordIdx × 200ms
- Letter Delay: letterIdx × 40ms
- Total Entry Delay: Message Base + Word Delay + Letter Delay
- Exit Delay: Random between 0-400ms per letter
- Use messageIdx for sequential message animations
- Combine with other effects for complex animations
- Perfect for hero sections, loading states, and transitions
- Works with all Once UI Text variants and styling
- Consider prefers-reduced-motion for accessibility in production