Easing
Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
CSS
Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Install with shadcn
Needs a free account token. Get a token
npx shadcn@latest add @movin/radio-easingAbout this component
An easing picker that shows the curve and the motion: the chosen curve draws itself on a little graph while a square beside it runs the motion in a loop, steady for linear, quick then gentle for ease out, past the end and back for spring.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers5
- Click
- State change
- Continuous
- Loop
- Draw
Techniques4
- Keyframes
- SVG
- stroke-dashoffset
- CSS transition
Accessibility
Keyboard and screen readers
A role="radiogroup" with an aria-label around native radio inputs sharing one name, so the arrow keys move the choice and Tab enters the group once; :focus-visible on the input outlines its option.
Reduced motion
The loop stops, the square rests at the end and the curve appears at once.
Use it in anything you build, commercial and client work included. Licence