Find the motion.
Copy the code.
Ship the vibe.

Production-ready motion patterns, with new ones landing daily. Each one is a single React file — powered by motion, nothing else — and the preview you see is that exact file running.

Try
Category
Mood
Every pattern · updated daily
interactive

Add to Cart Fly

React

The product tile arcs from the card into the cart glyph, and the badge ticks over on arrival.

commerceenergeticfriendly

Agent Step Timeline

React

Each finished stage of an agent run ticks over and grows its connector toward the one after it.

aiminimalcalm

AI Thinking Pulse

React

A calm breathing dot with a soft expanding ring — the app is thinking, not stuck.

aicalmminimal

Badge Unlock

React

An earned badge lands and one band of light crosses its face — a single pass, then still.

achievementpremiumenergetic

Biometric Prompt

React

A fingerprint glyph strokes itself in while the device reads, then a ring settles once it accepts.

authenticationpremiumfuturistic
interactive

Bottom Sheet Present

React

A sheet rises from the bottom edge over a dimming backdrop and settles once.

navigationpremiumcalm
interactive

Carousel Slide Advance

React

Slides advance with the neighbours peeking, dots tracking position.

navigationelegantenergetic
interactive

Cart Drawer Open

React

The cart panel travels in from the edge and its line items arrive a beat behind it.

commercepremiumminimal
interactive

Command Palette Open

React

The palette drops a short distance into place with its results already filtering as it lands.

navigationfuturisticpremium

Setup Complete

React

The last item checks itself off, the checklist clears, and a single confirmation takes its place.

onboardingpremiumcalm
interactive

Delete Confirm Morph

React

A delete control widens in place into a question with a way out, instead of opening a dialog.

feedbackcalmpremium
interactive

Destructive Hold to Confirm

React

Holding fills the control at an honest rate; letting go early drains it back several times faster.

feedbackpremiumcalm
interactive

Expandable Detail Card

React

A compact card that expands in place into a detail view — image and title travel continuously.

navigationpremiumelegant
interactive

Field Reorder Drag

React

A row lifts onto a shadow while the rows around it part to make room — by pointer, and by arrow key from a grabbed state.

formspremiumfriendly
interactive

Gallery Lightbox Open

React

The pressed thumbnail flies out of the grid into the large view while the backdrop dims behind it.

navigationpremiumelegant
interactive

Like Button

React

The heart takes on its fill and settles once — no particle spray, no confetti.

socialfriendlyenergetic

Map Tiles Load

React

Tiles fade in out of order over the placeholder grid, the way a real map delivers them.

loadingfuturisticcalm

Multi-Agent Handoff

React

A pip crosses the connector, the receiving card lifts as it takes the work, and the finished one recedes with a drawn check.

aifuturisticpremium

No Results Suggest

React

An empty result set settles into a quiet mark, then offers queries worth trying instead.

empty-statescalmfriendly
interactive

OTP Code Entry

React

Six boxes: the waiting box lifts, digits settle in, and a wrong code answers with one short nudge.

authenticationfriendlyminimal

Profile Header Parallax

React

The cover drifts at a fraction of the scroll while the avatar rides up and docks into the title bar.

socialpremiumelegant
interactive

Pull to Refresh

React

Dragging past a threshold arms the refresh, and the indicator tracks the finger the whole way.

loadingfriendlyenergetic

Sign-in Success Handoff

React

The panel recedes as the product assembles behind it and the avatar travels into the header.

authenticationpremiumcalm

Skeleton to Content

React

Breathing placeholders hand off to the real content in one cross-fade and a small lift.

loadingcalmminimal

Also here