UI Motion Prompts← Free prompts
New · 24 components

The animations from the reels,
as copy-paste code.

Tap the 24 components below — they are the real code. Paste them into your site or app: plain HTML/CSS/JS or React. Change every color, size and speed with CSS variables.

Get the code — $49
$49 · Team license $99
Try your colors
Sliding PillTab Bar

The pill’s two edges ride separate springs, so it stretches while it travels.

HTML · CSS · JS · React
Liquid BulgeTab Bar

The bar is one blob of liquid; a bulge flows to the selected tab.

HTML · CSS · JS · React
Expanding LabelTab Bar

The selected tab grows into a pill and its label slides out.

HTML · CSS · JS · React
Worm UnderlineTab Bar

Top tabs with swiping panels; the underline moves like an inchworm.

HTML · CSS · JS · React
Hopping DotTab Bar

A glowing dot hops in an arc to the new tab and squashes on landing.

HTML · CSS · JS · React
Badge PopTab Bar

Opening a tab bursts its badge; new notifications pop back in.

HTML · CSS · JS · React
Hamburger MorphMenu

Three bars gather and turn into an ✕ with a little overshoot.

HTML · CSS · JS · React
Staggered DropdownMenu

The card unfolds, items arrive one by one, a highlight follows you.

HTML · CSS · JS · React
Kebab PopoverMenu

The ⋮ dots fly out on little arcs and become the item icons.

HTML · CSS · JS · React
Command PaletteMenu

⌘K search that drops in; results stagger, the highlight glides.

HTML · CSS · JS · React
Stacked ToastsNotifications

New toasts push the older ones back; hover spreads the stack.

HTML · CSS · JS · React
Swipe to DismissNotifications

Toasts pop up with a bounce; flick one away and the list closes up.

HTML · CSS · JS · React
Snackbar PushNotifications

A snackbar springs up and bumps the floating button out of its way.

HTML · CSS · JS · React
Merge CounterNotifications

The same toast again merges into the first and counts ×2, ×3…

HTML · CSS · JS · React
Hold to ConfirmButton

Press and hold: a ring fills, a shake warns you, then it pops into a check.

HTML · CSS · JS · React
join.app/x7Kq2 Copied!
Copy FeedbackButton

Copies to the clipboard; the icon draws a check and a “Copied!” tip pops up.

HTML · CSS · JS · React
Shine SweepButton

A CTA with a soft shine on hover and a bright sweep, flash and sparkles on press.

HTML · CSS · JS · React
Slide to ConfirmButton

Drag the knob to the end to confirm; let go early and it springs back.

HTML · CSS · JS · React
  • KaiSee you at six?
  • MiaSent you the new mockups
  • LeoLunch tomorrow works
Swipe to DeleteSwipe Actions

Drag a row left: a red trash area opens; past the line it flies out and the list closes up.

HTML · CSS · JS · React
  • KaiDesign review moved to 3pm
  • MiaCan you check the new flow?
  • ZoeInvoice for October
Reveal ActionsSwipe Actions

Drag a row left and its action buttons slide out and snap open, icons popping in.

HTML · CSS · JS · React
  • KaiBooked the table for Friday
  • LeoHere are the photos from Sunday
  • MiaThanks, that works!
Inline UndoSwipe Actions

A swiped-away row shrinks into a “Deleted · Undo” strip with a timer line.

HTML · CSS · JS · React

We'll never share it.

Floating LabelText Field

The label floats up into a gap in the outline; the border glows on focus.

HTML · CSS · JS · React

Live ValidationText Field

Checks as you type: a check draws in, or the field shakes and shows a hint.

HTML · CSS · JS · React
Password RevealText Field

The eye opens and each dot slides into its letter; tap again to hide.

HTML · CSS · JS · React

Get all 24 components

Get the code — $49
$49 · Team license $99
Want the 438 prompts too? Get both for $59 (save $9).