Gradient Reveal Text

Gradient Reveal Text is an interactive typography component for Framer that combines cursor-based masking with animated stroke effects.

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

Hover-driven gradient text reveal with m