Animation

Orbiting Avatar Intro

A stack of round portraits that lifts, fans out onto a circle and then turns slowly around the center while every portrait stays upright.

Using Orbiting Avatar Intro

A stack of round portraits that lifts, fans out onto a circle and then turns slowly around the center while every portrait stays upright.

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

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.

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.

1676Composable RevealAnimationOne reveal wrapper whose slide, fade, zoom and defocus parts can each be switched on and combined into a single spring transition.

1684Directional Slide InAnimationA reveal that pushes content in from any of the four sides by a set distance and lets a spring absorb the arrival.

1697Focus in revealAnimationA reveal that brings content in out of focus and lets it sharpen as it enters view, with an optional per item delay for a stack of rows.

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.