CursorRevealText creates a smooth, mask-driven “spotlight” that follows the cursor to reveal a secondary text layer over a styled base paragraph, ideal for hero intros, portfolios, and editorial highlights. Built with Framer Motion principles, it offers intuitive controls for content, type, colors, easing, and responsiveness so teams can tailor the effect without editing code.
Features:
Two-layer text reveal: Base primary text with a hover-revealed secondary message that follows the cursor.
Masked spotlight effect: Circular SVG mask tracks the pointer with tweened transitions and configurable easing.
Accent markup support: Wrap phrases in <accent>…</accent> to automatically color them using the Accent Color prop.
Full typography controls: Font family, size, weight, letter spacing, transform, alignment, line height, and max width.
Color and theme controls: Background, reveal background, text color, reveal text color, and accent color.
Motion controls: Hover size, default size, transition duration, easing curve, and cursor follow speed.
Responsive settings: Container height, mobile breakpoint, tablet breakpoint, mobile font size, and mobile padding.
Font loading compatibility: Works with Framer font objects and falls back to system/string family names.
Canvas-friendly property controls: All options exposed in the right panel for live tuning.
How to customize:
Content: Edit Primary Text for the always-visible message and Reveal Text for the spotlighted copy; add <accent>…</accent> around key words to color them via Accent Color.
Typography: Choose Font Family, adjust Font Size/Line Height, tweak Font Weight and Letter Spacing, and set Text Transform/Align to match brand guidelines.
Layout: Set Max Width and Padding for comfortable reading; adjust Container Height to fit hero sections or inline blocks.
Colors: Pick Background Color and Text Color for the base layer, Reveal Background and Reveal Text Color for the spotlight layer, and Accent Color for <accent> tags.
Interaction feel: Tune Default Size for the idle mask, Hover Size for the spotlight radius on hover, Transition Duration for snappiness, Transition Easing for personality, and Cursor Follow Speed for subtle lag or tight tracking.
Responsiveness: Define Mobile/Tablet Breakpoints; set Mobile Font Size and Mobile Padding to keep the experience readable and performant on smaller screens.
Performance tips: Keep Hover Size moderate for large text blocks; use readable contrasts between base and reveal colors; prefer system or preloaded fonts for faster first paint.
Syed Saboor
