Text Hover Effect

Text Hover Effect brings a premium interactive SVG technique into Framer — without requiring any code. As the user hovers over the text, a radial mask tracks their cursor position in real time, revealing a multi-color gradient inside the lettering. Beneath this, a secondary animated stroke continuously traces the text outline using a looping dash animation, creating an elegant motion baseline.

The component is fully customizable. You can adjust the font, stroke width, gradient colors, animation speed, mask movement speed, and more. The gradient is only revealed on hover, giving the effect a clean, modern aesthetic when idle and a vivid, reactive feel during interaction.

Because it uses <svg> text rather than standard HTML, the animation is crisp, scalable, and resolution-independent.

Features

• Cursor-tracked radial gradient reveal• Fully animated stroke outline with infinite loop• Adjustable gradient colors (up to 5)• Smooth interactive masking controlled by hover movement• Customizable stroke width and text styling• Real SVG rendering for sharpness at any scale• Optimized to work inside any layout size• No setup required — works instantly on drop

How to Use

1. Drag the component onto your canvas.

2. Type your custom text in the “Text” property.

3. Choose your preferred font, size, and weight.

4. Adjust Stroke Width and Mask Duration to refine the hover reveal.

5. Customize Gradient Colors to match your brand or theme.

6. Set the Animation Duration for the looping outline stroke.

7. Hover over the text in preview mode — the mask follows your cursor and reveals the gradient in real time.

For best results, place this component in large hero areas or sections where it has room to breathe.

Best For

• Hero sections• Portfolio landing pages• Modern startups and product sites• Luxury or premium brand identity moments• Interactive headings• Art, design, and creative websites• Hover-driven micro-interactions