Snowfall
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-snowfallAbout this component
Let it snow: ticking sends a flurry down into the box, the flakes drifting as they fall, and as they settle the tick builds up out of the snow and a cap of snow forms on the rim. Clearing melts it all away.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers4
- Click
- State change
- Keyframe
- Delay stagger
Techniques4
- SVG
- Keyframes
- 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 box.
Reduced motion
There are no flakes and the tick appears at once.
Use it in anything you build, commercial and client work included. Licence
More checkboxes
See allPress and drag down the boxes
Terms of use
1. You can use what you make here in personal and client work.
2. Please don't resell the components themselves.
3. We may update these terms, and we will tell you when we do.
4. That's all. Thanks for reading to the end.