#oneko on message bar v2
frank grail
hey, I modified it just a little to be able change a little more the settings and have two of them 😂
(the "transform: rotateY(180deg);" is just because I wanted it to actually scratch a wall, but you can just remove it)
ebon scaffold
actually insane
frank grail
hey, I modified it just a little to be able change a little more the settings an...
hey, I didn't like the changes I did there, so here's an upgrade, + skins and more animations (skins are from [Samu](#🎨-css-snippets message)) (and of course 90% css is from refact0r)
grizzled escarp
Have you made the skins with a variable? I can't check right now but it'd be cool to have them work like that #🎨-css-snippets message
frank grail
Have you made the skins with a variable? I can't check right now but it'd be coo...
yes, it's a variable, they are just the links stored at the bottom of the file, but it looks cleaner with variables
grizzled escarp
Okay!
lofty nacelle
how to upscale the cat?
frank grail
I'm not on my computer rn, but I'll tell you when I log on
lofty nacelle
I'm not on my computer rn, but I'll tell you when I log on
ok, i'll wait
grizzled escarp
how to upscale the cat?
It works by having one picture with all the little states of the cat and moving the part that gets cut out and shown depending on its state, either nyncral had a better or you would have to change all the numbers yourself, try doubling all of them and using a picture with twice the resolution, so instead of having for example 100x100 you use a 200x200 picture
lofty nacelle
It works by having one picture with all the little states of the cat and moving ...
thx for the idea
nocturne moth
thx for the idea
actually, you can just add
transform: scale(2);
nice, thx
grizzled escarp
actually, you can just add
```css
transform: scale(2);
```
My idea in one line, well done (I definitely tested you)
grizzled escarp
hey, I didn't like the changes I did there, so here's an upgrade, + skins and mo...
i thought of it being a variable you put the link in, so you can use CUSTOM skins #1134464800378851349
grizzled escarp
i made it with more variables and easy resolution change as well as removing the bottom one (it was just broken for me, even if i only had just your stuff in my quickcss)
here is the list of animations you can put in:
run ← 0.2s-0.3s recommended ↓
runleft
alert ← 0.2s-0.5s recommended ↓
spinninL
spinninR
wallscratchUp
wallscratchLeft
wallscratchDown
wallscratchRight
cursed:
gotosleep
wakeup
sleep
@import url(https://raw.githubusercontent.com/xdCoolesding/shiggycord/v2/Files/Onekomessagebar.css);
grizzled escarp
i need my own oneko dev thread
grizzled escarp
just got it, everything will be moving there
lean flax
not working for me 
nocturne moth
not working for me <:D_:1026352810058584094>
anything made more than like a month ago will likely not work due to the update
there is a working version here though
lean flax
okay thanks!
torpid cargo
currently broken, only this version works
[class^="channelTextArea"]::before {
content: "";
width: 32px;
height: 32px;
bottom: calc(100% - 3px); /* Mess with the - 3px to change its vertical position */
right: 10px; /* Switch this from right to left to put it on the left side, or increase/decrease to change its position */
position: absolute;
image-rendering: pixelated;
pointer-events: none;
background-image: url("https://raw.githubusercontent.com/adryd325/oneko.js/14bab15a755d0e35cd4ae19c931d96d306f99f42/oneko.gif");
animation: oneko 1s infinite; /* change 1s to make the animation slower/faster */
}
fixed
[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: 2s;
/* duration of sleeping and typing animations */
--sleep-duration: calc(var(--wakeup-duration) / 5 * 2);
/* typing animation: run, runleft, alert, or wallscratch */
--typing-animation: alert;
content: '';
width: 32px;
height: 32px;
top: -29px;
right: 10px; /* change right to left to move oneko to the left */
position: absolute;
image-rendering: pixelated;
background-image: url('https://raw.githubusercontent.com/adryd325/oneko.js/14bab15a755d0e35cd4ae19c931d96d306f99f42/oneko.gif');
animation: sleep var(--sleep-duration) infinite;
}
[class^="channelTextArea"]:hover::before {
animation: var(--wakeup-duration) 1 forwards wakeup;
}
[class^="channelTextArea"]:not(:hover)::before {
animation: var(--wakeup-duration) 1 forwards gotosleep,
var(--sleep-duration) var(--wakeup-duration) infinite sleep;
}
[class^="channelTextArea"]:has(.editor-H2NA06:focus)::before {
animation: var(--wakeup-duration) 1 forwards wakeup,
var(--sleep-duration) var(--wakeup-duration) infinite
var(--typing-animation);
}```i forgot the animations
@keyframes sleep {
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 run {
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%,
20% {
background-position: -160px 0;
}
20.00001%,
40% {
background-position: -192px 0;
}
40.00001%,
60% {
background-position: -224px 0;
}
60.00001%,
80% {
background-position: -96px -64px;
}
80.00001%,
100% {
background-position: -96px -96px;
}
}
@keyframes gotosleep {
0%,
20% {
background-position: -96px -96px;
}
20.00001%,
40% {
background-position: -96px -64px;
}
40.00001%,
60% {
background-position: -224px 0;
}
60.00001%,
80% {
background-position: -192px 0;
}
80.00001%,
100% {
background-position: -160px 0;
}
}```ssdasdasd Tysm
bruh
forgot I was testing the typing animation lmao
unreal sage
it ignores the Jump to Present
nocturne moth
outdated snippet