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.
The pill’s two edges ride separate springs, so it stretches while it travels.
The bar is one blob of liquid; a bulge flows to the selected tab.
The selected tab grows into a pill and its label slides out.
Top tabs with swiping panels; the underline moves like an inchworm.
A glowing dot hops in an arc to the new tab and squashes on landing.
Opening a tab bursts its badge; new notifications pop back in.
Three bars gather and turn into an ✕ with a little overshoot.
The card unfolds, items arrive one by one, a highlight follows you.
The ⋮ dots fly out on little arcs and become the item icons.
No results
⌘K search that drops in; results stagger, the highlight glides.
New toasts push the older ones back; hover spreads the stack.
Toasts pop up with a bounce; flick one away and the list closes up.
A snackbar springs up and bumps the floating button out of its way.
The same toast again merges into the first and counts ×2, ×3…
Press and hold: a ring fills, a shake warns you, then it pops into a check.
Copies to the clipboard; the icon draws a check and a “Copied!” tip pops up.
A CTA with a soft shine on hover and a bright sweep, flash and sparkles on press.
Drag the knob to the end to confirm; let go early and it springs back.
Drag a row left: a red trash area opens; past the line it flies out and the list closes up.
Drag a row left and its action buttons slide out and snap open, icons popping in.
A swiped-away row shrinks into a “Deleted · Undo” strip with a timer line.
We'll never share it.
The label floats up into a gap in the outline; the border glows on focus.
Checks as you type: a check draws in, or the field shakes and shows a hint.
The eye opens and each dot slides into its letter; tap again to hide.