About Color Reveal Lens
Bring your visuals to life with the Color Reveal Lens! This component takes any standard image and applies a beautiful grayscale filter by default. When visitors move their mouse over the image, a dynamic "lens" follows their cursor, wiping away the black and white filter to reveal the brilliant original colors underneath.
Whether you're building a high-end photography portfolio, an edgy agency website, or just want to add a delightful micro-interaction to your hero section, this component is guaranteed to wow your users.
🎨 Powerful Customization
Edge Styles: Choose between razor-sharp geometric clipping paths or a beautifully feathered, soft-edged mask.
Dynamic Shapes: When using sharp edges, choose between Circle, Square, or Triangle lenses.
Luminosity Control: Fine-tune the brightness of your grayscale background to create intense, high-contrast reveals.
Buttery Smooth Physics: The lens doesn't just rigidly stick to the cursor—it glides. Powered by Framer Motion springs, you can easily adjust the "Smoothing" to add satisfying weight and drag to the effect.
⚡ Built for Performance & SEO
Hardware Accelerated: Uses native CSS clip-path and mask-image properties combined with absolute positioning to ensure smooth 60fps animations without layout thrashing.
SEO & Accessibility Friendly: Includes visually hidden image tags so search engine crawlers and screen readers can still fully index and understand your images.
Designer Friendly: Utilizes Framer's useIsStaticRenderer hook to ensure the component looks perfect while editing on the canvas, without distracting infinite animation loops.
