---
title: "PixelMorph — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Text. Pixel grid animation with hover"
canonical: "https://framer.elliotli.dev/component/pixelmorph"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/PixelMorph

# PixelMorph

Pixel grid animation with hover

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

![PixelMorph preview image 1](https://framer.elliotli.dev/og/component/pixelmorph/a7274a92a9b893b0/1600x1200.jpg)

## Summary

Pixel grid animation with hover

## Description

An animated pixel grid that breaks any image, text, or Frame into cells and reveals or hides content on hover or click. Each pixel animates independently for a mesmerizing morph effect. Built for portfolios, product galleries, and marketing sites that need a distinctive visual punch.

## Features

-   Breaks content into an animated pixel grid on hover or click
    
-   Each cell animates independently for a morphing reveal effect
    
-   Works with images, text, or any Framer Frame node
    
-   Adjustable grid size, pixel color, animation speed and aspect ratio
    
-   Hover and click trigger support
    
-   Fully customizable from the Framer right-side panel
    
-   No code needed
    

## Property Controls

**Content** — image, text or Frame node input

**Grid** — grid size, cell count, aspect ratio

**Animation** — trigger type (hover/click), animation speed, reveal direction

**Styling** — pixel color, background color

## Use Cases

Hero sections · Portfolio image reveals · Product hover effects · Interactive banners · Call to action areas · Creative storytelling layouts · Landing page headers

**SEO Keywords**

framer pixel animation · framer pixel reveal · framer hover effect · framer image reveal · framer pixel grid · framer morph animation · framer interactive image · framer pixel component · framer image animation · framer hover animation · framer grid animation · framer creative component · framer landing page component · framer code component · framer image effect

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

-   All · #7448

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2025-09-24
- **Updated**: 2026-06-25
- **Added**: 2025-09-19
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing