vibecoder skills

Motion lab

Seventeen patterns from the catalog's libraries, rebuilt in plain CSS so you can try each one before installing anything. Every card names its source.

Easing playground

Motion tokens from transitions-polish
Curve
Top: your curve. Bottom: linear, for comparison.

Motion tokens from transitions.dev and transitions-polish by @Jakubantalik

Gliding highlight

Pattern from Fluid Functionalism by @mickadesign

Split-flap board

Pattern from Annimate

Spring toggle

On

Pattern from transitions.dev by @Jakubantalik

Toast stack

Click "Show a toast" a few times.

Pattern from transitions.dev, banner stacking

Rolling digits

Pattern from Annimate. Real GitHub stars.

Magnetic button

Hover near it

Pattern from Amicro by @Subhan-code

Accordion

No. It is a list. Each entry links to its own repo, with its own license and install steps.

The makers named on every entry in the catalog. This site only points to their work.

So the page needs nothing but fonts, and so you can feel each pattern before you install anything.

Pattern from transitions.dev by @Jakubantalik

Text scramble

Pattern from Annimate, dual scramble

Like button

Tap the heart

Pattern from transitions.dev, like button

Tilt card

Move across it
Video & diagramsSkill Archify Describe a system and get an interactive HTML diagram. @tt-a1i

Pattern from Amicro by @Subhan-code

Rotating words

Your agent can handle motion, taste, review and restraint.

Pattern from Annimate

Success check

Pattern from transitions.dev, success check

Loaders

Orbit
Wave
Blocks

Pattern from loading-dev by @jakubkrehel

Error shake

Try a wrong one first.

Pattern from transitions.dev, error shake

Text reveal

Pattern from Annimate, text reveal

Stagger list

Pattern from transitions.dev, stagger