Lantern
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-lanternAbout this component
A folded paper lantern on a string: ticking drops it open with a bounce and a little swing, and the candle inside catches with a flicker so the tick painted on the paper shows against the light. Clearing puts the light out and folds it back up.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- Click
- State change
- Glow
Techniques4
- CSS transition
- Keyframes
- Gradient
- Radial gradient
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 lantern.
Reduced motion
It opens and lights at once, without the swing or flicker.
Use it in anything you build, commercial and client work included. Licence