TextWaveAnimation

TextWaveAnimation brings your headlines to life.

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.

Animated text wave. Hover. Click. Always