Pixel Dissolve Hover text animation: the word aimotions animated in this style
011ReactiveCanvas

Pixel Dissolve Hover

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.

Prompt · replace [TEXT]

Tool-agnostic
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
Category
Reactive Styles
Demo built with
Canvas
Energy
Lively
Background
Light bg

Also known as

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Pixel Dissolve Hover look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥