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 Ari. The source code and default oneko spritesheet can be downloaded free from her GitHub repository.