Color Reveal Lens

Bring your visuals to life with the 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.

Color reveal hover effect