---
title: "Grid Distortion — Framer component · Best of Framer"
description: "$4.00 · Framer component · by SteelEye® · Effects. WebGL Grid Distortion — Immersive, Interactive, Mesmerizing Hover."
canonical: "https://framer.elliotli.dev/component/grid-distortion"
---

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

# Grid Distortion

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

![Grid Distortion preview image 1](https://framer.elliotli.dev/og/component/grid-distortion/845df7ef90424e95/1600x1200.jpg)

## Summary

WebGL Grid Distortion — Immersive, Interactive, Mesmerizing Hover.

## Description

## WebGL Grid Distortion — Immersive, Interactive, Mesmerizing

**Hover. Distort. Reveal.** — A WebGL-powered grid effect that transforms ordinary images and videos into interactive, cinematic moments.

A lightweight, customizable hover effect designed for both images and videos. Built with WebGL, it introduces a subtle yet powerful grid-based distortion that reacts instantly to user interaction. Smooth, GPU-accelerated, and fully adjustable to match your brand’s aesthetic — perfect for designers who want their media to feel alive.

**Why it works for your project**

-   **Instant immersion** — bring static visuals to life with responsive grid distortion on hover.
    
-   **Modern web aesthetic** — perfect for portfolios, creative showcases, and landing pages.
    
-   **Seamless integration** — lightweight effect that blends smoothly with your existing design.
    

**Feature Highlights:**

-   **Image & Video support** — apply the same effect across multiple media types.
    
-   **Grid customization** — adjust grid density and distortion strength to your liking.
    
-   **Hover interactivity** — distortion responds dynamically to mouse position.
    
-   **Smooth relaxation** — fine-tune how quickly distortion resets after hover.
    
-   **Performance-ready** — GPU-accelerated WebGL ensures fluid motion at all times.
    
-   **Framer controls** — tweak properties like strength, grid size, and relaxation directly in the panel.
    

**Refund Policy**

Try it risk-free: 7-day money-back guarantee if you’re not fully satisfied.

**Support**

Need help or have questions? Reach out anytime at **\[your email/contact here\]**.

**Minimal in setup, maximal in impact — this WebGL Grid Distortion effect gives your media an immersive edge while keeping your workflow clean and simple.**

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

-   All · #10707

## Details

- **Author**: SteelEye®
- **Price**: $4.00
- **Published**: 2025-08-26
- **Updated**: 2025-08-26
- **Added**: 2025-08-16
- **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