Reduce motion
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/checkbox-reduce-motionAbout this component
A reduce motion setting that shows what it does: a ball bounces beside the label while motion is on, and ticking calms it, each bounce lower than the last, until it rests on the floor. Clearing lets it bounce again.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers4
- Click
- State change
- Continuous
- Loop
Techniques4
- @property
- Keyframes
- CSS transition
- CSS variables
Accessibility
Keyboard and screen readers
A native checkbox inside a <label>, so Space toggles it and the visible label names it; :focus-visible on the input outlines the box.
Reduced motion
The ball is still from the start, as the setting itself promises.
Use it in anything you build, commercial and client work included. Licence
More checkboxes
See allShippingMira Patel14 Harbour RoadBristol BS1 4QA