Animation

Path Orbit

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

In orbit8

Using Path Orbit

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

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: shape, itemCount, duration, tilt, showPath, accent

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

1791Orbiting badgesAnimationSmall badges spaced evenly around one or two circular tracks, each ring turning at its own speed and direction while the badges stay upright.

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.

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.

2159Gooey blob fieldAnimationA field of soft blobs that orbit seeded paths and melt into each other on approach, with an extra blob that follows the pointer.

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.