Text Animation Blur Fade In

The text splits into individual words, each wrapped in a motion.span. When the element enters the viewport, words animate from blurred and offset to clear and in-position.

Staggered delays (0.02s per word by default) create a wave effect across the sentence. The whileInView trigger means animations replay if users scroll away and back.

An optional delay prop shifts the start time of the entire animation sequence. This allows coordinating multiple Text elements to appear in sequence (e.g., heading first, then subheading).

Works well for about sections, feature descriptions, or any content that benefits from subtle entrance animations that draw readers into the text.