---
title: "Color Reveal Lens — Free Framer component · Best of Framer"
description: "Free Framer component · by Jirei · Galleries. Bring your visuals to life with the Color Reveal Lens!"
canonical: "https://framer.elliotli.dev/component/colorreveallens"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/Color Reveal Lens

# Color Reveal Lens

Color reveal hover effect

[View on Framer](https://framer.com/marketplace/components/colorreveallens/?via=elliot-li)

![Color Reveal Lens preview image 1](https://framer.elliotli.dev/og/component/colorreveallens/4c64ed51c61f9808/1600x1200.jpg)

## Summary

Bring your visuals to life with the Color Reveal Lens!

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5016

## Details

- **Author**: Jirei
- **Published**: 2026-04-27
- **Updated**: 2026-07-30
- **Added**: 2026-04-20
- **Categories**: Galleries

## More like this

-   [Geometry CMS Gallery](/component/geometry-cms-gallery) — Akshay M · $20 — Scroll-Animated Portfolio Gallery
-   [Fluid InfiniteScroll](/component/fluid-infinitescroll) — Atemo Art · $16 — LIQUID / PRISM Gallery
-   [Isometric Gallery](/component/isometric-gallery) — Edi Priatama · $5 — 3D image gallery
-   [HoverExpand Gallery](/component/hoverexpand-gallery) — piyush vichare · $2 — HoverExpand Gallery is a modern Framer component for creating interactive image galleries with smooth hover expansion.