Skip to content

component

Text Reveal Lens

By John Valentine

Details

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.

1501100114158/148/228/309/79/15
  • All · #1274