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. Adryd 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 adryd’s GitHub repository, which means that
anyone can download the code and assets and use, remix and adapt them freely.

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 cat virtual 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