Press
Every .m-btn gives a little under your finger, so a press always feels heard.
github.com/drkxbt/motion
motion
Small animated details for websites: buttons, icons, components and loading states. Plain CSS and TypeScript, no dependencies. Everything on this page is live.
Buttons
Async
A spinner while it works, then a tick or a cross. The width never moves.
npm i github:drkxbt/motionCopy
The glyph turns into a tick and the result is read aloud.
Hold to confirm
For actions that should never happen by accident. Let go early and it runs back.
Magnetic
Leans toward a mouse as it comes near and springs back. Off for touch and reduced motion.
Like
The heart pops and throws sparks while the count rolls up: two pieces of the kit working together.
Icons
Each one has two states. Toggle the button's aria-pressed or aria-expanded and the icon moves on its own.
Components
Switch
The thumb slides across and stretches a little while pressed.
Tabs
A pill or a bar that glides between tabs. The pill recolours the label it passes over.
Tooltip
The first one waits a moment; the next ones show at once as you move along.
Toast
They stack, open on hover, pause their clock while you read, and swipe away.
No. It is CSS and a few small functions, so it works in plain HTML, React, Vue or anything else.
Movement stops and states change at once. Spinners keep turning, slower.
Accordion
The panel grows to its own height while the text rises in. No heights in script.
Menu
Grows out of its button's corner, fast. Arrow keys, Home, End and Escape all work.
Numbers and loading
Counter
Digits roll like an odometer: up when it grows, down when it shrinks.
Spinner
Eight bars, quick on purpose. A faster spinner makes the same wait feel shorter.
Skeleton
A placeholder in the shape of what is coming, with a soft sheen moving across.
Progress
Eases to each new value instead of jumping, or sweeps when the length is unknown.