Cursor Smooth Caret Animation

Plugins ideas
13

Hello, thanks for sending this. I’ll be honest I’ve tried many times to get it working again and it seems that you basically cannot achieve this only by using a CSS snippet.

Though using information from the thread you linked I’ve been able to mess around and get it working again. In its current form, it’s quite janky so like last time I hope others more knowledgeable about coding add their suggestions as well.

Guide:

  1. You will need to get the Ninja cursor plugin for this to work and have it enabled.

The way the snippet works is that it hides the regular cursor and styles the Ninja cursor instead.

  1. Create a CSS Snippet, add the code below, and then enable the CSS Snippet in Obsidian.
/* Styling for the Ninja Cursor*/
.theme-dark .x-cursor {
  background: white;
  width: 1px;
  transition: all 80ms !important;
  transition: opacity;
  top: calc( -2.5px - var(--header-height));;
  height: calc(2.5px + var(--cursor-height));
}

.theme-light .x-cursor {
  background: black;
  width: 1px;
  transition: all 80ms !important;
  transition: opacity;
  top: calc( -2.5px - var(--header-height));;
  height: calc(2.5px + var(--cursor-height));
}

/* Hides Regular Cursor when Highlighting Text*/
body:has(.x-cursor) .cm-editor * {
  caret-color: transparent;
}

/* Disable movement effect */
.cursorWrapper .x-cursor::after {
  display: none;
}

/* Remove normal cursor on text selection */
.cm-cursorLayer {
  animation: none !important;
}

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

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

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

Also, I would haven’t been able to do this without using the code that BramleBrain posted, so many thanks to them! Options to modify cursor style - #44 by BrambleBrain.

Anyway, let me know if it works for you!

4 Likes