# Pixel Dissolve Hover: motion graphics style

> Pixel dissolve text effect: crisp letters break into square pixels around the cursor, the blocks growing bigger, bluer and pinker the closer it gets. They re-form behind it. Ideal as an interactive, animated website hero title.

- Category: [Reactive Styles](https://aimotions.art/category/reactive-styles/)
- Also known as: pixelate on hover, pixel dissolve effect, mosaic hover text, pixel trail cursor, blocky dissolve, pixelation effect, digital dissolve
- Demo built with: Canvas · Energy: Lively · Background: Light bg
- Live demo: https://aimotions.art/styles/pixel-dissolve-hover/
- Spanish version: https://aimotions.art/es/estilos/pixel-dissolve-hover/

## Prompt (replace [TEXT] with your text)

```text
Set [TEXT] in a crisp black geometric grotesque on an off-white background with a faint square pixel grid. Around a focus point the letters dissolve into square pixels whose size grows with proximity, from fine 8-pixel blocks at the edge to chunky 64-pixel blocks at the center; the biggest blocks turn electric blue and hot pink, drift a little and some drop out, as if the type were coming apart. At rest the focus point wanders slowly across the word with a small radius. On hover it follows the pointer with a wider radius and leaves a trail of pixels that shrink back and snap into sharp letters within about a second. A press bursts the pixels outward briefly. Show a small square reticle and a block-size readout. On touch screens it follows the finger.
```

## Visual DNA

- Crisp black grotesque word on an off-white pixel grid
- Quadtree pixelation: 8, 16, 32 and 64 px blocks by proximity
- Bigger blocks shift from black to electric blue to hot pink
- Blocks drift and drop out near the pointer, leaving a dissolving trail
- Trail heals back to sharp type within a second

The prompts are free to copy, adapt and use in personal and commercial projects, with no credit required. Republishing the collection or a substantial part of it (for example as another library or a dataset) requires written permission.

How to cite: Pixel Dissolve Hover, aimotions, https://aimotions.art/styles/pixel-dissolve-hover/
