Keyframe
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-keyframeAbout this component
A checkbox on a tiny animation timeline: ticking scrubs the playhead along the track while the tick draws in step with it, the span between the keyframes fills in, and an end keyframe pops in where the playhead stops.
- Dependencies
- None
- Difficulty
- Beginner
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- Click
- State change
- Draw
Techniques4
- SVG
- stroke-dashoffset
- CSS transition
- Transform only
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 tick, playhead and keyframe change at once.
Use it in anything you build, commercial and client work included. Licence