Text Swap Animation

Create engaging, dynamic text animations by smoothly cycling through multiple words. Perfect for hero sections, taglines, and anywhere you want to add motion to your messaging.

Features:

• Continuous word rotation with customizable timing

• Multiple trigger options: On Load, On Hover, In View, or Continuous

• Full typography controls (font, size, color, weight)

• Responsive font sizing with min/max constraints

• Performance optimized with proper cleanup

• Easy to customize with intuitive property controls

How It Works:

1. Word Management: Takes a comma-separated list of words, displays one at a time, and cycles through all words in a continuous loop.

2. Animation System: Current word fades out with directional slide while next word fades in from opposite direction, with smooth configurable timing and no layout shift.

3. Trigger Modes: Supports On Load (immediate start), On Hover (activates on mouse over), In View (scroll-triggered), and Continuous (infinite auto-play loop).

4. State Management: Tracks current word index with useRef to prevent conflicts, implements proper cleanup, and uses AnimatePresence for smooth transitions.

5. Responsive Behavior: Optional viewport-based font sizing with min/max constraints that maintains aspect ratio and prevents overflow.