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.
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.
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.
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.
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.
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.
Jirei
