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.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
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 #2E2546. The border is intentionally dim — it exists without demanding attention.
2. Checked state: Background fills to #8B5CF6 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 (#0A0A0F), 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-[#F5F3FF], 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.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.