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 with arrow keys, Home, and End
• An animated Canvas pixel field on its top tier
• Built-in prefers-reduced-motion handling
• 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