---
title: "ImageRevealPro — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Viper Guy · Interactive. ImageReveal Pro – Interactive Spotlight"
canonical: "https://framer.elliotli.dev/component/imagerevealpro"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/ImageRevealPro

# ImageRevealPro

ImageReveal Pro – Interactive Spotlight

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

![ImageRevealPro preview image 1](https://framer.elliotli.dev/og/component/imagerevealpro/a73fbb4abc6e1812/1600x1200.jpg)

## Summary

ImageReveal Pro – Interactive Spotlight

## Description

The **ImageReveal Pro** is a visually striking Framer component that turns static images into immersive, interactive experiences. On hover or in auto mode, a dynamic spotlight smoothly reveals the image, while the surrounding area stays dark and blurred. A soft glow and subtle ring effect enhance depth and visual focus, creating a cinematic, premium feel. Perfect for portfolios, hero sections, product showcases, and storytelling layouts, this component delivers high-end interactivity with minimal setup.

## Interactive Spotlight Effects

-   **Dynamic radial reveal** that follows cursor movement for an engaging, attention-guiding effect.
    
-   **Cinematic foreground blur** keeps unrevealed areas dark, directing focus naturally.
    
-   **Glow aura and ring** that subtly highlights the revealed area, enhancing depth.
    
-   **Auto animation mode** for passive storytelling or continuous motion on landing pages.
    
-   **Smooth physics-based animation** using requestAnimationFrame for seamless performance.
    

## Customizable Design Controls

The ImageReveal Pro includes full Framer property controls, letting you tailor it to your brand or style. Customize:

-   **Image** – Upload any photo or graphic to be revealed.
    
-   **Glow colors** – Set primary and secondary glow hues for visual accent.
    
-   **Blur intensity** – Control how dark or diffused the foreground appears.
    
-   **Reveal size** – Adjust the spotlight radius.
    
-   **Softness** – Define how gradual the reveal fades.
    
-   **Speed** – Control how quickly the spotlight follows the cursor.
    
-   **Trigger mode** – Choose between hover interaction or automatic loop.
    

## How It Works

The component tracks the cursor position (or auto loop) to calculate the reveal center. A radial gradient mask hides the unrevealed portion, while the foreground remains dark and blurred. The glow and ring dynamically update to follow the spotlight, producing a realistic cinematic effect. On cursor leave, the reveal fades smoothly back to a neutral, fully dark state.

## Perfect For

-   Portfolio hero sections
    
-   Product image showcases
    
-   Case study or storytelling layouts
    
-   Interactive landing pages.
    

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

-   All · #10850

## Details

- **Author**: Viper Guy
- **Price**: $4.00
- **Published**: 2026-04-14
- **Updated**: 2026-06-05
- **Added**: 2026-04-02
- **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