Animation

Path follower

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

Using Path follower

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

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: accent, duration, tileSize, alignToTangent, strokeWidth

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 code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2201Path OrbitAnimationCards ride a shared closed path, evenly spaced and endlessly circling, with the path shape switchable between an ellipse, a circle and a star.

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.

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.

1767Connector Pulse BeamAnimationDraws a curved connector between two elements and sends a bright gradient segment travelling along it on a loop.

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.

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