Cloche
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-clocheAbout this component
A silver dome over a plate: ticking runs a glint across the dome, lifts it up and away with a tilt, and the dish underneath is the tick, with a puff of steam. Clearing puts the dome back down.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- Click
- State change
- Keyframe
Techniques5
- SVG
- Keyframes
- stroke-dashoffset
- CSS transition
- Transition delay stagger
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 plate.
Reduced motion
The dome lifts at once and there is no steam.
Use it in anything you build, commercial and client work included. Licence