component
Text Reveal Lens
By John Valentine
Details
- John ValentineAuthor
- componentType
- 2025-11-27Published
- 2025-11-26Updated
- 2025-10-04Added
- TextCategories
Summary
Text Reveal Lens transforms simple typography into cinematic motion.
Description
Text Reveal Lens transforms simple typography into cinematic motion. As users scroll or move their cursor, a shape mask glides across the headline, revealing text through light and motion. Ideal for hero headers, section intros, or full-screen storytelling layouts. ✨ Features & Capabilities Mask Shapes – Circle, Rectangle, Wave, Diamond, Wave, Star. Reveal Motion – Mask moves smoothly with scroll or cursor. Direction Controls – Left→Right, Top→Bottom, or Center-Out reveal. Scroll Sensitivity – Adjust mask speed and trigger threshold. Cursor Tracking Mode – Follow the user’s mouse for interactive highlight. Typography Styling – Font, weight, size, spacing, and alignment controls. Gradient & Texture Fill – Apply gradients or textures inside revealed text for a premium finish. Animation Easing – Choose from linear, ease-in-out, or custom bezier curves. Performance Optimized – GPU mask animations ensure smooth playback. Responsive & Safe – Scales beautifully across devices. 🧩 Property Controls Text Content Mask Shape : Circle | Rectangle | Path Reveal Trigger : Scroll | Cursor Direction : Left→Right | Top→Bottom | Center-Out Scroll Sensitivity Easing Type Font Controls : Family, Weight, Size, Spacing, Alignment Fill Style : Solid | Gradient | Texture Mask Color / Background 💡 Use Cases Hero banners • Interactive landing pages • Product storytelling • Creative portfolios • Section intros
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #1274