Animation

Easing preview tile

A 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.

circInOut · 1000ms

Using Easing preview tile

A 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.

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: easing, duration, delay, mirror, 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

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

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.

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.

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.

1797Press and hover scale tileAnimationA tile that swells on hover and squashes on press, with press always beating hover and both resolved from one spring so gestures never fight.

1743Scale in on viewAnimationA wrapper that holds its child small until it first scrolls into view, then springs it to full size, with an optional per-item stagger for lists.