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.
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.)
I noticed that there was a similar bug reported at cursor disappears in tables Ā· Issue #6 of the project obsidian-custom-cursor (Iām sorry for that I canāt quote the URL). I used your CSS Snippet and found that the cursor only disappears when it moves from outside a table cell into the cell. Conversely, the cursor functions normally when it moves within a single cell.
I wish a snippet which supports table perfectly.
Hi,
Iām the creator of the obsidian-custom-cursor plugin, which is an attempt to build a plugin that allows direct control of the cursor caret without having to rely on the ninja cursor exploits! Iām surprised itās been discovered already. I was planning to post here when it was ready - there are still a lot of bugs that Iām planning to fix at some point, but it is currently available through BRAT.
Iāve actually figured out why the cursor disappears in tables (and titles) - essentially, itās to do with the getFocus() codeMirror method (or something like that) which usually returns true when the text is in an editable state (i.e. when you want a visible cursor), but not when the cursor is in tables or titles for some reason.
Iām looking for a workaround now - it feels like there must be some kind of method that states whether the cursor should be visible, but I havenāt been able to find it! If anyone else has been messing around with the inspect element / obsidian methods and knows more, it would be very helpful:)
I use vim mode and tried to apply Euuannās css snippet. See below. NB: Iām not an expert and I used chatgpt extensively for this code.
/* Customization for the Ninja Cursor */
/* see https://forum.obsidian.md/t/cursor-smooth-caret-animation/31068/21 */
/* be sure to copy everything from the codes! o.w., it doesn't work well */
/* Hide default cursor in all Vim modes */
body.is-vim-mode * {
caret-color: transparent !important;
}
body.is-vim-mode .cm-cursor,
body.is-vim-mode .cm-cursorLayer {
display: none !important;
animation: none !important;
}
/* Ninja x-cursor */
.x-cursor {
position: absolute;
background: var(--caret-color);
width: 1px;
transition: all 80ms !important;
top: 0;
--cursor-height: calc(var(--font-size) - 2px);
height: var(--cursor-height);
max-height: calc(var(--font-ui-large) * 2);
z-index: 1;
}
/* 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: 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; }
}