Quiet confirmation — acknowledge without celebrating. The checkmark draws itself in with a fluid stroke animation, like confident ink flowing across paper. A subtle scale pulse on completion says 'done' without shouting. In a dark interface where every pixel of light is intentional, the violet fill is a deliberate reward for decisive action.
Build a Linear-style smooth checkbox micro-interaction. Design philosophy — quiet confirmation: 1. Box: 18×18px rounded-md (4px radius). Unchecked: transparent bg, 1.5px border #3b3b44. The border is intentionally dim — it exists without demanding attention. 2. Checked state: Background fills to #7c5cfc with a 200ms scale animation (0.8→1.05→1.0, cubic-bezier(0.34, 1.56, 0.64, 1)). The border matches the fill color. 3. Checkmark: SVG polyline stroke, white (#ffffff), stroke-width 2, stroke-linecap round. Animated via stroke-dasharray/stroke-dashoffset — total path length ~24px, dashoffset transitions from 24→0 over 250ms ease-out with a 100ms delay (waits for the fill to establish itself). 4. The checkmark path: "M4 12 L9 17 L20 6" — two segments, the downstroke is shorter than the upstroke. 5. Label: 14px text-[#e2e2e6], transitions to line-through with opacity 0.5 on check. The strikethrough should feel like crossing off a real list. 6. Uncheck animation: Reverse — checkmark retracts (dashoffset 0→24, 150ms), then box scales (1.0→0.95→1.0, 150ms) and fill fades out (200ms). The result should make completing tasks feel satisfying without being distracting.