Moss reveal Effect

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 or on X @karimsaif0.