Animation

Entrance timing playground

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

0.8s · 0.3s delay · overshoot

Using Entrance timing playground

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

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, delay, easing, accent, loop

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.

1808Spring easing toggleAnimationA tile that slides between two stops on a spring curve baked into a plain CSS transition, with the generated curve plotted beside it.

1811Stagger bar rowAnimationA row of bars that rise into place one after another, with the wave starting from either end or from the middle outward.

1751Staggered Fade ListAnimationRows that fade up from a chosen starting opacity one after another as the group enters view, with the gap between them adjustable.

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.