Overview
The demo is a plan estimator with a single slider for team seats and a two-thumb slider for a price range. Drag the thumbs, or focus one and use the arrow keys, Page Up, Page Down, Home and End. Motion: enter (bubble fades in; keyboard step eases thumb and fill): 180 ms, cubic-bezier(0.2, 0.8, 0.2, 1); exit (bubble fades out): 120 ms, cubic-bezier(0.4, 0, 1, 1); pointer drag (thumb follows the pointer directly): 0 ms, linear. The shared easing curves live in one theme file, and each duration sits right next to its transition. With reduced motion turned on, the component changes state without movement and stays fully usable. Built with React 19 and TypeScript and Tailwind CSS 4, animated with plain CSS transitions (no animation library), with keyboard and screen reader behavior from Base UI. Light and dark themes come from CSS variables you can edit. Included: the component source, the accessible behavior it is built on, 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
