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.
Add to Cart Fly
ReactThe product tile arcs from the card into the cart glyph, and the badge ticks over on arrival.
Agent Step Timeline
ReactEach finished stage of an agent run ticks over and grows its connector toward the one after it.
AI Thinking Pulse
ReactA calm breathing dot with a soft expanding ring — the app is thinking, not stuck.
Badge Unlock
ReactAn earned badge lands and one band of light crosses its face — a single pass, then still.
Biometric Prompt
ReactA fingerprint glyph strokes itself in while the device reads, then a ring settles once it accepts.
Bottom Sheet Present
ReactA sheet rises from the bottom edge over a dimming backdrop and settles once.
Carousel Slide Advance
ReactSlides advance with the neighbours peeking, dots tracking position.
Cart Drawer Open
ReactThe cart panel travels in from the edge and its line items arrive a beat behind it.
Command Palette Open
ReactThe palette drops a short distance into place with its results already filtering as it lands.
Setup Complete
ReactThe last item checks itself off, the checklist clears, and a single confirmation takes its place.
Delete Confirm Morph
ReactA delete control widens in place into a question with a way out, instead of opening a dialog.
Destructive Hold to Confirm
ReactHolding fills the control at an honest rate; letting go early drains it back several times faster.
Expandable Detail Card
ReactA compact card that expands in place into a detail view — image and title travel continuously.
Field Reorder Drag
ReactA row lifts onto a shadow while the rows around it part to make room — by pointer, and by arrow key from a grabbed state.
Gallery Lightbox Open
ReactThe pressed thumbnail flies out of the grid into the large view while the backdrop dims behind it.
Like Button
ReactThe heart takes on its fill and settles once — no particle spray, no confetti.
Map Tiles Load
ReactTiles fade in out of order over the placeholder grid, the way a real map delivers them.
Multi-Agent Handoff
ReactA pip crosses the connector, the receiving card lifts as it takes the work, and the finished one recedes with a drawn check.
No Results Suggest
ReactAn empty result set settles into a quiet mark, then offers queries worth trying instead.
OTP Code Entry
ReactSix boxes: the waiting box lifts, digits settle in, and a wrong code answers with one short nudge.
Profile Header Parallax
ReactThe cover drifts at a fraction of the scroll while the avatar rides up and docks into the title bar.
Pull to Refresh
ReactDragging past a threshold arms the refresh, and the indicator tracks the finger the whole way.
Sign-in Success Handoff
ReactThe panel recedes as the product assembles behind it and the avatar travels into the header.
Skeleton to Content
ReactBreathing placeholders hand off to the real content in one cross-fade and a small lift.
Also here
Particles
Canvas effects with an honest particle count and cost.
WebGL
three.js effects that hand the WebGL context back when they scroll away.
Skills
Instructions to hand your agent at a specific moment.
Prompts
Image styles shown with the picture they produced.
UI Styles
Interface styles as real tokens, with a specimen screen rendered from them.
Palettes
Five colours, and the job each set is for — plus the job it will fail at.