HoverRevealFrame
A dynamic hover effect component that reveals content through a smooth radial gradient transition, adding interactive depth and visual focus to your Framer designs.
Make it with Workshop
Build your own component with AI
About this Component
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.
