Cursor Smooth Caret Animation

Plugins ideas
1

Use case

Cursor smooth caret animation refers to the smooth movement of cursors when a new character is typed.

I recently found this function in VS Code. And typing with this feature enabled becomes such a joy that I cannot help but write to request an implementation in Obsidian.

Proposed solution

Add a transition animation to cursor when it moves. A sample video is given in the link.

14 Likes
2

Hi, I’d like to second this feature request - not sure why but I’m much more confident / faster typing in something like word with a smooth cursor feature and the ‘jumping cursor’ used in obsidian really throws me off. Smooth cursors are implemented in almost every program and it would be a great QOL improvement.

3

How to get Cursor Smooth Caret in Obsidian
I also wanted to get this style of typing, so I went looking around and found an extension for docs, I know, but it quite nicely laid out how its style was achieved using CSS and HTML.

Basically, put this code into a CSS snippet and enable it:

* {
    transition: all 80ms;
}

This can then be enabled or disabled at your own discretion and should work with any theme. Note that it may not work well with extensions.

2 Likes
4

Just wanted to say that this works amazingly! Thank you so much; it’s just a small thing but this had been frustrating me since switching over to Obsidian.

5

Update: since using this snippet I’ve had some issues where scrolling through long pages causes glitching and random returns to the start of the page. Not sure how general this problem is but thought I’d post a fix I found in case anyone else has this problem.

Just replace the above code with this and you should be fine:

.CodeMirror-cursor,
.cm-s-obsidian .cm-cursor {
  transition: all 80ms;
}
2 Likes
6

This solution does not work for those using vim mode

I have found it can be replaced with

.cm-cursor-primary {
  transition: all 80ms;
}
2 Likes
7

Just as a bit of a warning after updating my version to 14.15 of Obsidian the snippet code has stopped working in my use-case, I tried all the different updated varients as well. I don’t know why this has happened, but I am trying to find a work-around for it.

8

Yeah, the snippet stopped working for me too. Any ideas?

9

I saved this code as a css file and enabled it in css snippet in obsidian but the animation is not working. Can u please drop a tutorial or somthing. Thanks

10

I would also appreciate this feature.

11

I found out that now you can change the cursor color but nothing else, which is quite unfortunate for what we want here.

BUT! I also found something interesting, when selecting text by pressing SHIFT and move cursor with arrow keys, the cursor behaves like with Smooth Caret Animation! This maybe has something to do with the CodeMirror (Options to modify cursor style - #17 by OlivierPS)
Does it indicate anything useful?

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
14

smooth cursor

I think 80ms is too fast and the effect isn’t apparent. Depending on how fast you type somewhere between 150ms and 200ms seems to be the sweet spot. 500ms without further modification to the code appears to be too slow and causes the cursor to lag behind the text

2 Likes
15

Yeah, I agree. The 80ms delay of the transition is purely because that is what was used in the Chrome extension I took inspiration from when you could do this all just in a CSS Snippet.

Thanks for the suggestion!

16

This works for me! Elegant solution. Thought it was impossible to achieve for latest version of Obsidian, then I tried your method and it magically works!

1 Like
17

i know this is a super old thread but there’s something that’s bugging me. this css still works as intended but there’s one small issue; the regular obsidian cursor isn’t hidden when editing file names or folders in the sidebar/title bar, so it shows alongside the modified ninja cursor. this gives it kind of a janky appearance but it seems like a fixable issue

it looks like this part of the code doesn’t hide the default cursor all the time, only in the main editor window

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

i’d try to fix this myself but i have no idea what i’m doing in css. anybody else know how to fix this?

20

Yeah, so I’ve changed the code a bit to try and make it more usable.

smooth-cursorify for Obsidian (Changelog: Ver 0.0.1)

Not by the same author but inspired by smooth-cursorify for Google Docs.

  • Cursor Caret Color now uses the variable --caret-color. This means that it uses the default colours obsidian assigns and should hopefully work with themes that style this variable. Plus it means there isn’t a need to have different code for dark and light modes. The Caret Color can be manually set by removing the variable and selecting your own color. E.G. " background: black; "
  • Cursor Caret Width has been changed from 1px to 2px, in line with how macOS styles its programs. This can be changed back in the css easily. E.G. " width: 1px; "
  • Original Cursor Appearances. When editing text outside of the main panel and when highlighting text the original cursor appeared. This is now fixed.
  • Cursor Caret Height Issues. When highlighting text the cursor extended across the entire selection. The height of the cursor is now capped using " max-height: calc(var(–font-ui-large) * 2); " this caps the height at two lines but still allows the cursor to dynamically change height to match most titles and different text sizes. This can be switched back by removing "max-height: calc(var(–font-ui-large) * 2);
  • Cursor Caret Default Height. The cursor caret height has been reduced to mimic the default cursor more closely. To switch back change the height variable under x.-cusor. E.G. " height: calc(2.5px + var(–cursor-height)); "

The CSS Code is below with these revisions. as always suggestions are always welcome.

/* Applies the animation effect */ 
.x-cursor {
  background: var(--caret-color);
  width: 2px;
  transition: all 80ms !important;
  top: calc(-2.5px - var(--header-height));
  height: var(--cursor-height);
  max-height: calc(var(--font-ui-large) * 2);
}

/* Hides Regular Cursor when Ninja Cursor Installed */
body:has(.x-cursor) * {
  caret-color: transparent;
}

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

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

/* 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; }
}
3 Likes
21

smooth-cursorify for Obsidian (Changelog: Ver 0.0.2)

  • Cursor Caret Width: Default value set back from 2px to 1px. Why? I made the change to attempt to fix the cursor from sitting across pixel zones which makes the cursor appear slightly blurred. This didn’t resolve this issue. The CSS cannot force Ninja Cursor to always land on a vertical pixel column.
  • Cursor Height Calculation Changes: Calculations changed. Why? Needed to accommodate changes to how the height of the cursor is determined.
  • Cursor Height Variables: Method of Setting Cursor Height Changed. Why? Rather than using --cursor-height to determine the cursor’s height the CSS now modifies the --cursor-height variable instead which controls Ninja Cursors height anyway. But by setting this variable to match the font size, there is no need to fiddle around with the top and height to get the cursor accurately in-line and height-appropriate.
  • Comments: Added to CSS. Why? To make customization more approachable for beginners that should make it easier to set the customer to your personal preferences.
/* 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: 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; }
}

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

3 Likes
22

Hey, I tried it, but it didnt work. (Well, the smooth text worked, but the dashing effect persists.)

23

*fixed, was just a problem with my obsidian download corruption