microinteraction-library

name

microinteraction-library

description

This skill should be used when the user needs production-ready animation patterns for specific UI states or feedback moments. Trigger when the user mentions "loading state", "skeleton screen", "loading spinner", "error animation", "error shake", "success animation", "success checkmark", "form feedback", "button loading state", "checkbox animation", "toggle animation", "notification badge", "like animation", "copy to clipboard feedback", "progress indicator", "toast notification animation", or wants to add "polish" or "juice" to individual UI components. Also trigger when the user asks how to animate specific component states (empty state, error state, success state, pending state).

Microinteraction Pattern Library

Microinteractions define product feel and polish. Each one is a small, specific, meaningful moment of feedback — a confirmation that the product is alive and responding. The goal is not novelty but clarity and delight in equal measure.

Design principle: Every microinteraction must earn cognitive attention. Animations that are too slow, too large, or too frequent become visual noise. The best microinteractions are noticed when absent, not when present.

---

Pattern Catalog

Loading States

Skeleton Screen (preferred over spinners)

Use when: content shape is known ahead of load. Reduces disorientation by showing the incoming structure.

function SkeletonCard() {
  return (
    <div className="skeleton-card">
      <div className="skeleton-avatar" />
      <div className="skeleton-lines">
        <div className="skeleton-line skeleton-line--wide" />
        <div className="skeleton-line skeleton-line--medium" />
        <div className="skeleton-line skeleton-line--narrow" />
      </div>
    </div>
  );
}

.skeleton-line,
.skeleton-avatar {
  background: #e0e0e0;
  border-radius: 4px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* Stagger the wave across elements */
.skeleton-line:nth-child(2) { animation-delay: 150ms; }
.skeleton-line:nth-child(3) { animation-delay: 300ms; }

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

/* Shimmer variant — more polished */
.skeleton-shimmer {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmerSlide 1.5s infinite;
}

@keyframes shimmerSlide {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

Button Loading State

Transition label → spinner on async action; return to label on completion:

function AsyncButton({ onClick, children }) {
  const [state, setState] = useState<"idle" | "loading" | "success" | "error">("idle");

  async function handleClick() {
    setState("loading");
    try {
      await onClick();
      setState("success");
      setTimeout(() => setState("idle"), 2000);
    } catch {
      setState("error");
      setTimeout(() => setState("idle"), 1500);
    }
  }

  return (
    <motion.button
      onClick={handleClick}
      disabled={state === "loading"}
      animate={{
        scale: state === "error" ? [1, 0.97, 1] : 1,
      }}
    >
      <AnimatePresence mode="wait">
        {state === "idle" && (
          <motion.span key="label"
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            transition={{ duration: 0.15 }}>
            {children}
          </motion.span>
        )}
        {state === "loading" && (
          <motion.span key="spinner"
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
            <Spinner />
          </motion.span>
        )}
        {state === "success" && (
          <motion.span key="check"
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0 }}>
            ✓
          </motion.span>
        )}
      </AnimatePresence>
    </motion.button>
  );
}

---

Feedback Animations

Error Shake

@keyframes errorShake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(8px); }
  45%  { transform: translateX(-6px); }
  60%  { transform: translateX(6px); }
  75%  { transform: translateX(-4px); }
  90%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.field--error {
  animation: errorShake 400ms ease-in-out;
  border-color: var(--color-error);
}

In React with Framer Motion:

<motion.input
  animate={hasError ? {
    x: [0, -8, 8, -6, 6, -4, 4, 0],
    transition: { duration: 0.4 }
  } : {}}
/>

Success Checkmark Draw (SVG)

function SuccessCheck() {
  return (
    <motion.svg viewBox="0 0 52 52" width={52} height={52}>
      <motion.circle
        cx="26" cy="26" r="25" fill="none" stroke="var(--color-success)"
        strokeWidth="2"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
        transition={{ duration: 0.4, ease: "easeOut" }}
      />
      <motion.path
        fill="none" stroke="var(--color-success)"
        strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
        d="M14 27 L22 35 L38 19"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
        transition={{ duration: 0.3, ease: "easeOut", delay: 0.3 }}
      />
    </motion.svg>
  );
}

---

Toggle & Checkbox

Toggle — must feel physical, like a real switch:

function Toggle({ checked, onChange }) {
  return (
    <button
      role="switch"
      aria-checked={checked}
      onClick={() => onChange(!checked)}
      className={`toggle ${checked ? "toggle--on" : ""}`}
    >
      <motion.span
        className="toggle__thumb"
        layout
        transition={{
          type: "spring",
          stiffness: 500,
          damping: 35,
        }}
      />
    </button>
  );
}

.toggle {
  width: 44px; height: 24px;
  border-radius: 12px;
  background: var(--color-surface-muted);
  border: none; padding: 2px;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.toggle--on { background: var(--color-primary); }
.toggle__thumb {
  display: block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

Checkbox — the drawing motion implies human confirmation:

function AnimatedCheckbox({ checked, onChange }) {
  return (
    <label className="checkbox-wrapper">
      <input type="checkbox" checked={checked} onChange={onChange} />
      <svg viewBox="0 0 24 24" width={24} height={24}>
        {/* Box */}
        <motion.rect
          x="2" y="2" width="20" height="20" rx="4"
          fill="none"
          stroke={checked ? "var(--color-primary)" : "var(--color-border)"}
          strokeWidth="2"
          animate={{ fill: checked ? "var(--color-primary)" : "transparent" }}
          transition={{ duration: 0.2 }}
        />
        {/* Checkmark strokes in */}
        {checked && (
          <motion.path
            d="M6 12 L10 16 L18 8"
            fill="none" stroke="white"
            strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
            initial={{ pathLength: 0 }}
            animate={{ pathLength: 1 }}
            transition={{ duration: 0.2, ease: "easeOut" }}
          />
        )}
      </svg>
    </label>
  );
}

---

Notification & Status

Badge appear:

<AnimatePresence>
  {count > 0 && (
    <motion.span
      key="badge"
      className="badge"
      initial={{ scale: 0 }}
      animate={{ scale: [0, 1.2, 1] }}
      exit={{ scale: 0 }}
      transition={{ type: "spring", stiffness: 500, damping: 30 }}
    >
      {count}
    </motion.span>
  )}
</AnimatePresence>

Copy-to-clipboard feedback:

function CopyButton({ text }) {
  const [copied, setCopied] = useState(false);

  async function copy() {
    await navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  return (
    <button onClick={copy} aria-label={copied ? "Copied!" : "Copy to clipboard"}>
      <AnimatePresence mode="wait">
        {copied
          ? <motion.span key="check" initial={{ scale: 0.8, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }} exit={{ opacity: 0 }}>✓</motion.span>
          : <motion.span key="copy" initial={{ opacity: 0 }}
              animate={{ opacity: 1 }} exit={{ opacity: 0 }}>⎘</motion.span>
        }
      </AnimatePresence>
    </button>
  );
}

---

Accessibility Requirements

Every microinteraction must include:

• aria-label on interactive elements describing their state (not just their default action)
• aria-live="polite" on status messages that appear after async actions
• No color-only communication — combine color change with motion AND icon/text
• prefers-reduced-motion fallback for all animations

@media (prefers-reduced-motion: reduce) {
  .skeleton-line, .skeleton-shimmer {
    animation: none;
    opacity: 0.6; /* Static placeholder — no pulse */
  }
}

---

Additional Resources

• references/pattern-catalog.md — Extended pattern library: star ratings, progress rings, swipe actions, pull-to-refresh indicators, number counting animations, and 20+ more patterns with full code