Cursor Smooth Caret Animation

Plugins ideas
24

Is there any way to remove the caret blinking animation?

25

Yes, use the following adapted CSS.

/* Customization for the Ninja Cursor */ 
.x-cursor {
  position: inline block;
  background: var(--caret-color); /* Sets the Ninja Cursor Colour. */
  width: 1px; /* Sets the width of the Ninja Cursor. */ 
  transition: all 80ms !important; /* Sets the animation delay of the Ninja Cursor. Fast typers should use a higher delay to maintain the effect. */ 
  top: calc(0px - var(--header-height)); /* Ensures the cursor is inline with selected line. */ 
  --cursor-height: calc(var(font-size) - 2px); /* Sets Ninja Cursor Height. Font-Height variable used to ensure height matches current body text input. For a taller/shorter cursor alter the px. */ 
  max-height: calc(var(--font-ui-large) * 2); /* Caps the height of the Ninja Cursor to the span of two lines. Stops Ninja Cursor spanning several lines by capping it at two. It can be capped at one but the cursor is unable to change height to match headings. */ 
}

/* Hides the Default Cursor */
body:has(.x-cursor) * {
  caret-color: transparent;
}
.cm-cursorLayer {
  animation: none !important;
  display: none; 
}

/* Hides the Default Ninja Cursor Dashing Effect */ 
.cursorWrapper .x-cursor::after {
  display: none;
}

/* Applies the Caret Blinking Effect */
.cursorWrapper .x-cursor0 {
  animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
  animation: blink1 1s 1s both infinite;
}

/* Keyframes for the Caret Blinking Effect */ 
@keyframes blink1 {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 1;}
  95%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes blink0 {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 1;}
  95%  { opacity: 1; }
  100% { opacity: 1; }
}

The variance in opacity creates the blinking effect, therefore to disable this we simply set all the opacity values to 1. Hope this helps!

1 Like
26

Hey! I’ve been using this snippet and loving it. There is one problem I’ve encountered however, and that is the method of hiding the default cursor also hides the cursor whenever multiple cursors are used.

I tested with and without the CSS, and it seems to be a problem on ninja-cursor’s side, but if someone could come up with a fix that would be great as I don’t have the technical skills to do so.