Overview
A CSS-only checkbox built in layers. Unchecked it reads as a glass hairline over a faint dot grid; checked, the box fills with ink, a conic-gradient ring spins behind it, an ambient bloom rises, the checkmark draws itself on by dash-offset and six particles burst outward on staggered delays. The geometry and motion the source published are intact — a 34px box, a 3s ring and a 620ms burst — while the palette is HorizonX's: one Ink control and one Check mark, on the design system's 12px radius and 250ms base timing, plus a transparent host, a native keyboard-accessible input, a visible focus ring and reduced-motion support. Every alpha is derived from those two colours, so one drag re-tints the whole component instead of leaving stale accents behind. One Size control replaces the small and large variants and lands on both. Edit the palette, geometry, texture, bloom and timing, then export one self-contained HTML file.
Highlights
- Spinning conic-gradient ring while checked
- Six-point particle burst on staggered delays
- Fully re-tintable palette, no hardcoded accents
- Native keyboard-accessible checkbox
- Reduced-motion fallback