Gradient Reveal Text

Gradient Reveal Text is an interactive typography component for Framer that combines cursor-based masking with animated stroke effects. When the user hovers over the text, a radial mask follows the cursor, revealing a vibrant multi-color gradient underneath.

The component also includes a smooth stroke animation that draws the text outline, adding depth and motion even before interaction. Together, these effects create a premium, modern text experience ideal for landing pages and hero sections.

Designers can fully customize the text content, font size, stroke width, mask radius, animation timing, and gradient colors directly from the Framer property panel.

Features

• Cursor-following gradient reveal mask
• Animated stroke drawing effect
• Multi-color gradient support (5 colors)
• Fully customizable typography
• Adjustable mask size and transition
• Smooth Framer Motion animations
• SVG-based crisp rendering
• Perfect for hero text and headings

Property Highlights

• Mask Radius → size of reveal area
• Duration → mask follow smoothness
• Stroke Animation Duration → draw speed
• Gradient Colors → full color control
• Font Size & Weight → typography control

Use Cases

• Hero section headlines
• Portfolio intros
• Creative landing pages
• Branding text effects
• Product launch pages