A kit of the small animated details that make a website feel finished: buttons that answer a press, icons that change state, components that open and slide, and numbers that roll. It is plain CSS and a few small TypeScript functions, so it works in plain HTML, React, Vue or anything else, and this site runs on it.
Install
- Clone
git clone https://github.com/drkxbt/motion- Install
npm install github:drkxbt/motion- Use
import { asyncButton } from "@drkxbt/motion"
Features
- Buttons: press, async with a spinner then a tick or a cross, copy, hold to confirm, magnetic
- Ten icons with two states, driven by aria-pressed or aria-expanded
- Switch, tabs with a gliding pill, tooltip, toast, accordion and menu
- A counter that rolls like an odometer, a spinner, skeletons and progress
- Respects reduced motion and runs under a strict Content Security Policy
How it works
- Most of it is CSS: toggle a button's aria-pressed or aria-expanded and the icon inside it moves on its own.
- The script handles what CSS cannot: timing an async action, holding a press, stacking toasts, rolling digits.
- Every function takes an element you already have, keeps its markup and label, and returns a controller with destroy().
- Interface motion stays under 300ms with strong ease-out curves, and state changes are transitions, so they can be interrupted.
- Under reduced motion, movement stops and states change at once; spinners keep turning, slower.
Where it shows here
The tooltips on the contact keys, the bar that glides under Source, Engines and Skills, the star counts that roll up, the copy buttons, the arrow on Read the review, and the heart on Donate that beats when an address is copied.
Screenshots
ButtonsPress, async, copy, hold, pull 
IconsTen icons, two states each 
ComponentsSwitch, tabs, toast, menu 
LoadingCounter, spinner, progress
Stack
- TypeScript
- CSS custom properties
- Node test runner
Run it locally
git clone https://github.com/drkxbt/motioncd motionnpm installnpm run demo