Overview
The demo is a launch checklist with tasks such as Publish the changelog and Record the demo video. Drag a row by its handle, use the visible move up and move down buttons, or focus a row and use the keyboard; each move is announced. Motion: enter (lift highlight; displaced rows slide to their new place): 220 ms, cubic-bezier(0.2, 0.8, 0.2, 1); settle (moved row: spring stiffness 320, damping 36, mass 1; critically damped, no bounce): 320 ms, linear(0.000, 0.113, 0.317, 0.512, 0.667, 0.779, 0.857, 0.909, 0.943, 0.964, 1); exit (lift highlight drops on release): 160 ms, cubic-bezier(0.4, 0, 1, 1). Every duration and easing curve lives in one tokens file, so changing a value there changes the motion everywhere. With reduced motion turned on, the component changes state without movement and stays fully usable. Built with React 19 and TypeScript, Tailwind CSS 4 and Motion, with keyboard and screen reader behavior from React Aria. Light and dark themes come from CSS variables you can edit. Included: the component source, the accessible behavior it is built on, shared motion tokens, light and dark theme variables, a runnable demo page, and setup guides for people and for AI coding agents.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
