demo · v140

Motion-Sensitivity Override

The chromestatus motivation flags accessibility as a primary use case: users with motion sensitivity or photosensitive conditions can disable caret blinking with a user stylesheet. This demo lets you simulate that user-side override against an author-styled animated caret.

Mode: author animation runs (default blinking suppressed).

Without caret-animation

The browser keeps blinking the caret on top of your caret-color animation — the user sees a flickering, jittery caret. Visually unpredictable.

With caret-animation: manual

The author owns the caret motion. A user with prefers-reduced-motion or a personal stylesheet can flip the animation off entirely. No flicker, no disruption.

author stylesheet (currently applied)

input {
  caret-color: var(--accent-rose);
  caret-animation: manual;
  animation: rainbow 1.6s infinite alternate;
}
@keyframes rainbow {
  0%   { caret-color: #d11a2a; }
  50%  { caret-color: #0022ff; }
  100% { caret-color: #0a8f5c; }
}

user override (when toggled)

/* a motion-sensitive user can ship this via custom CSS extensions
   or a user-agent stylesheet hook: */
@media (prefers-reduced-motion: reduce) {
  * {
    caret-animation: auto !important;
    animation-name: none !important;
  }
}

The CSSWG explicitly framed this property as a way to hand control back. Without it the platform was making a hard choice for every author: either blink (annoying users who chose prefers-reduced-motion) or not blink (annoying users who depend on the blink to find the caret). With it the author opts in, and the user gets to opt back out via prefers-reduced-motion or a personal stylesheet.

/* respect the user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  input {
    caret-animation: auto;
    animation: none;
  }
}

see also