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-agnosticSet [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
No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.
Keys: ← → browse · C copy