Toast / notification motion

/* Positioned region: toasts stack here without shifting page layout. */
.toast-region {
  position: fixed;
  inset-inline: 0;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1rem;
  pointer-events: none;
}
 
.toast {
  pointer-events: auto;
  display: flex;
  gap: 0.75rem;
  max-width: 24rem;
  padding: 0.75rem;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 0.5rem;
  background: var(--surface-raised, #1b1b1b);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.25);
}
 
/* ENTER: spring-ish overshoot via a cubic-bezier with a slight bounce. */
.toast.is-entering {
  animation: toast-in 320ms cubic-bezier(0.22, 1.2, 0.36, 1);
}
 
/* EXIT: quieter and quicker — a plain ease down and out. */
.toast.is-leaving {
  animation: toast-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
 
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}
 
/* Reduced motion: appear/disappear with opacity only, no slide. */
@media (prefers-reduced-motion: reduce) {
  .toast.is-entering,
  .toast.is-leaving {
    animation: none;
  }
}

import { useEffect, useState } from "react";
import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 
const AUTO_DISMISS_MS = 3500;
 
export function Toasts() {
  const [toasts, setToasts] = useState([]);
  let nextId = useState(() => ({ n: 0 }))[0];
 
  function show(variant = "success") {
    setToasts((prev) => [...prev, { id: nextId.n++, variant }]);
  }
  function dismiss(id) {
    setToasts((prev) => prev.filter((t) => t.id !== id));
  }
 
  // Errors interrupt; everything else waits its turn.
  const assertive = toasts.some((t) => t.variant === "error");
 
  return (
    <>
      <button type="button" onClick={() => show("success")}>
        Show toast
      </button>
 
      <div
        aria-live={assertive ? "assertive" : "polite"}
        aria-relevant="additions"
        style={{
          position: "fixed",
          insetInline: 0,
          bottom: "1rem",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: "0.5rem",
          pointerEvents: "none",
        }}
      >
        <AnimatePresence initial={false}>
          {toasts.map((t) => (
            <ToastItem key={t.id} toast={t} onDismiss={() => dismiss(t.id)} />
          ))}
        </AnimatePresence>
      </div>
    </>
  );
}
 
function ToastItem({ toast, onDismiss }) {
  const reduce = useReducedMotion();
  const [paused, setPaused] = useState(false);
 
  // Auto-dismiss, paused while hovered or focused.
  useEffect(() => {
    if (paused) return;
    const timer = setTimeout(onDismiss, AUTO_DISMISS_MS);
    return () => clearTimeout(timer);
  }, [paused, onDismiss]);
 
  return (
    <motion.div
      role="status"
      // Enter: spring from one offset to rest (two keyframes — OK for a spring).
      initial={reduce ? { opacity: 0 } : { opacity: 0, y: 16 }}
      animate={
        reduce
          ? { opacity: 1 }
          : { opacity: 1, y: 0, transition: { type: "spring", stiffness: 520, damping: 30 } }
      }
      // Exit: a quiet, quick ease — handled by AnimatePresence.
      exit={
        reduce
          ? { opacity: 0, transition: { duration: 0.12 } }
          : { opacity: 0, y: 12, transition: { duration: 0.22, ease: [0.4, 0, 1, 1] } }
      }
      onHoverStart={() => setPaused(true)}
      onHoverEnd={() => setPaused(false)}
      onFocusCapture={() => setPaused(true)}
      onBlurCapture={() => setPaused(false)}
      style={{ pointerEvents: "auto" }}
    >
      <span>{toast.variant === "success" ? "Changes saved." : "Heads up."}</span>
      <button type="button" onClick={onDismiss} aria-label="Dismiss notification">
        ×
      </button>
    </motion.div>
  );
}