LetterAnimator Demo

Letter-by-Letter Animation (Default)

This text animates letter by letter

<LetterAnimator 
  text="This text animates letter by letter" 
  element="h3"
  :delayBetweenLetters="0.05"
  animationDirection="left-to-right"
  :playOnce="true"
/>

Word Grouping with Letter Animation (New Feature)

The breakByWord prop groups letters by word while still animating each letter individually. Letters within each word animate with a shorter delay, creating a cohesive word-by-word effect.

Thistextgroupsbywordbutanimateseachletter

<LetterAnimator 
  text="This text groups by word but animates each letter" 
  element="h3"
  :delayBetweenLetters="0.2"
  animationDirection="left-to-right"
  :playOnce="true"
  :breakByWord="true"
/>

Different Animation Directions

Right to Left (Word Mode)

Righttoleftanimation

Top to Bottom (Word Mode)

Toptobottomanimation

Bottom to Top (Word Mode)

Bottomtotopanimation

Paragraph Example

Letter by Letter (Standard)

This is a longer paragraph of text to demonstrate how the animation works with multiple lines. The animation delay creates a nice flowing effect as each letter appears.

Word Grouping with Letter Animation

Thisisalongerparagraphoftexttodemonstratehowtheanimationworkswithmultiplelines.Theanimationdelaycreatesaniceflowingeffectaseachwordappears,whileletterswithineachwordanimatewithashorterdelay.

How it works:

With breakByWord: false (default), each letter animates with equal delay
With breakByWord: true, letters are grouped by word
Each word starts animating after the previous word
Letters within each word animate with a shorter delay
This creates a cohesive word-by-word effect while maintaining letter animation