TextWaveAnimation brings your headlines to life. Each letter animates independently, rippling outward from the cursor, edge, or center using smooth spring physics built on framer-motion.
─── ANIMATION STYLES───────────────────────
Wave → Letters lift and tilt in 3D. The classic ripple. Best for: Hero headlines, navigation
Elastic → Springy overshoot. Letters bounce and settle. Best for: Playful brands, product launches
Magnetic →
Letters alternate left/right with Y-axis rotation. Best for: Editorial, premium layouts
Glitch → Color flicker with chromatic jitter per letter. Best for: Tech, gaming, edgy aesthetics
Shimmer →
Subtle scale + glow pulse. No vertical motion. Best for: Luxury, minimal UIs, accent text
─── ORIGIN MODES ──────────────────────────
Cursor → Wave starts from mouse position (live tracking)
Left → Wave runs left to right
Right → Wave runs right to left
Center → Wave radiates from the middle outward
Edges → Wave converges inward from both ends
─── CONTROLS ────────────────────────────
Content Headline text (each character animates independently)
Activate Hover / Click / Always
Duration Per-letter animation length (default 0.7s)
Stagger. Delay between letters (default 0.04)
Lift : Vertical jump in pixels
Rotation 3D: tilt in degrees (Wave & Magnetic only)
Glow : Soft halo behind animating letters
Intensity : Halo size in pixels (default 12px)
Motion Blur : Cinematic blur during peak motion
Font : Full font picker — family, weight, size, spacing
─── QUICK RECIPES ─────────────────────────
Subtle Hero:
Style: Wave · Lift: 8px · Rotation: 15°
Duration: 0.8s · Glow: Off · Motion Blur: On
Playful CTA:
Style: Elastic · Activate: Click
Lift: 20px · Stagger: 0.06
Premium Shimmer:
Style: Shimmer · Activate: Always
Glow: On · Intensity: 18px
Active: gold or icy blue
Tech / Glitch:
Style: Glitch · Origin: Edges
Active: cyan or magenta · Motion Blur: On
─── ACCESSIBILITY ──────────────────────
Respects prefers-reduced-motion. When enabled, color
transitions still play but all transform animations
(lift, rotation, blur) are skipped automatically.
─── PERFORMANCE ───────────────────────
Best used on short headlines. For strings over 200
characters, use a static text element instead.
Cursor tracking only fires when Origin is set to Cursor.
─── BROWSER SUPPORT ────────────────────
Chrome · Safari · Firefox · Edge
All evergreen browsers. No experimental APIs.
TextWaveAnimation brings your headlines to life. Each letter animates independently, rippling outward from the cursor, edge, or center using smooth spring physics built on framer-motion.
─── ANIMATION STYLES───────────────────────
Wave → Letters lift and tilt in 3D. The classic ripple. Best for: Hero headlines, navigation
Elastic → Springy overshoot. Letters bounce and settle. Best for: Playful brands, product launches
Magnetic →
Letters alternate left/right with Y-axis rotation. Best for: Editorial, premium layouts
Glitch → Color flicker with chromatic jitter per letter. Best for: Tech, gaming, edgy aesthetics
Shimmer →
Subtle scale + glow pulse. No vertical motion. Best for: Luxury, minimal UIs, accent text
─── ORIGIN MODES ──────────────────────────
Cursor → Wave starts from mouse position (live tracking)
Left → Wave runs left to right
Right → Wave runs right to left
Center → Wave radiates from the middle outward
Edges → Wave converges inward from both ends
─── CONTROLS ────────────────────────────
Content Headline text (each character animates independently)
Activate Hover / Click / Always
Duration Per-letter animation length (default 0.7s)
Stagger. Delay between letters (default 0.04)
Lift : Vertical jump in pixels
Rotation 3D: tilt in degrees (Wave & Magnetic only)
Glow : Soft halo behind animating letters
Intensity : Halo size in pixels (default 12px)
Motion Blur : Cinematic blur during peak motion
Font : Full font picker — family, weight, size, spacing
─── QUICK RECIPES ─────────────────────────
Subtle Hero:
Style: Wave · Lift: 8px · Rotation: 15°
Duration: 0.8s · Glow: Off · Motion Blur: On
Playful CTA:
Style: Elastic · Activate: Click
Lift: 20px · Stagger: 0.06
Premium Shimmer:
Style: Shimmer · Activate: Always
Glow: On · Intensity: 18px
Active: gold or icy blue
Tech / Glitch:
Style: Glitch · Origin: Edges
Active: cyan or magenta · Motion Blur: On
─── ACCESSIBILITY ──────────────────────
Respects prefers-reduced-motion. When enabled, color
transitions still play but all transform animations
(lift, rotation, blur) are skipped automatically.
─── PERFORMANCE ───────────────────────
Best used on short headlines. For strings over 200
characters, use a static text element instead.
Cursor tracking only fires when Origin is set to Cursor.
─── BROWSER SUPPORT ────────────────────
Chrome · Safari · Firefox · Edge
All evergreen browsers. No experimental APIs.
