Reduced Motion

html

<div class="rm-demo" data-style="spinner" style="--accent:#D9C8F0;">
  <div class="rm-demo__stage">
    <div class="rm-demo__spinner"></div>
    <div class="rm-demo__slide"></div>
    <div class="rm-demo__pulse"></div>
  </div>
  <p class="rm-demo__label">Loading results</p>
  <p class="rm-demo__caption">{{unless reduceMotion}}full animation plays

tailwind

<div class="rm-tw rm-tw--spinner" style="width:300px;font-family:system-ui,sans-serif;color:#241430">
  <div class="h-12 flex items-center">
    <div class="rm-tw__spinner hidden w-7 h-7 rounded-full border-4" style="border-color:#24143022;border-top-color:#D9C8F0"></div>
    <div class="rm-tw__slide hidden w-7 h-7 rounded-lg" style="background:#D9C8F0"></div>
    <div class="rm-tw__pulse hidden w-7 h-7 rounded-full" style="background:#D9C8F0"></div>
  </div>
  <p class="mt-2.5 mb-0.5 font-semibold">Loading results</p>
  <p class="m-0 text-xs text-[#241430aa]">{{unless reduceMotion}}full animation plays

react

export function ReducedMotion({
  label = "Loading results",
  style = "spinner",
  reduceMotion = false,
  accent = "#D9C8F0",
}) {
  const shape = {
    spinner: { width: 28, height: 28, borderRadius: "50%", border: "4px solid #24143022", borderTopColor: accent },
    "slide-in": { width: 28, height: 28, borderRadius: 8, background: accent },
    pulse: { width: 28, height: 28, borderRadius: "50%", background: accent },
  }[style];
  const className = "rm-react__shape rm-react__shape--" + style + (reduceMotion ? " rm-react__shape--reduced" : "");
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div style={{ height: 48, display: "flex", alignItems: "center" }}>
        <div className={className} style={shape} />
      </div>
      <p style={{ margin: "10px 0 2px", fontWeight: 600 }}>{label}</p>
      <p style={{ margin: 0, fontSize: 12, color: "#241430aa" }}>{reduceMotion ? "prefers-reduced-motion: reduce \u2014 animation replaced with an instant state change" : "full animation plays"}</p>
      <style>{`
        @keyframes rm-react-spin { to { transform: rotate(360deg); } }
        @keyframes rm-react-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(80px); } }
        @keyframes rm-react-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
        @media (prefers-reduced-motion: no-preference) {
          .rm-react__shape--spinner { animation: rm-react-spin .2s linear infinite; }
          .rm-react__shape--slide-in { animation: rm-react-slide .2s ease-in-out infinite; }
          .rm-react__shape--pulse { animation: rm-react-pulse .2s ease-in-out infinite; }
          .rm-react__shape--reduced { animation: none; }
        }
      `}</style>
    </div>
  );
}