feat: animate completed items out

frontend/src/lib/completion-motion.ts

@@ -3,6 +3,25 @@ type CompletionId = string
 type CompletionTimer = number
 type CompletionFrame = number
 
+export const COMPLETION_EXIT_DURATION = 320
+
+export function shouldAnimateCompletionExit({ completing, showCompleted }: { completing: boolean; showCompleted: boolean }) {
+  return completing && !showCompleted
+}
+
+export function completionExitDelay(reducedMotion: boolean) {
+  return reducedMotion ? 0 : COMPLETION_EXIT_DURATION
+}
+
+export function prefersReducedMotion() {
+  return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
+}
+
+export function waitForCompletionExit(reducedMotion = prefersReducedMotion()) {
+  const delay = completionExitDelay(reducedMotion)
+  return delay ? new Promise<void>((resolve) => window.setTimeout(resolve, delay)) : Promise.resolve()
+}
+
 export function createCompletionPulse(
   activate: (id: CompletionId) => void,
   deactivate: (id: CompletionId) => void,