Acme / prototype / micro-interaction

Task completed

A single click should feel like a tiny win. Circle fills, check draws, label strikes, a small burst, then the row quietly steps back. Click the row to play; click again to reset.

Send weekly digest Fri

click to toggle

Keyframes

fill0ms

check80ms

strike120ms

confetti200ms

collapse600ms

Copy-paste CSS

/* circle: clay flash, settle to olive with spring overshoot */
.task.done .check {
  animation: settle 380ms cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes settle {
  0%   { transform: scale(.8);  background: #F37521; }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1);   background: #C6B63B; }
}

/* checkmark draws via stroke-dashoffset, 80ms delay */
.check path        { stroke-dasharray: 20; stroke-dashoffset: 20;
                     transition: stroke-dashoffset 220ms var(--ease) 80ms; }
.task.done path    { stroke-dashoffset: 0; }

/* strikethrough grows left → right */
.label::after      { width: 0; transition: width 240ms var(--ease) 120ms; }
.task.done .label::after { width: 100%; }

/* row steps back after the celebration */
.task.done         { max-height: 44px; opacity: .6;
                     transition-delay: 600ms; }