snapme

1"use client"
2
3import { motion, useReducedMotion } from "motion/react"
4
5import type { CountdownValue } from "@/features/capture/machine"
6import { cn } from "@/lib/utils"
7
8/* DESIGN-SYSTEM §9: lingkaran 168 px, garis 4 px, bayangan keras violet,
9   angka Unbounded 900 96 px, isi lime untuk 3 dan 2, pink untuk 1. */
10export function CountdownOverlay({ value }: { value: CountdownValue }) {
11  const reduceMotion = useReducedMotion()
12
13  return (
14    <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
15      <motion.div
16        key={value}
17        role="status"
18        data-testid="countdown"
19        initial={reduceMotion ? false : { scale: 0.6, opacity: 0 }}
20        animate={{ scale: [0.6, 1.08, 1], opacity: 1 }}
21        transition={{ duration: 0.5, times: [0, 0.6, 1], ease: [0.16, 1, 0.3, 1] }}
22        className={cn(
23          "font-display flex size-42 items-center justify-center rounded-full border-4 border-ink text-[96px] leading-none font-black text-ink shadow-hard-violet",
24          value === 1 ? "bg-pink" : "bg-lime"
25        )}
26      >
27        {value}
28      </motion.div>
29    </div>
30  )
31}
32