---
title: "Image Wipe Reveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Matt · Interactive. About Image Wipe Reveal adds a satisfying “wipe to reveal” interaction to your Framer projects."
canonical: "https://framer.elliotli.dev/component/image-wipe-reveal"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Image Wipe Reveal

# Image Wipe Reveal

Satisfying wipe effect for images

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

![Image Wipe Reveal preview image 1](https://framer.elliotli.dev/og/component/image-wipe-reveal/bb6ca963409f284f/1600x1200.jpg)

## Summary

About Image Wipe Reveal adds a satisfying “wipe to reveal” interaction to your Framer projects.

## Description

## About

Image Wipe Reveal adds a satisfying “wipe to reveal” interaction to your Framer projects. The component itself is the image: drop it in, upload one picture, and visitors can drag or hover with a soft brush to gradually uncover what’s underneath. It works in heroes, galleries, image grids, case studies and anywhere you’d normally use a static image. Licensed for unlimited personal and commercial projects by the purchaser.

## What it does

Renders a single image with a blurred, tinted cover layer and a soft circular brush on top. As visitors drag or hover, the brush erases the cover and reveals the sharp image below. You can choose between click-and-drag or hover mode, and optionally show a hint label to guide users. The component is responsive and works with both mouse and touch.

## What you can customize

Easy to customize directly from the Framer property panel: adjust brush size and color, blur strength, overlay tint, interaction mode (drag or hover), and hint text plus typography so the effect matches your brand and layout.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ya95u5fe-VvNR3TTPiC1WAgstKKc3hssefe6kmO)

## Great for (examples)

Just a few ideas – you can use it anywhere a reveal interaction makes sense:

-   before / after comparisons
    
-   hero sections with interactive reveals
    
-   “scratch to discover” discounts or coupon codes
    
-   product highlights in galleries and image grids
    
-   portfolio shots and case studies with hidden details
    
-   fun 404 or easter-egg style sections
    

## Share your build

If you ship something cool with it, post it on X and tag me [**@Matthias\_Oel**](https://x.com/Matthias_Oel), or send it over. I’d love to see what you create.

## Need help?

Questions or feedback? Reach me anytime: [**matthias@lmvision.de**](mailto:matthias@lmvision.de) or on X [**@Matthias\_Oel**](https://x.com/Matthias_Oel).

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

-   All · #1987

## Details

- **Author**: Matt
- **Published**: 2025-12-05
- **Updated**: 2026-10-30
- **Added**: 2025-11-30
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step