---
title: "Grid Reveal Canvas — Free Framer component · Best of Framer"
description: "Free Framer component · by Harman Pixels · Effects. Grid Reveal Canvas transforms static images into interactive visual experiences using a grid-based distortion algorithm."
canonical: "https://framer.elliotli.dev/component/grid-reveal-canvas"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Grid Reveal Canvas

# Grid Reveal Canvas

Interactive image distortion effect

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

![Grid Reveal Canvas preview image 1](https://framer.elliotli.dev/og/component/grid-reveal-canvas/10c57b46b0312d39/1600x1200.jpg)

## Summary

Grid Reveal Canvas transforms static images into interactive visual experiences using a grid-based distortion algorithm.

## Description

**Grid Reveal Canvas transforms static images into interactive visual experiences using a grid-based distortion algorithm. As users interact with the component, boxes in a grid pattern scale and reveal the underlying image based on their distance from the interaction point, creating a ripple-like effect. The component offers extensive customization options including adjustable grid box size, image quality, fade effects, and decorative dots that can appear everywhere or only within the effect radius. Multiple trigger modes (pointer, hover, click, scroll) make it versatile for different use cases - from hero sections to scroll-triggered reveals. Performance-optimized with canvas rendering and viewport detection, it automatically pauses animations when out of view. The effect strength, follow speed, and visual appearance are all fully customizable through intuitive property controls, making it easy to match any design aesthetic.**

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

-   All · #6665

## Details

- **Author**: Harman Pixels
- **Published**: 2026-06-18
- **Updated**: 2026-05-12
- **Added**: 2026-05-11
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo