Badge Morph

1"use client";
2 
3import { motion, AnimatePresence } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6type Status = "idle" | "loading" | "success" | "error";
7 
8export interface BadgeMorphProps {
9  status: Status;
10  label?: string;
11  className?: string;
12}
13 
14const LABELS: Record<Status, string> = {
15  idle: "Ready",
16  loading: "Deploying",
17  success: "Live",
18  error: "Failed",
19};
20 
21// Dynamic Island springs — stiffness 400, damping 30 is the golden ratio
22const SPRING_PILL = { type: "spring" as const, stiffness: 400, damping: 30 };
23const SPRING_CONTENT = { type: "spring" as const, stiffness: 420, damping: 25 };
24const SPRING_DRAW = { type: "spring" as const, stiffness: 300, damping: 15 };
25 
26// Icon accent colors — only the icon, not the pill surface
27const ACCENT: Record<Status, string> = {
28  idle: "",
29  loading: "",
30  success: "text-emerald-400 dark:text-emerald-600",
31  error: "text-red-400 dark:text-red-500",
32};
33 
34// Outer glow per status — radiates from the pill like a backlight
35function getGlow(status: Status): string {
36  const base = "0 1px 2px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.12)";
37  switch (status) {
38    case "idle":
39      return base;
40    case "loading":
41      return `${base}, 0 0 24px -6px rgba(96,165,250,0.4)`;
42    case "success":
43      return `${base}, 0 0 24px -6px rgba(52,211,153,0.5)`;
44    case "error":
45      return `${base}, 0 0 24px -6px rgba(248,113,113,0.45)`;
46  }
47}
48 
49/* ─── Icons ───────────────────────────────────────────── */
50 
51function IdleDot() {
52  return (
53    <span className="relative flex items-center justify-center size-4">
54      <motion.span
55        className="absolute size-1.5 rounded-full bg-current opacity-30"
56        animate={{ scale: [1, 1.8, 1], opacity: [0.3, 0, 0.3] }}
57        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
58      />
59      <span className="relative size-1.5 rounded-full bg-current opacity-60" />
60    </span>
61  );
62}
63 
64function Spinner() {
65  return (
66    <svg
67      width="16"
68      height="16"
69      viewBox="0 0 16 16"
70      fill="none"
71      className="animate-[badge-morph-spin_0.8s_linear_infinite]"
72    >
73      <circle
74        cx="8"
75        cy="8"
76        r="6"
77        stroke="currentColor"
78        strokeWidth="1.5"
79        opacity="0.12"
80      />
81      <circle
82        cx="8"
83        cy="8"
84        r="6"
85        stroke="currentColor"
86        strokeWidth="1.5"
87        strokeLinecap="round"
88// … truncated