Animation

Shape toggle morph icon

A single filled icon flips between two shapes only when clicked, its outline flowing directly from one silhouette into the other and its color crossfading to match, then holding until clicked again.

Using Shape toggle morph icon

A single filled icon flips between two shapes only when clicked, its outline flowing directly from one silhouette into the other and its color crossfading to match, then holding until clicked again.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: shapeA, shapeB, colorA, colorB, size

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2192Morphing icon loopAnimationA single filled icon continuously reshapes itself into the next icon in a short list, its outline flowing smoothly from one silhouette to the next while its fill color shifts to match.

2170Icon Shape MorphAnimationA single filled icon smoothly reshapes itself into the next icon in a sequence, with the outline warping continuously between shapes rather than cross-fading or swapping.

2193Morphing icon toggleAnimationA small icon continuously morphs its outline between two shapes and two colors on a steady loop.

1669Blur revealAnimationA wrapper that keeps its child out of focus and slightly offset until it first enters the viewport, then resolves the blur and closes the gap in one move.

1763Bobble tile gridAnimationA grid of colored tiles that bobble away from the pointer on a spring, bouncing harder the faster the pointer swept across them.

1672Burst particle emitterAnimationWraps any element and fires a staggered fan of small specks from a chosen edge, on click, on a loop, or the first time it scrolls into view.