MouseWaveText

Checking more demo site ComponentInteractive 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 mouse move 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🛠 Mouse Wave Text Options Explained

  🎨 Text & Style

  • Text – Choose the words that move with the wave effect. Perfect for headlines, CTAs, or playful labels.

  • Font Size & Font – Match your typography to your brand. Works with any Google or custom font.

  • Text Color – Base color of the characters before effects are applied.

  • Effect Color – The highlight color applied during wave movement, hover, or stroke. Great for accent branding.

  🔄 Transform & Motion

  • Rotate – Tilt your text for a bold, edgy feel.

  • Skew Y – Adds a vertical slant for dynamic, distorted looks.

  • Wave Height – Controls how “wavy” the movement feels—subtle ripple or dramatic bounce.

  • Mouse Range – Adjust how far the text reacts to mouse movement.

  ✨ Visual Effects

  • Blur on Click – Creates a soft blur flash when clicked for a tactile feel.

  • Glow Intensity – Adds a glowing trail around characters for a neon or futuristic style.

  • Shadow Distance & Shadow Color – Drop shadow for depth and readability.

  • Rainbow Mode – Cycles through multiple colors for playful, vibrant text.

  • Color Shift – Shifts hues dynamically for animated gradients.

  🧩 Fragment & Stroke

  • Fragment Density – Controls how smooth or pixelated the wave breaks the text.

  • Letter Spacing – Adjust spacing for readability or dramatic styling.

  • Stroke Width & Stroke Color – Outline your text for emphasis or a branded edge.

  🖱 Hover & Click Interactions

  • Hover Scale – Grows or shrinks letters on hover for extra attention.

  • Click Scale – Adds tactile “press down” feedback on click.

  • Click Opacity – Characters fade slightly when clicked for depth.

  • Click Blur – Adds blur on click for a flash effect.

  • Click Shift – Nudges characters sideways on click for playful motion.