Cursor Smooth Caret Animation

Plugins ideas
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