---
title: "PixelEffect — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Inam  · Effects. Key Features: Image and Video Compatible: Don't just distort images—bring your videos to life with the same stunning effect for an even more…"
canonical: "https://framer.elliotli.dev/component/distortedmedia"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/PixelEffect

# PixelEffect

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

![PixelEffect preview image 1](https://framer.elliotli.dev/og/component/distortedmedia/ba606b219b78e209/1600x1200.jpg)

## Summary

Key Features: Image and Video Compatible: Don't just distort images—bring your videos to life with the same stunning effect for an even more dynamic result.

## Description

**Key Features:**

-   **Image and Video Compatible:** Don't just distort images—bring your videos to life with the same stunning effect for an even more dynamic result.
    
-   **Silky-Smooth Performance:** Built on WebGL, the effect is rendered by the GPU, ensuring a high-performance animation that won't slow down your website.
    
-   **Advanced Animation Modes:** Choose how the effect behaves. Trigger it purely with mouse interaction, have it animate automatically on scroll, or combine both for a reveal-and-interact experience.
    
-   **Contextual Hover Overlays:** Add a layer of professionalism by displaying a logo, title, and date that elegantly fade in when a user hovers over the media.
    
-   **Fully Accessible:** With support for alt text, the component remains accessible to screen readers and is SEO-friendly.
    

**Full Creative Control:**

-   **Interaction Physics:** Control the strength, radius, and speed of the mouse-driven distortion.
    
-   **Grid Density:** Go from a chunky, abstract look to a fine, detailed pixelation by adjusting the grid size.
    
-   **Relaxation Speed:** Define how quickly the effect settles back to its original, clear state.
    
-   **On-Appear Effects:** Customize the initial distortion amount and add a delay for perfectly timed entrance animations.
    

**Perfect For:**

-   Hero sections that need to make a bold first impression.
    
-   Interactive portfolios and project showcases.
    
-   Agency websites for team member profiles or case study links.
    
-   Digital art galleries and creative visual displays.
    
-   Anywhere you want to replace a static element with something engaging and modern.
    

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

-   All · #8166

## Details

- **Author**: Inam
- **Price**: $8.00
- **Published**: 2025-08-11
- **Updated**: 2025-10-22
- **Added**: 2025-08-05
- **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