Wind-up
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-wind-upAbout this component
A clockwork checkbox with a wind-up key on top: ticking gives the key two quick turns and lets go, then the key turns back in clicks and the tick clicks in with it, step by step, while the box rattles.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers4
- Click
- State change
- 3D
- Draw
Techniques6
- preserve-3d
- 3D transform
- Perspective
- Keyframes
- stroke-dashoffset
- SVG
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 whole toy.
Reduced motion
The key stays still and the tick appears at once.
Use it in anything you build, commercial and client work included. Licence