harsh040506/microinteraction-library

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