Animation

Icon Shape Morph

A 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.

Using Icon Shape Morph

A 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.

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: cycleSeconds, holdSeconds

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

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

1675Coiled Spring DragAnimationA draggable tile tethered to its home spot by a drawn coil that stretches and thins as you pull, then whips the tile back when you let go.

1792Path followerAnimationA rounded tile that rides along a curling spiral track while the track itself draws in ahead of it, then reverses back to the start.

2227Shape toggle morph iconAnimationA 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.

1807Spin count tileAnimationA square that turns a whole number of times on demand and lands square again, with a faint arc showing how far through the turn it is.

1813Stroke drawing boardAnimationA grid of outlined shapes that draw themselves stroke by stroke in a staggered wave, as if a pen were working across the board.