Cursor Smooth Caret Animation

Is there any way to remove the caret blinking animation?

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!

2 Likes

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.

Hello, Iā€™ve encountered a bug.
When I use Input Method to input Chinese, the cursor will not go back to the end of the text, but always at the beginning of the text.
2024-12-06 13-24-02

thanks! wished i could press the like button 100 times

found a small bug: the quick switcher has no cursor with this snippet enabled. the default one and the ninja cursor are both hidden, seems fixable maybe? idk if you can target the quick switcher window with css

The CSS seems to not work as well with Vim mode enabled in Obsidian.

smooth-cursorify for Obsidian (Changelog: Ver 0.03)

Re: Issues / Bugs:

  • Iā€™m sorry that I donā€™t really have the skills or knowledge to be able to help you guys out. From what I know, my best guess is that these operations (Chinese input, VIM, etc) are expecting the default cursor.
  • Ver 0.02ā€™s CSS constantly hides the default cursor, no matter the context, so that it doesnā€™t overlap with the custom Ninja Cursor, leading to having the Ninja Cursor sitting at the beginning of the line whilst you canā€™t see the default cursor.
  • Unfortunately, as we cannot style the default cursor, and Ninja doesnā€™t have the ability to recognise these operations, we canā€™t use this method to style its movement at all.
  • But by using the CSS made by Fred_V, this version of the CSS will hide Ninja and show the default cursor in certain situations, which hopefully will redress this issue somewhat.

Changelog:

  • Rewrite / Retooling: This version makes use of CSS by Fred_V, changed slightly to be more similar to the former version of smooth-cursorify. Incorporating the fixes that their version also includes. (Note: Fred_Vā€™s CSS also includes the smooth-effect, just hidden as a comment, so if you prefer their styling and know how to edit the CSS, I suggest using their version.)

Addendum:

  • A prototype plugin, inspired by this thread has been started, its still in its early development but you can find out more details and try it out yourself here. (Disclaimer: Iā€™m not involved with the project, but as I know basically nothing about code, thatā€™s probably for the best.)

CSS / Install Instructions:

  • You will need the Ninja Cursor plugin enabled. It can found in Community Plugins.
  • You will need to create a CSS Snippet for Obsidian and copy/paste the following CSS.
/* Hides Ninja Cursor during selection to avoid Spanning Across Lines */
body:has(.cm-cursor-primary) .x-cursor {
   display: none;
}

/* If the Workspace is active and in source mode, Ninja Cursor is applied. */ 
body:has(.x-cursor):has(.workspace-leaf.mod-active > [data-mode="source"]) {
 --my-cursor-color: var(--caret-color);         /* Sets color of your cursors. */  
 --ninja-cursor-width: 1px;                     /* Sets the width of your cursors.
   
 /* Removes normal cursor animation if multi cursors. */
   .cm-cursorLayer:has(.cm-cursor-secondary) {
   	animation: none !important;
   }

   /* Styles the Regular Cursor Caret. */
   .cm-s-obsidian .cm-cursor,
   .cm-s-obsidian .cm-dropCursor {
   	border-left-color: var(--my-cursor-color);   /* Sets Caret Color. */
   	border-left-width: var(--ninja-cursor-width) /* Sets Caret Width. */ 
   }

 /* Styles Ninja Cursor Caret. */ 
   .x-cursor {
   	background: var(--my-cursor-color);          /* Sets Caret Color. */
   	opacity: 1;                                  /* Makes Caret Visible. */
   	width: var(--ninja-cursor-width);            /* Sets Caret Width. */
   	--cursor-height: calc(var(font-size) - 2px); /* Sets Caret Height. */
   	max-height: calc(var(--font-ui-large) * 2);  /* Caps Caret Height at 2x font size. */ 
   	top: calc(0px - var(--header-height));       /* Ensures Caret is inline with selected line. */
   	transition: all 80ms !important;             /* Sets the animation delay of the Ninja Cursor. Fast typers should use a higher delay to maintain the effect. */
   }

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

 /* Hides Regular Cursor when Ninja Cursor Installed. */
   .cm-editor * {
   	caret-color: transparent;
   }
}

/* 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: 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; }
}

As always, If you find any better alternatives, be sure to share it here!

(Last post deleted due to the blinking effect being broken, my bad.)