---
title: "HoverRevealFrame — Free Framer component · Best of Framer"
description: "Free Framer component · by mmaas_ · Effects. HoverRevealFrame creates an elegant interactive hover effect using a radial gradient mask that reveals content based on the user’s cursor position."
canonical: "https://framer.elliotli.dev/component/hoverrevealframe"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/HoverRevealFrame

# HoverRevealFrame

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

![HoverRevealFrame preview image 1](https://framer.elliotli.dev/og/component/hoverrevealframe/4d3a11488b0907f2/1600x1200.jpg)

## Summary

HoverRevealFrame creates an elegant interactive hover effect using a radial gradient mask that reveals content based on the user’s cursor position.

## Description

**HoverRevealFrame** creates an elegant interactive hover effect using a radial gradient mask that reveals content based on the user’s cursor position. As users move their cursor across the frame, the component dynamically adjusts the mask radius and opacity, producing a smooth spotlight or reveal effect.

Perfect for highlighting key elements, adding subtle interactivity, or drawing attention to specific areas, this component allows full customization of opacity levels, reveal radius, and background color—all controllable through Framer’s property panel. Lightweight and flexible, it integrates seamlessly into any layout without performance loss.

Ideal use cases include:

-   Interactive hero sections
    
-   Product image reveals
    
-   Hover-driven storytelling visuals
    
-   UI elements requiring focus or emphasis
    

Bring motion and engagement to your Framer projects with a clean, modern reveal animation that responds naturally to user interaction.

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

-   All · #2023

## Details

- **Author**: mmaas_
- **Published**: 2025-10-16
- **Updated**: 2025-10-29
- **Added**: 2025-10-08
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows