---
title: "Moss reveal Effect — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Karim Saif · Interactive. Before and After Smoothly"
canonical: "https://framer.elliotli.dev/component/moss-reveal-effect"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Moss reveal Effect

# Moss reveal Effect

Before and After Smoothly

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

![Moss reveal Effect preview image 1](https://framer.elliotli.dev/og/component/moss-reveal-effect/5d3fb61f75e66892/1600x1055.jpg)

## Summary

Before and After Smoothly

## Description

**About**

**Mouse Reveal Effect** is an interactive visual component that reveals a hidden image layer wherever your visitor moves their mouse. It creates a smooth, torchlight or magnifying lens effect that makes static image showcases dynamic and highly engaging.

**What it does**

-   **Interactive Spotlight:** As visitors move their cursor across the image, a circular window reveals the hidden overlay layer in real time.
    
-   **Smooth Tracking:** The reveal spotlight lags slightly behind the mouse cursor with organic easing, giving the interaction a weightless, tactile feel.
    
-   **Soft Edge Transition:** Blends the top and bottom images together seamlessly using custom feathering so the reveal never looks harsh or cut off.
    
-   **Smart Hover Fade:** Smoothly fades the reveal effect in when the cursor enters the image area and fades it out when the cursor leaves.
    

**What you can customize**

Full control right from the Framer right-hand panel — no code needed:

-   **Base Image** — The default background image visitors see first
    
-   **Overlay Image** — The hidden top layer revealed beneath the cursor spotlight
    
-   **Radius** — Controls the size of the circular reveal spotlight
    
-   **Feather Edge** — Softens the edges of the reveal circle for a smoother blend
    
-   **Follow Speed** — Adjusts how quickly or smoothly the spotlight follows cursor movement
    
-   **Overlay Opacity** — Controls the transparency level of the revealed top image
    
-   **Blend Mode** — Choose how the top layer blends with the base layer (Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge)
    
-   **Fade On Leave** — Toggle whether the reveal effect fades away when the cursor leaves the image
    
-   **Fade Speed** — Set how fast the hover fade animation plays (in seconds)
    
-   **Cursor Style** — Choose your preferred mouse cursor appearance (Crosshair, Default Arrow, Pointer Hand, Hidden)
    

**Need help?**

Have questions or feature suggestions? Reach out anytime at [**karimsaif010@gmail.com**](mailto:karimsaif010@gmail.com) or on X [@karimsaif0](https://x.com/karimsaif0).

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

-   All · #4612

## Details

- **Author**: Karim Saif
- **Price**: $5.00
- **Published**: 2026-07-22
- **Updated**: 2026-09-16
- **Added**: 2026-07-22
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase