Animation

Keyframe morph loop

A square that runs a looping routine of grow, spin and round into a circle, holding at each pose because the timing stops are uneven.

Square

Using Keyframe morph loop

A square that runs a looping routine of grow, spin and round into a circle, holding at each pose because the timing stops are uneven.

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: duration, repeatDelay, maxScale, accent, paused

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

1772Easing preview tileAnimationA tile that plays the same scale-up under any easing curve you pick, with the curve drawn beside it and a marker riding it in sync.

1780Interruptible hover swellAnimationA tile whose two stage hover swell always starts from its current size, so darting the pointer on and off never makes it snap.

1766Color blend compareAnimationTwo swatches loop between the same pair of colors, one mixed in raw channel values and one in linear light, showing the dip a plain transition makes.

2127Compass bar gridAnimationA grid of short bars that all rotate to point at the pointer, so the field reads like iron filings finding a magnet.

1773Entrance timing playgroundAnimationA disc replays the same entrance move on demand so you can feel exactly what duration, delay and easing curve each contribute.

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.