Exits are quicker than entrances.
Arrive with care, leave out of the way.
51 components
Odometer
Rolls forward like a mechanical counter and wraps from 999 back to 000.
Hold to delete
Fills slowly while you commit to it, snaps back the moment you let go.
Segmented control
Each label changes color exactly as the pill slides over it.
Tilt card
Leans toward your cursor with a glare that follows the light.
Dock
Icons swell as your cursor nears them, like the macOS dock.
Drag this sheet down to close it. A quick flick works too, and dragging it up pushes back.
Sheet
Drag it down or flick it away; pull it up and it pushes back.
Toast stack
Stacks with depth, fans out on hover, swipes away.
Elastic slider
Stretches like rubber when you drag past the end, then springs back.
Magnetic button
Leans toward your cursor before you even reach it.
Text scramble
Hover a word and it decodes itself, one letter at a time.
Exits are quicker than entrances.
Arrive with care, leave out of the way.
Swipe deck
Fling a card away and the rest of the deck steps forward.
Scroll reveal
Words light up one by one as you scroll through them.
$ bun add motionCopy button
Confirms the copy before the clipboard even answers.
Press / to search
Expanding search
Opens from a circle into a search field, and closes faster than it opens.
A collection of small interface components, each built to get the details right: timing, easing, focus and both themes.
React with Tailwind, CSS transitions wherever they can do the job, and Motion only for springs and gestures CSS cannot express.
Yes. Every component is a single file with no setup, so copy it into your project and adjust the tokens to match.
It does. Movement drops out and only gentle fades remain, so every state change is still clear without anything sliding around.
Accordion
Opens without moving the row you clicked, so it closes right where you are.
Expanding card
Grows from its slot into a detail view and folds back when you are done.
Try 123456
OTP input
Six slots mirror one real input, so paste and SMS autofill just work.
Toggle switch
Leans into the move when pressed, then springs across and squashes on landing.
Command palette
Opens on ⌘K and filters commands as you type.
Marquee
Drifts endlessly, and brakes gently when you hover.
Press Space to pick up. While holding, use the arrow keys to move, Space to drop, or Escape to cancel.
Reorder list
Picks rows up by the handle and slides the rest out of the way.
Compare slider
Drag the line to see what polish actually changes.
Multi-step form
Slides between steps while the card grows around each one.
Upload button
Shrinks into a progress ring, fills, then checks off.
Scan the toolbar, not the docs.
Tooltip group
Waits before the first tooltip, then shows each neighbor instantly as you scan.
Dropdown menu
Grows out of its trigger, and press, drag, release picks an item like a native menu.
Dynamic island
Morphs between live states with a springy, Apple-style bounce.
Scrub input
Drag the label to scrub the value, or just type.
How was your stay?
Star rating
Hover to preview, click to commit with a little pop.
Like button
Pops, bursts and rolls the count when you like.
Sliding tabs
An underline glides to the tab you pick while a soft pill follows your pointer.
Page dots
A pill that inches between pages like a worm and counts down to the next.
Home
Collapsible sidebar
Folds down to an icon rail, with labels that step aside before it closes.
Snap carousel
Snaps cards to center, grows them as they arrive, and drags with the mouse.
Skeleton loader
Holds the exact shape of what is coming, so nothing jumps.
Right-click anywhere
Long-press on touch, Shift F10 from the keyboard
Context menu
Opens at your cursor and grows from it.
Notifications
Notification bell
Rings when something new arrives, and the badge rolls up with each one.
Avatar stack
Fans open when you reach for it, with a name above each face.
Morphing button
Shrinks into a spinner while it saves, then answers with a check or a shake.
Press Space to pick up. While holding, use the arrow keys to move within or between columns, Space to drop, or Escape to cancel.
Kanban board
Lift a card and the others slide aside to make room for it.
Color swatches
The ring glides to the color you pick and the preview follows it.
Mini calendar
Months slide past in the direction you travel.
Floating label
Rises into the corner as you type, and never covers what you wrote.
Password field
Fills its meter as the password gets stronger.
Filter list
Rows fade out of the way while the rest slide up to close the gap.
Gauge
Fills its arc and counts up to the value on the same spring.
Response time
107 ms
-13 ms vs Aug 25
| Day | Value |
|---|---|
| Aug 25 | 120 ms |
| Aug 26 | 112 ms |
| Aug 27 | 121 ms |
| Aug 28 | 125 ms |
| Aug 29 | 126 ms |
| Aug 30 | 124 ms |
| Aug 31 | 124 ms |
| Sep 1 | 120 ms |
| Sep 2 | 121 ms |
| Sep 3 | 126 ms |
| Sep 4 | 122 ms |
| Sep 5 | 116 ms |
| Sep 6 | 121 ms |
| Sep 7 | 122 ms |
| Sep 8 | 116 ms |
| Sep 9 | 114 ms |
| Sep 10 | 111 ms |
| Sep 11 | 112 ms |
| Sep 12 | 109 ms |
| Sep 13 | 118 ms |
| Sep 14 | 114 ms |
| Sep 15 | 121 ms |
| Sep 16 | 116 ms |
| Sep 17 | 109 ms |
| Sep 18 | 104 ms |
| Sep 19 | 100 ms |
| Sep 20 | 101 ms |
| Sep 21 | 106 ms |
| Sep 22 | 99 ms |
| Sep 23 | 107 ms |
Sparkline
Draws itself in, then scrubs to the nearest point under your cursor.
Focus hours
36.7 h
Bar chart
Grows its bars from the baseline and springs them between two weeks.
Drafts
Launch notes
Three fixes, one new component, and a faster index. Ship Thursday after review.
Anyone with the link can view. Invite people to let them edit.
They'll get an email and can edit right away.
Stacked drawer
Stacks iOS sheets that push the page back and drag down to dismiss.
Confetti button
Bursts theme-colored confetti from the button.
Build interfaces that feel right, fast, alive, or effortless.
Typewriter
Types, pauses and rewrites the last word with a human rhythm.