A CSS-only checkbox whose crossed strokes rotate and squash into a checkmark, set in a HorizonX glass card.
About this tool
A checkbox that never swaps one glyph for another. Two bars crossed at 45 degrees read as an X; on check they rotate to 50 degrees, translate, and the upper stroke squashes to 60% of its length, so the same two elements resolve into a checkmark in a single 300ms ease-in-out move. The published geometry survives as ratios of one Size control — a 50px box at 8px corners carrying 30x4 bars — so the component lands at any scale instead of shipping fixed variants. HorizonX replaces the source's neumorphic grey and its green checked state with a single Ink control: the plate and strokes are derived from it with color-mix, alpha carries the state change, and one drag re-tints the whole component. It sits in a glass card at the design system's card radius and blur, with display type and a description, both switchable back to the bare control. Underneath is a real keyboard-accessible input with a visible focus ring and a reduced-motion fallback. Edit the palette, geometry, card and timing, then export one self-contained HTML file.
UI/UX · HTML / CSS · All tools