demo · v132

Caret preset gallery

Six ready-to-paste caret styles. Each uses caret-animation: manual to silence the system blink, then drives the caret colour with a keyframe animation. Click an input and watch it cycle.

checking support…
Focus a preset input to inspect the computed caret-animation and animation timing.

typewriter classic

caret-animation: manual;
animation: blink 600ms steps(1) infinite;
@keyframes blink {
  0%,49% { caret-color: var(--text-black); }
  50%,100% { caret-color: transparent; }
}

pulse soft

caret-animation: manual;
animation: pulse 1.2s ease-in-out infinite;
@keyframes pulse {
  0%,100% { caret-color: var(--accent-blue); }
  50%     { caret-color: color-mix(in srgb, var(--accent-blue) 15%, transparent); }
}

matrix 3-stop

caret-animation: manual;
animation: matrix 800ms infinite;
@keyframes matrix {
  0%   { caret-color: var(--accent-emerald); }
  33%  { caret-color: color-mix(in srgb, var(--accent-emerald) 70%, var(--bg-paper)); }
  66%  { caret-color: color-mix(in srgb, var(--accent-emerald) 55%, var(--text-black)); }
  100% { caret-color: var(--accent-emerald); }
}

pride 4-stop

caret-animation: manual;
animation: pride 2s linear infinite;
@keyframes pride {
  0% { caret-color: rose; }
  25%{ caret-color: amber; }
  50%{ caret-color: emerald; }
  75%{ caret-color: blue; }
  100%{caret-color: rose; }
}

heartbeat non-uniform

caret-animation: manual;
animation: heart 1.2s cubic-bezier(.6,0,.2,1) infinite;
@keyframes heart {
  0%,100% { caret-color: rose; }
  15%,45% { caret-color: transparent; }
  30%     { caret-color: rose; }
}

terminal block-vibe

caret-animation: manual;
animation: term 1s steps(1) infinite;
@keyframes term {
  0%,49%   { caret-color: var(--text-black); }
  50%,100% { caret-color: var(--bg-stone); }
}

see also