Claude Model Selector: Animated Effort Level Picker
Claude Model Selector: a JavaScript library that renders a draggable six-level effort picker as a zero-dependency web component. Features: Magnetic drag with spring physics snapping on release Full keyboard support w
Claude Model Selector: a JavaScript library that renders a draggable six-level effort picker as a zero-dependency web component.
Features:
- Magnetic drag with spring physics snapping on release
- Full keyboard support with arrow keys, Home, and End
- An animated Canvas pixel field on its top tier
- Built-in
prefers-reduced-motionhandling - Theming through CSS custom properties, no Shadow DOM workarounds needed
Useful if you are building a settings panel, an AI tool configuration screen, or any interface that needs a smooth intensity or workload selector without pulling in a UI framework.
π Blog Post
π GitHub Repo
π Live Demo
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β full credit and traffic to the original publisher.