---
title: "MatrixRevealLoader — Free Framer component · Best of Framer"
description: "Free Framer component · by Mohamed Riad · Loaders. A tile overlay that clears itself"
canonical: "https://framer.elliotli.dev/component/matrixrevealloader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/MatrixRevealLoader

# MatrixRevealLoader

A tile overlay that clears itself

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

![MatrixRevealLoader preview image 1](https://framer.elliotli.dev/og/component/matrixrevealloader/0117a45d1fd901c2/1600x1200.jpg)

## Summary

A tile overlay that clears itself

## Description

Matrix Reveal Loader is a transition overlay for Framer. It covers the entire screen with a grid of solid tiles, then removes them in a fast, accelerating dissolve, revealing the content beneath.

The grid is fully responsive. Tiles always stay perfectly square at any screen size, filling the screen edge to edge with no gaps.

## What you can customize

-   Grid Column - control the density of the tile grid (2 to 30)
    
-   Color - match your desired color
    
-   **Reveal Mode** \- determines the directional pattern of the dissolve:
    
    -   Random
        
    -   Vertical
        
    -   Horizontal
        
    -   Diagonal
        
    -   Anti-Diagonal
        
    -   From Center
        
    -   Rain
        
    -   Spiral
        
-   Auto Play - trigger on load or manually via interaction (On / Off)
    
-   Start Delay - delay the animation start (0 to 5000ms)
    
-   Speed - adjust animation speed with a multiplier (0.5x to 2x)
    

## Use Cases

-   Page loadings
    
-   Images and cards hover effect
    
-   Transitions between pages
    

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

-   All · #2850

## Details

- **Author**: Mohamed Riad
- **Published**: 2026-04-03
- **Updated**: 2026-04-05
- **Added**: 2026-03-26
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story