Icon Morph

A contextual transition pattern for stateful icons. Uses a subtle blur and scale down to create a physical crossfade.

Toggling display: none between two icons feels harsh the eye catches the swap. By running three properties in parallel (opacity 0→1, scale 0.25→1, blur 4px→0) over 250ms with cubic-bezier(0.2, 0, 0, 1), the old icon melts as the new one forms out of the same space.

Toggle the morph state below to feel the difference between an instant swap and a physical crossfade.