24 micro-interactions for buttons, forms, lists, overlays and navigation. Each one is feedback, not a show: 120–200 ms, ease-out, keyboard and screen-reader ready, and still usable with reduced motion. One CSS file, one small ES module, no dependencies.
Stockroom · Main warehouse
Yesterday's orders and stock, at 08:00.
Everything eases out on cubic-bezier(.2, 0, 0, 1). Things that settle use a gentle spring written in CSS linear(), with 1.5 % overshoot and the same curve as fallback.
The pieces people press most. The response lands before the action does.
Every button. A 3 % press confirms the click; release springs back. Quick taps are held for 100 ms so they still show.
120 ms down · 280 ms spring up · scale .97
Reduced motion. No scale. The hover and press colours still mark the press.
Buttons that save or send. The width never changes, loading shows for at least 400 ms so it never flickers, and the check draws once.
160 ms label swap · 280 ms check draw · 1.8 s hold
Reduced motion. Labels crossfade in place, the spinner holds still and the check appears without drawing. “Saving” and “Saved” are announced.
Settings that apply at once. While pressed, the thumb stretches toward where it is about to go, then travels on a spring.
160 ms squash · 280 ms spring travel · 160 ms track colour
Reduced motion. The thumb jumps without squash; the track colour still fades.
Order again when stock drops below 10.
Everyone in Main warehouse can edit.
Opt-ins and multi-select lists. The box fills, then the tick draws the way you would write it. A native input, so forms and labels just work.
120 ms fill · 200 ms draw · CSS only
Reduced motion. The tick appears at once.
Switching between two to five views of the same data. The raised indicator glides; arrow keys move the choice.
280 ms spring glide · 120 ms label colour
Reduced motion. The indicator jumps to the new option.
Sections of one object that share a page. The underline glides (transform only); panels share one grid cell, so the page never jumps.
280 ms spring glide · 200 ms panel crossfade
Reduced motion. The underline jumps; panels crossfade without the rise.
Sent on 21 Oct. Opened twice. Rina asked to split the delivery into two drops.
Confirmations and state changes. Each one is announced to screen readers through one polite live region.
Values people paste somewhere else: keys, links, commands. The icon turns into a tick and the label says Copied, then both return.
120 ms swap · 280 ms spring tick · 1.6 s hold
Reduced motion. Icons and labels crossfade without scaling.
iz_live_4f9a2c81e7b3d6
Fields with a format. Errors wait until you leave the field and clear the moment the value is right. The message shares the hint's line, so nothing below moves.
120 ms border · 160 ms message · no shake
Reduced motion. The message fades in place; the valid tick appears without scaling.
We send invoices and receipts here.
Confirmations that need no action. New toasts push the stack back; hover or focus expands it and pauses the timers. Swipe sideways, press Escape or use the close button to dismiss.
200 ms enter · 280 ms spring restack · 5 s timer, paused on hover
Reduced motion. Toasts fade in and out in place; the stack still restacks, without sliding.
A state that changes while people watch: builds, syncs, payments. Colour fades and the icon turns into the next one. Labels share one cell, so the chip keeps its width.
200 ms colour · 280 ms spring icon morph
Reduced motion. Icons crossfade without turning; the running ring holds still.
Uploads and exports with a known size. The bar scales (never width), the number is tabular so it does not wobble, and the label turns into a quiet done state.
280 ms per step · 200 ms done colour
Reduced motion. The bar steps without easing; start and finish are announced, not every percent.
Numbers and rows that change under people's eyes. Mono, tabular, and never shifting the layout.
Counters and totals that change while visible. Only changed digits roll, in the direction of the change, right-most first.
280 ms spring · 14 ms stagger · tabular mono
Reduced motion. Digits switch at once. Screen readers get the full number, not the digit strips.
KPI tiles that update live. A soft tint behind the number fades out, so the eye finds what changed; the arrow turns with the direction.
900 ms tint fade · 280 ms roll · 280 ms arrow turn
Reduced motion. The tint still fades (no movement); digits and arrow switch at once.
First load of a known layout. Skeleton and content share one grid cell, so the box keeps its size and nothing shifts when data arrives.
160 ms out · 200 ms in · 3 px rise
Reduced motion. Crossfade only, and the skeleton does not pulse.
Rows with details people check now and then. The table stays scannable; the detail opens under its row with the real height, no measuring.
280 ms height · 200 ms chevron · 60 ms content delay
Reduced motion. Rows open and close at once.
| Details | Order | Total | |
|---|---|---|---|
| INV-1042 | $1,240.00 | ||
| |||
| INV-1041 | $386.50 | ||
| |||
| INV-1040 | $2,015.00 | ||
| |||
Items that appear, leave and change places. Neighbours slide to make room instead of jumping.
Lists people edit directly. One flip() helper measures, lets you change the DOM however you like, then plays the difference with transforms.
200 ms enter · 120 ms exit · 200 ms FLIP · 280 ms sort
Reduced motion. Items appear, leave and reorder in place. Every change is announced.
Priorities people rank by hand. The card lifts under the pointer, neighbours step aside, and it settles into its slot. Keyboard: Space to lift, arrows to move, Space to drop, Escape to cancel.
160 ms lift · 200 ms step aside · 200 ms settle
Reduced motion. No lift scale or settling glide; cards still follow the pointer and swap in place.
Press Space to lift a card, the arrow keys to move it, Space to drop it, or Escape to cancel.
FAQs and settings groups. Height animates through CSS grid rows (0fr to 1fr), so there is no measuring and nothing to recalculate when content changes.
280 ms height · 200 ms chevron · 60 ms content delay
Reduced motion. Panels open and close at once.
Yes. Changes apply from the next billing day, and unused days carry over.
Only people you add to the workspace. Each person gets view or edit rights per site.
Every night, kept for 30 days. You can restore a single record or a whole day.
Things that open over the page. They come from where you clicked, leave faster than they arrive, and give focus back.
Row actions and overflow menus. The panel grows out of the button that opened it, flips above when there is no room, and closes on Escape, Tab or an outside click.
160 ms in · 120 ms out · scale .95 from the trigger
Reduced motion. The menu fades without scaling.
Icon-only buttons. Waits 500 ms on the first hover, then switches at once between neighbours. Shows straight away on keyboard focus, stays while you hover it, and Escape hides it.
500 ms intent · 120 ms fade · 300 ms warm window
Reduced motion. Fade only, no rise. The delay stays: it is about intent, not motion.
Confirmations that block. A native <dialog>: focus is trapped and returned for free. Escape, the backdrop and every close button leave with the same motion.
200 ms in · 120 ms out · 6 px rise · scale .97
Reduced motion. Panel and backdrop fade only.
Jumping and running commands from the keyboard. Opens like a dialog; one highlight glides between results as you type, arrow or hover. Press Ctrl K (⌘ K on Mac) anywhere on this page.
200 ms open · 120 ms highlight glide
Reduced motion. The palette fades in and the highlight jumps.
motion-clean.css and motion-clean.js in your project (or the .min copies for production). Add fonts/ too if you do not load Geist yet.<link rel="stylesheet" href="motion-clean.css">
<script type="module">
import { init } from "./motion-clean.js";
init();
</script>--cl-* tokens win automatically; elsewhere, set --cl-accent on :root to rebrand.<head>, before any stylesheet:
<script>try{var t=localStorage.getItem("mc-theme");if(t)document.documentElement.dataset.theme=t}catch(e){}</script>| Export | What it does |
|---|---|
init(scope?) | Binds every [data-mc] in scope. Safe to call again after you add markup. |
get(el, name?) | The controller for an element, e.g. get(el, "toasts").add({...}). |
replay(el) | Plays an element's interaction once. |
toast(opts) | Adds a toast: { title, body, tone, duration }. |
flip(box, mutate) | Measures children, runs your DOM change, animates the difference. |
announce(text) | Says something through the shared polite live region. |
setTheme(t) | Crossfades to "light" or "dark" and remembers it. |
reduced() | True under reduced motion or html[data-motion="reduce"]. |
pulse(el) | Plays a button press once. |
All bubble. mc:change (switch, segmented, tabs, roll, list, sortable, accordion, status), mc:submit (loading button: call e.detail.waitUntil(promise)), mc:select (menu, palette), mc:open / mc:close (dialog), mc:navigate (page), mc:theme (document).
| Feature | Chrome, Edge | Safari | Firefox |
|---|---|---|---|
| Everything | 111+ | 16.4+ | 113+ |
Spring linear() | 113+ | 17.2+ | 112+ |
| View Transitions | 111+ | 18+ | 144+ |
Without linear(), springs use the ease-out curve. Without View Transitions, page changes use a Web Animations crossfade and the theme switch fades colours for one beat. Nothing breaks; it only gets plainer.
Use the pack in unlimited personal and client projects, commercial ones included. Do not resell or share the pack itself as a kit. Geist and Geist Mono come with it as free extras under the SIL Open Font License 1.1 (fonts/OFL-Geist.txt); they are not sold.