demo · v132

Why prefers-reduced-motion matters for the caret

A custom blink is a moving thing. Users with vestibular disorders or motion-sensitivity expect us to honour the OS-level "reduce motion" preference. The naive version below runs the same animation no matter what; the respectful version turns it off in that media query and gives the system blink back.

checking support…
your current OS preference computing…

naive: always animates

This input runs a rainbow caret animation 100% of the time, regardless of OS preference.

respectful: disables in reduce

Same animation, wrapped in @media not (prefers-reduced-motion: reduce). If you toggle "reduce motion" in OS settings, this becomes a normal blue caret with the system blink.

/* the pattern */
input.respectful {
  caret-animation: manual;
  animation: rainbow 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  input.respectful {
    animation: none;
    caret-color: var(--accent-blue);
    caret-animation: auto;   /* hand the blink back to the browser */
  }
}
Toggle the simulator to inspect the respectful input's computed caret-animation.

see also