MouseWaveText Framer Component

Interactive text that follows the mouse with a smooth wave effect. Customize font, colors, skew, rotation, and blur for a dynamic, animated experience.

MouseWaveText is a Framer component that creates an animated wave effect on text based on the mouse position. It reacts to hover and tracks cursor movement across the text area, bending the text in a fluid, wave-like motion. Perfect for attention-grabbing headings or playful UI elements.

⚙️ How It Works

• The component splits the text into individual characters or spans.
• On mouse hover, it listens to mousemove events and uses Framer Motion or animation libraries to shift each character vertically.
• The wave effect is achieved by applying an offset (sine/cosine function or delay-based transformation) relative to the cursor's X position.
• Secondary styling (effect color, blur) enhances the visual trail or glow.

💡 Use Cases

• Landing page headers
• Hero sections with interactive text
• Call-to-action elements that invite engagement
• Artistic or experimental UI/UX concepts