What's an Oneko?

Oneko (officially ‘oneko.js’) is a desktop pet for websites created by Canadian
programmer adryd (a.k.a Ari, Ariana) in 2022. The original oneko, which takes its name
from the Japanese word for cat (neko 猫 / ねこ), is a tiny pixelated white cat that follows
your cursor around when you mouse over the screen. Ari themselves describes
oneko as a “hacky script I wrote to put a cat on my site” and was inspired by the desktop
pets distributed on computers and floppy disks during the 1980s to the 2000s. Oneko is
open source and freely available on Ari’s GitHub repository, which means that
anyone can download the code and assets and use, remix and adapt them freely.
oneko.js uses the original cat designs of the formidable Kenji 'Juan' Gotoh'.


As part of my research, I actually reached out to Ari (adryd) by email to learn about the
story behind the script. She very kindly emailled back with answers to my questions.
adryd's motivation for creating oneko.js was that she wanted to add a cute feature to
her website that would make it stand apart from other sites on the web. Building the
script took around 2 to 3 hours to forge, and after oneko.js was officially released
in April of 2022, it took off when CSS Script, a script library for JavaScript and
CSS, created a logpage with live demo that caught the attention of other devs.
Later, 'Maia', a customised re-imagining of the Oneko cat by maia arson
crimew, a Swiss hacktivist, further fuelled oneko's popularity.

Ari was initially introduced to the Neko desktop pet that inspired oneko by a friend
who had oneko for xorg installed on her computer. Everytime the friend did a screenshare
while working on their projects, she always noticed the little pixel cat doing laps
on her friend's monitor screen.

Ari chose the name "oneko" as she was aware of the oneko program available on Linux
computers, and only later learnt of similar programs such as Webneko.
As for future plans for oneko.js, she informed me that apart from maybe rewriting
the script, she is satisfied that oneko works fine as it is. Judging from the number
of websites now using oneko.js or versions of it, Ari's little cute and hacky cursor
cat is becoming more and more a feature of this decade's web.

Oneko is a descendant of the Neko software program, a feline deskmate created by Naoshi
Watanabe (若田部 直) in the late 1980s for a line of Japanese NEC PC-9801 computers.
The artwork for the cat sprite was designed by Kenji (Juan) Gotoh/後藤寿庵), who gave
up the copyright for the images after a meeting with an IBM executive from America.
Gotoh's decision was the starting block for Neko to become everyone's fave virtual cat.
The Neko screenmate travelled through many countries and computer systems in the
decades since, from Japan to the West, from desktops to Discord. The first “made-for-
websites” version of Neko was Webneko, launched in 2004 by Gregory Bell.


If you want to deepdive further into the history of virtual cat pets, then check out the
Neko Links page. I highly recommend the articles by Eliot Akira and Evert Pot, which
go into great depth on the history of Neko software and its many versions and iterations.

Since Oneko’s launch, it has appeared on hundreds of websites across the globe, with
many variations. It’s not just a cat nowadays, sprites for Oneko including dogs, rats,
skunks, raccoons, cartoon characters and people have been created, while others have
changed the script to allow for different movements, sprite sizes and characters.
The desktop pet has particularly become viral with indie website makers, including
members of the LGBTQIA+ community and web developers looking for their first software job.

Oneko is very easy to implement in your website code and consists of a JavaScript file
that powers the cat’s movements and ‘states’ and a 256 x 128-pixel spritesheet
displaying the different positions the cat does. Not only can Oneko chase after your
mouse just like its real-life cousins, it also scratches the edge of the screen, yawns,
sleeps, itches itself and wakes up with a start.

How Oneko Works (the Cat’s Meow)

Oneko is built on the Javascript programming language, consisting of a JS file
and a 256 x 128 pixels spritesheet. The sprites show the different animations the cat
cycles through, depending on mouse position and movement. As with its predecessors,
the cat runs, scratches, sleeps, wakes up and yawns. If you install oneko.js and move the
mouse, the cat will run after your cursor and stop and sit when the cursor is made still.
After a period of inactivity, usually 10 seconds, the cat will scratch itself, then yawn,
cuddle up into a loaf and fall asleep. It’s very calming and charming to watch the little
kitty and considering how the internet was practically built on cute cats, it’s a great
addition to add whimsy to your website or webapp. If you know coding and/or making
pixel art, you can change things like the size, speed and positioning coordinates of the
cat in the Javascript file or use the original Oneko sprites as inspiration to design your
own cursor cat or anything else.

The oneko.js code is the ‘engine’ that brings life and movement to the cat. The script first
makes sure the user’s browser has ‘reduced motion’ settings turned off before
releasing the kitty. If it gets the purr ahead, then the following happens:

1. The script applies CSS to where the cat is, to keep it on top of the other website
components and prevent any interference with buttons on the site.

2. It uses a ‘mousemove listener’ to check up on the mouse’s X and Y position so the cat
can react accordingly – follows the cursor.

3. The script uses movement logic to calculate constantly the distance between the cat
and the cursor, and also establishes a boundary control, which stops kitty from going AWOL
off the visible screen.

4. The scripts then reads off the coordinates written into it for the frames of the oneko.gif
spritesheet and ensures the correct sprite is read off the sheet and displayed on screen.
There are a total of 32 sprites, with each sprite 32x32 px, in a 8 x 4 rectangular layout,
and the directional and behaviour movements are mapped as coordinates for these
individual sprites – e.g. yawning is tired: [[-3, -2]],.

5. When the cursor goes idle, the part of the script that halts the kitty and carries out the
scratching, yawning and sleeping animations kicks in after a short period of time.



Below is the classic oneko spritesheet designed by Mr. Gotoh and made by adryd

… and you can visit the below link to find the source code for the cat animations.
github.com/adryd325/oneko.js/blob/main/oneko.js