demo · v140

Focus Pulse

Use the caret as a state indicator. Three input fields with three different pulse patterns: idle (blue inhale), invalid (urgent red), saved (green hold). The caret carries the meaning a static border has to whisper.

input:focus {
  caret-animation: manual;             /* take over from the blink */
  animation: pulse 0.6s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { caret-color: rgb(0 34 255 / 0.3); }
  to   { caret-color: rgb(0 34 255 / 1); }
}

accessibility

Caret animation is a complement to existing focus indicators, not a replacement. WCAG 2.4.7 still needs a visible focus outline. Keep your pulse subtle — the cursor sits inside the input and a high-amplitude flash is distracting. Users with prefers-reduced-motion: reduce should get a stationary caret; wrap the keyframes accordingly.

see also