Animations that follow your skill

Loaders, hover effects, text reveals and feedback, written against design skill tokens, so each snippet moves the way your installed skill does. Copy it, paste it, done.

Spinner

loader-01

A ring with a primary arc. For buttons, inline fetches and small panels.

0.8s loop

Dot pulse

loader-02

Three dots rising in sequence. A softer “thinking” state for chats and assistants.

1s loop

Skeleton shimmer

loader-03

Placeholder shapes with a light sweep. Keeps layout stable while content loads.

1.4s loop

Indeterminate bar

loader-04

A sliding segment for work of unknown length: uploads, page loads, sync.

1.3s loop
Churning

Pixel grid status

loader-05

A 3×3 pixel grid with a travelling trail, a shimmering label and elapsed time. For agents and long jobs.

0.8s loop

Button lift

hover-01

The primary button rises with a tinted shadow and settles back on press.

200ms · ease-out
Read the documentation

Underline slide

hover-02

A link underline that draws in from the left and leaves to the right.

300ms · ease-out

Ship it today.

Typewriter

text-01

Types a short line, holds, erases. For hero taglines and empty states.

3.2s loop

Design that moves with intent.

Staggered reveal

text-02

Words fade up one after another. Add .is-visible from an IntersectionObserver.

300ms · ease-out

Success check

feedback-01

A circle draws itself, then the tick. Confirms payments, saves and sign-ups.

300ms · ease-out

Error shake

feedback-03

A field shakes once and turns red on a wrong value. Toggle .is-invalid on submit.

300ms · ease-out
Changes saved

Toast

feedback-02

A status message that rises into place. Toggle .is-open, auto-hide after a few seconds.

200ms · ease-out