---
title: "Pixel Distortion — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Munzir Kareem · Effects. Pixel Distortion breaks your image, video, or component into a grid of pixel blocks that shift and warp as the cursor moves across them."
canonical: "https://framer.elliotli.dev/component/pixel-distortion"
---

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

# Pixel Distortion

Pixelated distortion on hover

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

![Pixel Distortion preview image 1](https://framer.elliotli.dev/og/component/pixel-distortion/60c006b209cd633e/1600x1200.jpg)

## Summary

Pixel Distortion breaks your image, video, or component into a grid of pixel blocks that shift and warp as the cursor moves across them.

## Description

Pixel Distortion breaks your image, video, or component into a grid of pixel blocks that shift and warp as the cursor moves across them.

**How it works** Each block near the pointer reacts to your mouse's velocity, pushing outward in blocky, low-res steps. The moment you stop moving, the blocks relax back into place. A subtle color channel split rides along the distortion, adding a faint red and blue fringe at the edges as the grid settles.

**Sources** Works with three types of content:

-   Image
    
-   Video
    
-   Any dropped-in Framer component (snapshotted to canvas, with an optional refresh interval for animated components)
    

**Controls**

-   Grid size — pixel density of the effect
    
-   Mouse radius — how far the cursor's influence reaches
    
-   Strength — how hard blocks push
    
-   Relaxation — how quickly blocks settle back
    
-   Displacement — how far pixels shift
    
-   Aberration — intensity of the channel split
    
-   Quality — pixel ratio cap for performance
    

**Behavior:** The live WebGL effect runs in Preview and on your published site. On the editor canvas, it shows the plain source to keep things light. Toggle "Render on canvas" if you want to see the live effect while designing.

Refund is not available.

[Component Demo](https://youtu.be/6m37GirxXd4)

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

-   All · #1724

## Details

- **Author**: Munzir Kareem
- **Price**: $8.00
- **Published**: 2026-07-03
- **Updated**: 2026-07-03
- **Added**: 2026-07-03
- **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