neko.css

/* Neko */
/* Future-proofed version inspired by refact0r (508863359777505290) */

/*
PUT THIS :root SNIPPET INTO YOUR QUICKCSS TO CUSTOMISE:
typing animation: alert, scratchdown, runleft, runright, wallscratch

:root {
    --typing-animation: scratchdown;
}

*/

@import "https://raw.githubusercontent.com/XaaRii/discord-themes/master/april-fools.css";
[class^="channelTextArea"]::before {
  /* duration of wakeup and go to sleep animations (in seconds) */
  /* set to 2.65s to match windows cursor blink rate */
  --wakeup-duration: 2.65s;
  /* duration of sleeping and typing animations */
  --sleep-duration: calc(var(--wakeup-duration));
  --typing-duration: calc(var(--wakeup-duration) / 5);
  /* typing animation: runright, runleft, alert, wallscratch, scratchdown */
  --typing-animation: scratchdown;
  content: "";
  width: 32px;
  height: 32px;
  bottom: calc(100% - 3px);
  /* Mess with the - 3px to change its vertical position */
  right: calc(var(--custom-index-scrollbar-margin) * 2 + var(--custom-index-scrollbar-width));
  /* Switch this from right to left to put it on the left side, or increase/decrease to change its position */
  margin-left: auto;
  margin-top: auto;
  position: absolute;
  image-rendering: pixelated;
  background-image: url("https://raw.githubusercontent.com/adryd325/oneko.js/14bab15a755d0e35cd4ae19c931d96d306f99f42/oneko.gif");
  animation: sleep var(--sleep-duration) infinite;
  /* change 1s to make the animation slower/faster */
}

[class^="channelTextArea"]:hover::before {
  animation: var(--wakeup-duration) 1 forwards wakeup;
}

[class^="channelTextArea"]:not(:hover)::before {
  animation: var(--sleep-duration) 1 forwards gotosleep,
    var(--sleep-duration) var(--wakeup-duration) infinite sleep;
}

[class^="channelTextArea"]:has([class*="editor"]:focus)::before {
  animation: var(--wakeup-duration) 1 forwards wakeup,
    var(--typing-duration) var(--wakeup-duration) infinite var(--typing-animation);
}

@keyframes sleep {

  /*
      if you open the background image in ur browser, you will see that it has way more frames
      so if you want, you could make ur own keyframes for a different animation
      the top left frame is 0 0, second top row is -32 0, second row second is -32 -32 and so on
      the ...00001% makes it so that there's no transition between the frames, so if you wanted say 3 frames, you'd do 0%, 33.3%; 33.30001%, 66.6%; 66.60001%, 100%
      */
  0%,
  50% {
    background-position: -64px 0;
  }

  50.00001%,
  100% {
    background-position: -64px -32px;
  }
}
@keyframes alert {
	0%,
	50% {
		background-position: -224px -96px;
	}
	50.00001%,
	100% {
		background-position: -96px -96px;
	}
}
@keyframes runright {
	0%,
	50% {
		background-position: -96px 2px;
	}
	50.00001%,
	100% {
		background-position: -96px -30px;
	}
}
@keyframes runleft {
	0%,
	50% {
		background-position: -128px -62px;
	}
	50.00001%,
	100% {
		background-position: -128px -94px;
	}
}
@keyframes wallscratch {
	0%,
	50% {
		background-position: -64px -62px;
	}
	50.00001%,
	100% {
		background-position: -64px -94px;
	}
}
@keyframes wakeup {
	0%,
	5% {
		background-position: -160px 0;
	}
	5.00001%,
	10% {
		background-position: -192px 0;
	}
	10.00001%,
	15% {
		background-position: -160px 0;
	}
	15.00001%,
	20% {
		background-position: -192px 0;
	}
	20.00001%,
	35% {
		background-position: -224px 0;
	}
	35.00001%,
	60% {
		background-position: -96px -64px;
	}
	60.00001%,
	100% {
		background-position: -96px -96px;
	}
}
@keyframes gotosleep {
	0%,
  80% {
		background-position: -96px -64px;
  }
  80.00001%,
	100% {
    background-position: -64px 0;
	}
}

@keyframes scratchdown {
	0%,
	50% {
		background-position: -224px -30px;
    bottom: calc(100% - 13px);
	}
	50.00001%,
	100% {
		background-position: -192px -62px;
    bottom: calc(100% - 13px);
	}
}