---
title: "Image Mask Reveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Matheus Brandão · Effects. About this Component Image Mask Reveal transforms the standard media container into a sophisticated, motion-driven experience…"
canonical: "https://framer.elliotli.dev/component/mask-reveal"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Image Mask Reveal

# Image Mask Reveal

Elite Motion Masks & Cinematic Reveals

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

![Image Mask Reveal preview image 1](https://framer.elliotli.dev/og/component/mask-reveal/fe27c2ed0c2df64a/1600x1200.jpg)

## Summary

About this Component Image Mask Reveal transforms the standard media container into a sophisticated, motion-driven experience that captures attention instantly.

## Description

### About this Component

Image Mask Reveal transforms the standard media container into a sophisticated, motion-driven experience that captures attention instantly. Designed for high-end digital storytelling, it eliminates the lacuna between static layouts and complex interactive motion, delivering a "senior-dev" level of polish to your project. By leveraging advanced clip-path technology and fluid spring physics, it ensures every image or video transition feels intentional, smooth, and world-class, separating amateur sites from award-winning designs.

### Demo test here

[https://imagemaskreveal.framer.website/playground](https://imagemaskreveal.framer.website/playground)

### Perfect for

-   **Luxury Portfolios & Studios:** Showcase creative work with dramatic, cinematic expansions that command respect.
    
-   **Premium SaaS & Tech:** Highlight feature-rich dashboards using precise, anchor-based resizing for a futuristic feel.
    
-   **Hospitality & High-End Real Estate:** Reveal property vistas and interior shots with elegant, slow-motion slide effects.
    
-   **Fashion & Editorial:** Create immersive magazine-style layouts using sophisticated alpha-masking and dynamic scaling.
    

### Feature Highlights

-   **Multi-Engine Triggers:** Activate your reveals with surgical precision using either Layer-in-View or Section-specific scroll triggers.
    
-   **Cinematic Motion States:** Switch between Reveal, Resize, Slide-In, or Expand modes to perfectly match your brand’s visual rhythm.
    
-   **Hybrid Media Support:** A unified powerhouse that handles professional images, native video files, or YouTube/Vimeo embeds seamlessly.
    
-   **Immersive Depth Zoom:** Add a layer of luxury with built-in content scaling that synchronizes with the mask opening for a 3D feel.
    
-   **Total Aesthetic Control:** Fine-tune every detail from corner radii and animation anchors to custom alpha mask shapes for a unique signature.
    

### The "Why"

Why waste hours struggling with complex Framer Motion code, intersection observers, or jittery CSS transitions? Building high-performance mask animations from scratch is a technical minefield of browser compatibility and responsiveness issues. Image Mask Reveal offers a production-ready, fail-proof solution that is fully responsive out of the box. It automates the heavy lifting of clip-path logic and scroll detection, allowing you to deliver an "expensive" coded experience in seconds rather than days.

### 🛠 How to Use (3 Simple Steps)

1.  **Set Your Foundation:** Drag the component onto your canvas and select your media type—upload a premium image or link a high-definition video source.
    
2.  **Define the Aesthetic:** Choose your reveal effect—such as 'Expand' or 'Resize'—and customize the anchor points, easing, and timing to fit your brand identity.
    
3.  **Preview & Deploy:** Select your trigger logic—either when the element enters the viewport or when a specific section is reached—and publish your world-class experience.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-04t85mn8-ix9DQIWSLH2rLJOoHSPmQd4sw6D4h4)

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

-   All · #1867

## Details

- **Author**: Matheus Brandão
- **Published**: 2026-01-13
- **Updated**: 2026-03-09
- **Added**: 2025-12-26
- **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